Fun with Math: Simple Multi-Object Collision Detection

In recent weeks, I’ve been doing more and more experiments with web animations. Most of these experiments have been intentionally simple in nature, with a focus on building a solid, highly-optimized animation. (After all, #perfmatters.) My latest experiment involves good old fashioned collision detection of multiple objects.

A few quick notes about the code:

  • The demo uses the HTML5 <canvas> tag. If you aren’t using a modern browser, you’re out of luck.
  • For a consistent frame rate, I used the JavaScript requestAnimationFrame method.
  • The collision detection uses lots of sweet math to calculate angles and velocities. (I’d be remiss if I didn’t mention that I referred to the book “ActionScript 3.0 Animation” by Keith Peters for help with some of this math. I don’t know about you, but I don’t just remember when or why to use Math.atan(), Math.sin() and Math.cos().)

If you’re interested in more of the code, just take a look at the page source. It’s all there for you.

Anyhow, here’s a look at the experiment. Alternatively, you can view it in a new window.

Until next time, happy coding!

There are no comments yet, add one below.

Leave a Comment