# Calculate shadow map to overlay hidden line-of-sight things in 2d?

Given a 2D sideview with even-sized grid squares and our hero in a known center-ish position like this

... and imagining this hero's line of sight like this...

how could one get the point values needed for the black overlay polygons as shown here? Thanks!

• Though it doesn't directly answer the question, and the page describes 2D lighting, I think the following page me be of help (particularly the bottom part): greweb.me/2012/05/… Commented Feb 7, 2014 at 20:37
• Sweet, especially as we're using JS/ Canvas here. Thanks!! Commented Feb 7, 2014 at 20:48

you can do the simple scaling trick.

yea too lazy to explain, just look at the image and ask if you don't understand

In this example I just scaled by a factor of 2. Higher values give longer shadows.

• I'm not sure i understand, how do you determine the locations of the scaled blocks? Commented Feb 8, 2014 at 14:17
• I just scaled with the eye position as the origin.
– Arne
Commented Feb 9, 2014 at 13:30
• Ah ofcourse, that makes sense. Commented Feb 9, 2014 at 19:00

I think you will need raycasting or walltracking to solve this.

This link might help you out. It shows the basic idea behind raycasting and walltracking with some interactive examples.

edit 1: changed raytracing to raycasting on first line, comment pointed out my brainfart

edit 2: Only use raycasting on the corners of your square, the rest can be interpolated. No need to cast endless amount of rays.

• I think you mean raycasting. Raytracing is used for computer graphics to create ultra realistic images, although it can take a very long time. I get what you mean though :) Commented Feb 7, 2014 at 22:25
• no you don't need raycasting. And I wouldn't recommend raycasting since a lot of rays would be required.
– Arne
Commented Feb 8, 2014 at 2:07