I thought it might be interesting to share the progression of a couple of my more recent experiments, so people could see how a simple initial concept slowly evolves into something more complex and polished looking.
I'm going to start out with my "circle collision" experiments. These were actually sparked by a client project, which has itself significantly evolved into something much different. However, suffice it to say that the original commercial project required circular collision logic and gravity.
I started with a very simple test case demonstrating gravity and circular collision. In order to get the specific result I wanted I used the square root of distance for gravity instead of the square. You can check out CircleTest1 here. Click and hold to create new circles. They will simply bunch together in the center.
Still focused on the client project, I worked to refine the collision logic to make it more precise, and started playing with ways to bring the circles on screen. CircleTest2 demonstrates one of these ideas: launching the circles from the edges of the screen at a roughly right angle to the edge.
At this point, I started to think beyond the client's requirements, and decided to add mass-based collision physics (which wasn't needed in the commercial project). Initially I just wrote the collision and physics from scratch, but in later experiments tweaked the logic with information I found online. To test them, I enhanced the UI slightly so that I could create manually create circles with different sizes/masses and initial velocities. You can check out CircleTest3 here. Click and hold to create circles. Move your mouse before you release to change the initial velocity of the circle.
The next installment of this 3 (?) part series will look at the process of turning these initial experiments into a music visualizer (note: music will take awhile to load).
If people want, I will likely release at least some of this code. It's pretty hacky, but maybe someone will find it useful. Also, if people think this series is interesting, I will also do one on the spheres experiments I've been playing with.


Comments (22)
great stuff. I love the visualization idea. was the song by prodigy?
Posted by: mr.medrano at July 13, 2009 12:13 PMURL: http://angelmedrano.com
The visualizer looks very good!
I've another use of circle collision detection:
Posted by: Andy Li at July 13, 2009 12:14 PMhttp://blog.onthewings.net/2009/07/14/simulating-atomic-model-of-metal-by-box2dflash/
URL: http://www.onthewings.net/
Amazing!!!!
Posted by: vectorcinco at July 13, 2009 12:18 PMURL:
I'd love to see the code for this -- and not to be a nag, but it would be *very* cool to see this code posted on github :D
Posted by: Kyle Fox at July 13, 2009 12:18 PMURL: http://kylefox.ca
Amazing! I love the colors, the effects, music.. well, everything!
Posted by: Lucas Motta at July 13, 2009 12:27 PMURL: http://lucasmotta.com
Very nice 'liquid' behavior. The group of circles with different sizes in the CircleTest1 brings up the association with the tag cloud.
It would be interesting to inscribe the weighted tag terms in a circles of the corresponding relative sizes and then animate a bit, it can be a nice tag cloud visualisation.
So-u-rces! So-u-rces! :)
Posted by: Rostislav Siryk at July 13, 2009 12:43 PMURL: http://twitter.com/flash_ripper
Great stuff!
Please keep us posted on your experiments!
Regards!
Posted by: Luis Fonseca at July 13, 2009 12:44 PMURL: http://www.flashized.com
The music visualizer is totally rad.
Posted by: TK at July 13, 2009 12:56 PMURL: http://blog.tkassembled.com
Grant, you rock. The visualizer is sweet. Also, my ears hurt.
Posted by: Tim at July 13, 2009 01:00 PMURL: http://hotpads.com
As everyone here, i'm totally in love with the visualizer. It rocks !
Posted by: Floz at July 13, 2009 01:32 PMURL: http://www.minuit4.fr
nice choice of music ;)
Posted by: patrick at July 13, 2009 01:58 PMreally spectacular visualiser any chance of a peek at the code?
URL: http://www.np-labs.co.uk
Pretty rad dude. You should take the visualizer concept and turn it into an iTunes plugin with c++. Only, add 3D rotation and depth.. (=
Posted by: chris at July 13, 2009 02:03 PMURL: http://www.somethingcolorful.com
I always find all the code in this site useful. The low volume then huge burst parts in the visualizer are my favorites.
Posted by: cyancdesign at July 13, 2009 02:29 PMURL: http://www.cyancdesign.com
Awesome! Really enjoyed this, been a while since I've had the pleasure of seeing something that made me want to drop everything and go flash experimenting for a week! Keep it up! I really liked the collision in test3 and of course in the music visualizer. I like the creative way you're creating circles, really intuitive and simple once you do it once you don't even have to think about it. Great song to, man!
Posted by: Evan at July 13, 2009 03:40 PMURL: http://blog.circlecube.com
This is very cool. I'd look to see some source code. Thanks
Posted by: Flash Framer at July 13, 2009 08:57 PMURL: http://www.flashframer.com
Wicked!! I love it....
Posted by: Justin at July 13, 2009 09:12 PMURL:
that visualizer is just sick.
Posted by: marcus at July 13, 2009 09:46 PMURL:
SAbi - lIkes.
Posted by: SAbi Sin at July 14, 2009 12:20 AMURL: http://www.sabisin.com
Fascinating, thank you for sharing the experience.
Posted by: Bionic_mars at July 14, 2009 02:13 AMURL:
It runs very fast, have a really amazing performance!
Posted by: Paulo Araujo at July 14, 2009 09:09 AMCongratulations, and thank you for sharing!
URL: http://www.pauloaraujo.us/blog/
I just noticed that you put the ligthting effect on the black spheres (probably the red ones too but it's harder to see) in the visualizer. That's freakin' awesome!
Very nice job and yes, I'd like as much code as you'll release :)
Posted by: Mark D at July 14, 2009 11:40 PMURL: http://www.dobieag.com
awsome work..
where do i get the source code for these works...???
Posted by: Aditya at July 29, 2009 08:45 AMURL: http://-