Isometric animation

Colliding Cubes

Colliding Cubes is a generative animation driven by a tiny rigid-body physics engine. A handful of isometric cubes drift across a bounded plane in every direction, ricochet off the four walls and knock into one another — each impact detected and resolved live, cube by cube.

What it is

It runs completely on your device. There is no server, no sign-up and nothing uploaded — the simulation steps on a background thread and draws to a canvas, so you can tune how many cubes there are, how big and how fast they move, and how bouncy the collisions feel, and watch the motion react instantly.

The motion is deterministic: the same seed and settings always reproduce the same run, frame for frame, because every step advances on a fixed timestep with a seeded random number generator and a fixed collision-resolution order. That makes it a dependable ambient background, header animation or screen-recording loop — and you can export any moment as a still PNG.

How it works

  1. 01 — Every cube is a small rigid body with a position and a velocity. On each fixed timestep the simulation moves every cube, then checks for contact — first against the four walls, then against the other cubes — and resolves any overlap it finds.
  2. 02 — Cube-to-cube contact is found with a uniform grid broad phase: the plane is divided into cells, each cube is dropped into a cell, and only cubes sharing a cell or a neighbouring cell are tested. That keeps the work close to linear in the number of cubes instead of testing every possible pair.
  3. 03 — When two cubes overlap they are pushed apart along the line between their centres and given an equal-mass elastic response — the velocity along that contact normal is exchanged and scaled by a bounciness value, so a value of one is perfectly bouncy and lower values shed a little energy on every hit. Walls reflect the incoming velocity the same way.
  4. 04 — Cubes are drawn back-to-front — sorted by screen depth — so nearer cubes cleanly overdraw the ones behind them, each projected with the classic 2:1 isometric transform and extruded into a solid block. Everything is plain 2D canvas: no WebGL, and deterministic enough to reproduce a whole run exactly from a seed.

What to use it for

  • Ambient, always-moving background for a landing page hero or title card
  • Motion for a stream overlay, screen recording or short loop
  • A still PNG frame for wallpapers, posters and social banners
  • A friendly, visual demo of collision detection and elastic response