Przenoszenie cienia wokół okręgu

Question

Mam okrąg, który krąży co 10 sekund. Próbuję rzucić cień, który jest ustawiony pod kątem do orbity (źródło światła), jednocześnie biorąc pod uwagę kąt kamery.

Cień działa pod pewnymi kątami, ale gdy kamera jest bardziej lub bardziej z góry na dół, zaczyna wyglądać mniej precyzyjnie i nie mam pojęcia, jak to poprawić - wydaje się to skomplikowanym zagadnieniem matematycznym, którym jestem. walcząc, aby dowiedzieć się, jak rozwiązać.

Jest to animacja: http://jsfiddle.net/8y2bm88w/

A mój kod losowanie cieniu:

ctx.beginPath(); 

//rotate shadow with the planet 
ctx.translate(originX + obj[i].x, originY + obj[i].y); 
ctx.rotate(obj[i].angle); //rotate around origin 
ctx.translate(-(originX + obj[i].x), -(originY + obj[i].y)); 


var offsetX = -(10 * Math.sin(obj[0].angle)); //i feel this is the issue 
var offsetY = 0; //this too 

ctx.rect(originX + obj[i].x + offsetX, originY + obj[i].y + offsetY - 10, 20, 20); 
ctx.fillStyle = 'rgba(213,0,0,0.9)'; //red shadow - easier to see 
ctx.fill(); 

Kod większy sens poprzez JSFiddle gdyż stawia kod na więcej kontekstu.

Sądzę, że ma to związek z matematyką dla zmiennych offsetX i offsetY, ponieważ użytkownik zmienia kąt kamery, do której musi się dostosować offset i zmienia sposób poruszania cienia. Ale to naprawdę mylące, jak rozwiązać.

Answer 1

Ty trafienia to ponieważ obj[i].angle bazuje na elipsy współrzędnych a nie na współrzędne XY z widoku z góry na dół (co jest rzeczywiście to, co jesteś generowania wszystko inne od więc nie zrobić trzeba wykonać dla niego obliczenia).

Będziesz potrzebować obu kątów, więc dodałem drugą właściwość dla drugiego kąta. Kąt elipsy jest potrzebny do obrócenia kontekstu, dzięki czemu możesz być prostopadły do ​​wektora od punktu początkowego, tak jak go widziałeś. Nowy kąt jest dla obliczeń. Można to sobie wyobrazić jako wersję odwzorowaną w 2D.

obj[i].trueAngle = angle; 

Teraz mamy wartość do pracy, proponuję rysunek półokrąg na „ciemną stronę”, a następnie dodanie lub wycinanie z tego regionu wymagane przy użyciu krzywej wyboru, aby zakończyć cień, np

// centre on planet 
ctx.translate(originX + obj[i].x, originY + obj[i].y); 
ctx.rotate(obj[i].angle - Math.PI/2); 
// semicircle dark side 
ctx.arc(0, 0, 12, 0, Math.PI, false); 
// path along terminator 
var offset_terminator = -20 * Math.sin(obj[0].trueAngle) * (1 - camera.angle); 
ctx.bezierCurveTo(-7, offset_terminator, 7, offset_terminator, 12, 0); 
//fill 
ctx.fillStyle = 'rgba(213,0,0,0.9)'; //red shadow - easier to see 
ctx.fill(); 

Tu również cień kilka px większy niż planety, po prostu grał z numerów, aż znalazłem takie, które wyglądały dobrze.

Uwaga skonfigurować rotacja tak 0, 0 jest środek naszej planety, a oś x przemieszcza się wzdłuż terminator

DEMO