Advertisement Jump to content
Sign in to follow this  

Moving a shadow for a rotating object at an angle for 2D

This topic is 1171 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

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:


And my draw code for the shadow:


        //draw shadow over planet//
        //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

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.

Edited by thefollower

Share this post

Link to post
Share on other sites

The shadow itself should be drawn with a circle and not a square. Not only will it be more realistic, it'll also be easier to code this up. Now for the placement:


The two extremes from which the scene can be viewed are

  1. Top view i.e. the path of revolution is a perfect circle
  2. Front view i.e. the path of revolution is a horizontal straight line

If you get the shadow for these two angles right, then the remaining, intermediate angle views may be obtained by interpolating between these extremes. For the top view, the shadow circle will always be on the "far" side of the planet, quite simple. The front view, however, isn't as simple. The planet will be in the horizontal line's midpoint twice, once the shadow circle should be completely invisible (or rather behind the planet), while the other time it should obscure the planet altogether. When it hits the endpoints of the line, it'll be the same as the top view. This will mean changing the z-order of the rendering based on the planet's to or fro movement. While it's doing the first half of the circle, arc1, shadow should be drawn first and when in arc2, the shadow should be drawn second.


Hope these pointers help.

Share this post

Link to post
Share on other sites
Sign in to follow this  

  • Advertisement

Important Information

By using, you agree to our community Guidelines, Terms of Use, and Privacy Policy. is your game development community. Create an account for your GameDev Portfolio and participate in the largest developer community in the games industry.

Sign me up!