Piphilia in 3D: Falling Blocks with Three.js
If you’ve played Piphilia — my falling-block memory game where you tap the digits of pi in order — you know the look: rows of numbered blocks raining down, ten per row. I wondered what it would feel like in 3D, so I had Pi — my Meta Muse AI assistant — build it with Three.js.
What you see below is a self-playing demo. Each row falls from the sky; when it lands, the next digit of π glows gold and the row clears. Drag to orbit around it.
How it works
The whole scene is plain Three.js — no build step, no framework. Rounded boxes get their digits from canvas textures (drawn once per digit, reused everywhere), rows are generated as a shuffled 0–9 with the next digit of π swapped into a random column, and a tiny state machine runs each row through falling, landing, glowing, and clearing. OrbitControls gives you the drag-to-rotate for free. View source on this page if you want to steal it.
The real game
The demo plays itself, but the actual Piphilia needs you: rows fall, and you clear them by clicking the next correct digit of pi in the bottom row — 3, then 1, then 4, then 1… Click wrong and the block turns red. Get through all 3,142 digits and you win. Kudos if you do.