How does a 2D canvas decide which face lands face-up?

Each die tracks a single accumulated rotation angle driven by real angular velocity and ground friction, exactly like the 3D engine's angular momentum. Every quarter-turn (90 degrees) of that accumulated rotation advances the showing pip value by one step around the standard 1-2-3-4-5-6 face cycle, the same way a tumbling cube changes its up-face each quarter roll — so the final number is a deterministic result of the random launch spin, not a separate dice-roll() call.

What physics does the throw actually simulate?

Semi-implicit Euler integration under constant gravity, with floor and wall collisions that invert the velocity component along the contact normal scaled by the restitution coefficient, plus ground friction damping both linear and angular velocity on each bounce — the same integration scheme as the 3D version, projected onto a plane.

Why do the Gravity and Bounciness sliders matter?

Gravity sets how fast the die falls and therefore how much kinetic energy it carries into each bounce; Bounciness (the restitution coefficient) sets what fraction of that vertical speed survives a bounce. Together they control how long a die tumbles before settling and how chaotic (sensitive to the exact launch conditions) the final face becomes.

Home▸Physics & Mechanics▸Dice Rolling Physics (2D)

🎲 Dice Rolling Physics (2D)

2D top-down dice-tray physics: gravity, bounce restitution and angular-momentum spin decide the settled face, with live throw-force, gravity and bounciness controls.

Physics & Mechanics2DModerate60 FPS📱 Mobile-adapted⇄ 3D version

About Dice Rolling Physics (2D)

This 2D companion drives the same physics as the 3D dice tray — gravity, bounce restitution and angular-momentum decay — projected onto a flat top-down view. Each die integrates gravity and velocity with semi-implicit Euler, bounces off the floor and walls with a restitution coefficient you control, and loses linear and angular speed on every ground contact through friction, exactly like the original's 3D collision response. Because a flat canvas can't show a cube's full orientation, the showing face is derived directly from the die's accumulated rotation: every quarter-turn advances the pip value by one step around the standard 1-2-3-4-5-6 cycle, the same rule that makes a real die's face flip each 90 degrees it tumbles — so the number you see is a deterministic outcome of the random launch spin, not a separate dice roll.

Throw Force, Gravity and Bounciness sliders reshape how energetic and chaotic each roll looks, and the Number of Dice slider lets you compare multiple simultaneous throws. A live readout panel tracks each die's value, their sum, roll status and peak speed as the throw settles.

⚙ Under the hood

2D top-down dice-tray physics with real gravity, bounce restitution and angular-momentum spin deciding the settled face, plus live throw-force, gravity, bounciness and dice-count controls.

dice rollrandom numbersmomentumrestitutionangular momentum

2D · HTML5 Canvas 2D · 60 FPS target · runs fully client-side, no install