Di chuyển bóng xung quanh một vòng tròn

Question

Tôi có một vòng tròn quay quanh mỗi 10 giây. Và tôi đang cố gắng để đúc một cái bóng đó là góc cạnh về nguồn gốc quỹ đạo (nguồn ánh sáng) trong khi cũng có tính đến góc máy ảnh là tốt.

Bóng hoạt động cho một số góc nhưng máy ảnh có nhiều cạnh hơn hoặc thấp hơn, nó bắt đầu trông kém chính xác hơn và tôi không biết cách sửa nó - nó có vẻ như một vấn đề toán học phức tạp mà tôi đấu tranh để tìm ra cách giải quyết.

Đây là phim hoạt hình: http://jsfiddle.net/8y2bm88w/

Và mã bốc thăm của tôi cho bóng:

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(); 

Mã này có ý nghĩa hơn thông qua JSFiddle như nó đặt mã vào bối cảnh nhiều hơn. Vì vậy, tôi nghĩ rằng điều này là để làm với các phép toán cho các biến số offsetX và offsetY, khi người dùng thay đổi góc máy ảnh bù đắp cần phải thích ứng và thay đổi cách bóng di chuyển. Nhưng, điều này thực sự khó hiểu làm thế nào để giải quyết.

Answer 1

Bạn đang đánh này vì obj[i].angle của bạn được dựa trên phối elip và không phải là tọa độ xy của cái nhìn từ trên xuống (mà thực sự là những gì bạn đang tạo ra mọi thứ khác từ vì vậy chúng tôi không cần phải tính toán cho nó).

Bạn sẽ cần cả hai góc, vì vậy tôi đã thêm thuộc tính thứ hai cho góc khác. Góc hình elip là cần thiết cho phép quay của bối cảnh, do đó bạn có thể vuông góc với vec-tơ từ gốc như đã xem. Góc mới là để tính toán. Bạn có thể nghĩ nó như là một phiên bản không được ánh xạ 2D.

obj[i].trueAngle = angle; 

Bây giờ chúng ta có giá trị để làm việc với, tôi khuyên bạn nên vẽ một nửa vòng tròn cho "mặt tối" và sau đó thêm vào hoặc cắt ra từ khu vực này theo yêu cầu sử dụng một đường cong của sự lựa chọn của bạn để hoàn thành bóng, ví dụ

// 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(); 

Ở đây tôi cũng tạo bóng lớn hơn một vài px so với hành tinh, tôi chỉ chơi với số cho đến khi tôi thấy một số trông đẹp.

Xin lưu ý tôi thiết lập luân chuyển để 0, 0 là giữa hành tinh và các trục x di chuyển dọc theo terminator

DEMO