 Evolution of an Experiment: Circle Collision part 1Posted on July 13, 2009 by Grant SkinnerI 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.
Follow @gskinner on Twitter for more news and views on interactive media.
|
|
|
22 Comments
great stuff. I love the visualization idea. was the song by prodigy?
Posted by: mr.medrano on Jul 13, 2009 12:13pm URL: http://angelmedrano.com
The visualizer looks very good!
I've another use of circle collision detection:
http://blog.onthewings.net/2009/07/14/simulating-atomic-model-of-metal-by-box2dflash/
Posted by: Andy Li on Jul 13, 2009 12:14pm URL: http://www.onthewings.net/
Amazing!!!!
Posted by: vectorcinco on Jul 13, 2009 12:18pm
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 on Jul 13, 2009 12:18pm URL: http://kylefox.ca
Amazing! I love the colors, the effects, music.. well, everything!
Posted by: Lucas Motta on Jul 13, 2009 12:27pm URL: 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 on Jul 13, 2009 12:43pm URL: http://twitter.com/flash_ripper
Great stuff!
Please keep us posted on your experiments!
Regards!
Posted by: Luis Fonseca on Jul 13, 2009 12:44pm URL: http://www.flashized.com
The music visualizer is totally rad.
Posted by: TK on Jul 13, 2009 12:56pm URL: http://blog.tkassembled.com
Grant, you rock. The visualizer is sweet. Also, my ears hurt.
Posted by: Tim on Jul 13, 2009 1:00pm URL: http://hotpads.com
As everyone here, i'm totally in love with the visualizer. It rocks !
Posted by: Floz on Jul 13, 2009 1:32pm URL: http://www.minuit4.fr
nice choice of music ;)
really spectacular visualiser any chance of a peek at the code?
Posted by: patrick on Jul 13, 2009 1:58pm 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 on Jul 13, 2009 2:03pm URL: 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 on Jul 13, 2009 2:29pm URL: 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 on Jul 13, 2009 3:40pm URL: http://blog.circlecube.com
This is very cool. I'd look to see some source code. Thanks
Posted by: Flash Framer on Jul 13, 2009 8:57pm URL: http://www.flashframer.com
Wicked!! I love it....
Posted by: Justin on Jul 13, 2009 9:12pm
that visualizer is just sick.
Posted by: marcus on Jul 13, 2009 9:46pm
SAbi - lIkes.
Posted by: SAbi Sin on Jul 14, 2009 12:20am URL: http://www.sabisin.com
Fascinating, thank you for sharing the experience.
Posted by: Bionic_mars on Jul 14, 2009 2:13am
It runs very fast, have a really amazing performance!
Congratulations, and thank you for sharing!
Posted by: Paulo Araujo on Jul 14, 2009 9:09am 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 on Jul 14, 2009 11:40pm URL: http://www.dobieag.com
awsome work..
where do i get the source code for these works...???
Posted by: Aditya on Jul 29, 2009 8:45am URL: http://-