I have a circle which orbits every 10 seconds. And i am trying to cast a shadow which is angled towards the orbit origin (the light source) whilst also taking into account the camera angle as well.
The shadow works for some angles but as the camera goes more edge on or more top down, it starts to look less accurate and I have no idea how to correct for it - it seems like a complicated math issue that I am struggling to figure out how to solve.
This is the animation: http://jsfiddle.net/8y2bm88w/6/
And my draw code for the shadow:
Javascript
//draw shadow over planet//
ctx.beginPath();
//rotate shadow with the planet
ctx.translate(originX + obj[i].x, originY + obj[i].y);
ctx.rotate(Math.atan2(obj[i].y, obj[i].x * (1 + camera.angle / 2))); //rotate around origin
ctx.translate(-(originX + obj[i].x), -(originY + obj[i].y));
var offsetX = -(10 * (1 - camera.angle) * Math.sin(obj[0].angle));
var offsetY = 0;
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();The code makes more sense via the JSFiddle as it puts the code into more context.
So i think this is to do with the maths for offsetX and offsetY variables, as the user changes the camera angle the offset's need to accommodate and change the way in which the shadow moves. But, this is really confusing how to solve.
Note this is using 2D in Javascript, not a 3D engine / library - whether that matters i do not know, I have not done 3D graphics, but i imagine this can be solved in 2D.