Magic 8 Ball

A p5.js simulation of the classic Mattel Magic 8 Ball toy. The sphere is drawn with a 50-layer gradient shading algorithm that creates the illusion of a 3D surface — no 3D library, no WebGL, just fifty carefully positioned, colour-interpolated circles.

Click anywhere on the ball to shake it and reveal an answer. There are four response types with different probabilities: positive (35%), negative (35%), vague (20%), and snarky (10%). The distribution is implemented as a weighted random selection — the same fundamental technique used in games, simulations, and machine learning models.

After each shake, expand The Math Behind the Ball below the canvas to see the live geometry values — shine angle, viewport position, text size — for that exact response.

S.P.A.R.K. Chat Log  •  Original Version (Stage 6)  •  History & How It Works (Movie Clips)