Evolution of an Experiment: Circle Collision part 1

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.

Grant Skinner

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

@gskinner

22 Comments

  1. great stuff. I love the visualization idea. was the song by prodigy?

  2. 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/

  3. Amazing!!!!

  4. 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 ๐Ÿ˜€

  5. Amazing! I love the colors, the effects, music.. well, everything!

  6. 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! ๐Ÿ™‚

  7. Great stuff!

    Please keep us posted on your experiments!

    Regards!

  8. The music visualizer is totally rad.

  9. Grant, you rock. The visualizer is sweet. Also, my ears hurt.

  10. As everyone here, i’m totally in love with the visualizer. It rocks !

  11. nice choice of music ๐Ÿ˜‰

    really spectacular visualiser any chance of a peek at the code?

  12. Pretty rad dude. You should take the visualizer concept and turn it into an iTunes plugin with c++. Only, add 3D rotation and depth.. (=

  13. I always find all the code in this site useful. The low volume then huge burst parts in the visualizer are my favorites.

  14. 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!

  15. This is very cool. I’d look to see some source code. Thanks

  16. Wicked!! I love it….

  17. that visualizer is just sick.

  18. Fascinating, thank you for sharing the experience.

  19. It runs very fast, have a really amazing performance!

    Congratulations, and thank you for sharing!

  20. 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 ๐Ÿ™‚

  21. awsome work..

    where do i get the source code for these works…???

Comments are closed.