Rubik's Solver
Show your cube to the camera and it tells you how to solve it
A mobile web app that scans a Rubik's Cube with the camera, face by face or while you turn it freely, rebuilds its 54 squares and shows a short solution (22 moves at most for 3×3), played move by move in 3D. Detection is homemade: segmentation in Lab color space, a homography for perspective, and the Hungarian algorithm so that only pieces that actually exist are accepted, which fixes the red/orange confusion and works even on stickerless cubes. The app also handles 2×2 (optimal solution) and 4×4 (by reduction), and it builds on and surpasses a first webcam prototype from 2025.
What shines
- Hand-written computer vision, no OpenCV: multi-threshold Lab segmentation, a grid of squares fitted by homography, rejection of tiled floors and keyboards, groove detection on stickerless cubes
- Colors assigned by the Hungarian algorithm over real pieces: 9 squares per color guaranteed, twist, flip and parity corrected, faces shown upside down set straight
- Free mode: 3D reconstruction of the cube while you turn it in front of the camera (folding in neighboring faces, matching against the 24 rotations), with a mini-cube that fills in live
- Three solvers: optimal 2×2 (IDA*), 3×3 Kociemba in Web Workers, 4×4 by reduction with csTimer's threephase solver
- Polished staging: a Three.js cube that travels between screens, unfolds into a net for checking and folds back up for the solution, plus confetti
How to use it
Choose 2×2, 3×3 or 4×4, allow camera access and show each face (or enter the colors by hand), check the net, then follow the animated 3D solution
Made with
- JavaScript (modules ES, sans bundler)
- Three.js (vendored)
- cubejs (algorithme deux phases de Kociemba)
- threephase de csTimer (4×4)
- Web Workers
- getUserMedia (caméra)
- Canvas 2D
- Playwright (E2E avec fausse caméra)
- Web App Manifest
- GitHub Actions / GitHub Pages