I came up with the idea of a pre-baked collision map. For each pixel

  • Red = distance to closest collide-able pixel, 0-32
  • Green = X distance to this collision point, -32 to 32
  • Blue = Y distance to this collision point, -32 to 32

It converts an image like this:

Into this:

All you need to do is look up the pixel colour for the centre of your circle, and you’ll know how far the closest collision point is. In this case, a vector in the opposite direction to this point is added to the ball’s velocity.

This was written in typescript, and actually takes a few seconds to bake this 400px square image. I could use WebGL and a fancy shader if I wanted to make this super fast.

I then added in some quick bouncy physics, and keyboard control, and came up with this:

My tumblr links