Evolution of an Experiment: Circle Collision part 3

In building the circular collision music visualizer which I blogged about yesterday, I became mildly obsessed with the lighting effects on the circles, which led to another short set of experiments.

My first step was to simplify the music visualizer, so that I could focus just on the lighting. I wanted the lighting to be dynamic though, so I kept the light intensity keyed to music. I played around with a lot of different ideas for lighting effects, finally settling on a combination of a bevel filter, an inner drop shadow, and a stretched / rotated / blurred shadow sprite – all of which are affected differently by the intensity and distance to the light. I also added a radial gradient behind the light to make it more dramatic. The result was LightTest1.

I also built a slight variation, LightTest1a, that modifies the intensity of the light based on its proximity to the cursor, so the user can control the brightness.

Finally (thus far), I made the circles move based on the volume of the music, which created a somewhat hectic but mildly interesting visualizer in LightTest2.

I’m not quite sure where I’m going to go with this from here. I’ll release some of the source code next week. I’m also planning to do a similar article(s) covering my recent sphere experiments at some point.

Grant Skinner

The "g" in gskinner. Also the "skinner".



  1. Holy shit Grant! That’s freaking awesome! How come you didn’t use the drop shadow effect from lighttest1a on lighttest2. This is so impressive. I’ve only been flashing for a year now, and your work is laying down some benchmarks I’d like to achieve!

  2. lol, I love that album. Great spectral lighting effects!! Reminds me of the new Potter movie, in the dark cavern.

  3. Cool. Thanks for this.

  4. We actually used a similar lighting appraoch in a Zelda-style game we made for a client that gives a nice lighting effect (especially for a Flash game).

    Tiny-screenshot: http://www.previews.nl/games/mtvne/anubis/anubisGlow.jpg

    You can see this in action in the old demo (one year old, lacks most features):

    http://cas.nickelodeon.nl/anubis/tombesvanapep/demo/index.html (around 8mb, dutch language)

    (full-site: http://cas.nickelodeon.nl/anubis)

  5. i love this new sphere… also could’nt you dynamicly generate audio with the collision of the balls in your LightTest2… this way it could be based on interaction as well as beat detection

    i got something soon for all us as3 developers… its called lux and i hope everyone will join in the project.

    ur a god keep at it

  6. Pretty sweet dude, I tried to make a sphere of particles in Flash recently, but gave up and did it in C++ so that I could get the performance that I really wanted. I’d like to see the particles on the sphere moving around and using the proximity manager you developer way back to light up or shoot off the spheres surface.

  7. That is very impressive! And very inspriring too 🙂

  8. ian pretorius July 24, 2009 at 11:05am

    Excellent , I love this visualizer and it performs really great. I’vs had a few dabs at trying to think up something creative with this as3 feature since the days of reading your first post on computeSpectrum but never got round to making something as cool as this 😉 respect!

  9. Looks really, really nice! Great work!

  10. pretty cool, some scrollbars effecting velocities etc. would be fun too, Have you considered implementing the z axis or a rotating camera, that would make for a spinney rhythmic flash-gasmic experience.

  11. I’ve been trying to find this ever since your brief demo at Flashbelt. Can’t wait to see some of the source on lights1 & 2 especially. Thanks

  12. Wow, its a VERY cool visualizer, but i have a question, it might sound a littl stupid but, what song is that!!! it really rockz man xD, please, tell me, im interesting in finding more of this band, ty 🙂

  13. Can you show us the source file of this incredible light =)?

  14. LightTest1a is nice.

    the concept of lights in flash is itself pretty cool.

Leave a Reply

Your email address will not be published. Required fields are marked *