Lights and shadows experiment

โ€” ActionScript, Code snippets

Recently I found an interesting question on, about creating light and shadows in a 2D environment. I started experimenting with this to see how far I could take it. I love to share the results and some insides about this fun project.

How to get started

The initial code that the topic starter used a loop through all objects, and used hitTestPoint-function to detect if the light hits a wall. Therefore he used a loop with 360 steps, used for all directions. In the innerloop it tries if it hits the wall, otherwise goes away from the light (using the direction of the outerloop), tries if it hits the wall. That loop goes on till it does hit a wall. It is a bit of trial and error, but I think it is very clever. At the end of each loop a lineTo is used to draw the light, so in the end it will be a shape with 360 vector points.

Speed of light

Now, that screams for optimization and speed. It’s a fun project to mix some things you have seen and want to try out for a long time. The first thing that I tried to make it faster, draw all objects into an BitmapData, and use the getPixel function instead of hitTestPoint, which is notable faster if you don’t move objects. I used that BitmapData object only too check if the light hits the objects; no one actually sees it. To use hitTestPoint, you must loop through all objects and detect if they hit. With a lot of objects, it would be slower. With BitmapData, you don’t need that loop, and you are free to use unlimited objects with even custom shapes. Less looping == faster, unlimited objects == awesome ๐Ÿ™‚

More realism

I also wanted to make it look more realistic. Having light only is not close enough to realism. It needs shadows. I created an inverted shape of the light-shape and filled it with black (a). This creates a nice shadow, however has very hard bounds, which is ugly. So then I took the shape again and drawed with a nice transparent to black gradient (b). Those 2 layers have the BlendMode ALPHA. The holder of those has a solid shape fill (as big as the stage) with BlendMode LAYER. This creates a nice ‘hole’ which I think works very well as shadow if you make it half-transparent. Oh, the colored light-layer (c) is a gradient too, with the same shape as b, only with BlendMode ADD.

Re-using shape data

Another optimization I used was to use graphics data API. In this case I have 1 shape which could be reused 3 times. So before even drawing, I collect all points and commands in an Vector. When I have all data collected, it draws the light-layer and shadow-layer at first, then it pushes some extra points to the Array to make the outer shadow-layer. So with 1 Array of (manipulated) data I could draw multiple shapes. That’s a good case of using the graphics data, I guess.

Optimized trig functions

I also used the TrigLUT-class (Trigonometry LookUp Table) from, since the loop heavily uses Math.sin and Math.cos. I could use the valNormalizedPositive() function from that class in this case. It’s very fast and for me it was fun to use that class. ๐Ÿ˜€

But it is still too slow..

The most intense about this thing isn’t the calculation, but the rendering itself. The whole ‘canvas’ needs to be updated and redrawed every frame with lots of layers and blendmodes, which is very intense for the CPU. I don’t know if this would be possible with Stage3D, but that would be the last step to render really fast. And when that is possible, I’ll guess I could move the object real-time too, which makes it very interesting for games.

Check out the experiment:
ยป Lights and shadows

Let me know what you think about it and how does it perform on your computer?

6 responses to “Lights and shadows experiment”

  1. Ber says:

    Nice experiment, indeed ๐Ÿ™‚
    On my computer it stutter a little sometimes, especially with the auto-moving light, and the edges of the shadows flicker a little.
    But the idea is here, nice optimization work you’ve done here, and I’d really like to see the difference in terms of performance with Stage3D !

  2. Philippe says:

    Nice result, but I was expecting something based on geometry instead of hitTest/getPixels ๐Ÿ™‚

  3. Cool demo. I’ve done something similar both with and without Stage3D. It’s possible to do it without Stage3D also without using Math.* functions. I managed to do it with clever usage of BlendModes, basically calculating the vector between the light and the wall endpoint (assuming you have an array of walls) and then adding it to the wall endpoint. Your demo looks pretty though

  4. rackdoll says:

    Try pixelbender to draw your scene.
    This will take the rasterisation bottleneck away ๐Ÿ˜‰

  5. Mark says:

    @rackdoll Thanks for the reply, how exactly would you render this kind of scene with pixelbender?

  6. Rackdoll says:

    You can try maing a pixelbender filter which takes an vector of pixel values.
    then let the filter draw your actual stage into a bitmap…
    Did not try it like this…. but feels possible ๐Ÿ™‚

    Other option is to do all you calculations per pixel AND the actual coloring of the pixel inside the pixelbender filter….. and attach the filter to a bitmap. aka use it like a real shader
    This on i tried and works fine! ( )

Say something interesting

Please link to code from an external resource, like