Snowbeat

At Nation we were building a website for an audio production agency, and the design we came up with had these shapes in the background throughout.

The challenge here was to make them move around and collide with each other. This eventually grew into randomised shapes and randomised ground for them to collide with. This didn’t use any code libraries and was built from the ground up in pure JavaScript.

I later created this mini-app for Nation’s own website to demonstrate what I had built, and added a rendering mode that allowed the user to see the actual collision models being used by the code.

The squares around each shape are where the engine switches to more intense collision detection methods when another shape enters that area. When these squares overlap, the engine checks the actual shape points and if they are overlapping, otherwise shapes are just checked against their bounding box.