Rubik's Solver
Montre ton cube à la caméra, il te dit comment le résoudre
Une web app mobile qui scanne un Rubik's Cube à la caméra, face par face ou en le tournant librement, reconstruit ses 54 cases et affiche une solution courte (22 coups au plus en 3×3), jouée coup par coup en 3D. La détection est faite maison : segmentation en espace Lab, homographie pour la perspective, algorithme hongrois pour n'accepter que des pièces qui existent. Ce choix règle la confusion rouge/orange et fonctionne même sur les cubes sans stickers. L'app gère aussi le 2×2 (solution optimale) et le 4×4 (par réduction). Elle reprend et dépasse un premier prototype à la webcam de 2025.
Ce qui brille
- Vision par ordinateur écrite à la main, sans OpenCV : segmentation Lab multi-seuils, réseau de cases ajusté par homographie, rejet des carrelages et des claviers, détection des rainures sur les cubes sans stickers
- Couleurs attribuées par algorithme hongrois sur de vraies pièces : 9 cases par couleur garanties, torsion, retournement et parité corrigés, faces montrées à l'envers remises d'aplomb
- Mode libre : reconstruction 3D du cube pendant qu'on le tourne devant la caméra (repliage des faces voisines, recalage sur les 24 rotations), avec un mini-cube qui se remplit en direct
- Trois solveurs : 2×2 optimal (IDA*), 3×3 Kociemba en Web Workers, 4×4 par réduction avec le solveur threephase de csTimer
- Mise en scène soignée : un cube Three.js qui voyage entre les écrans, se déplie en patron pour la vérification et se replie pour la solution, plus des confettis
Mode d'emploi
Choisir 2×2, 3×3 ou 4×4, autoriser la caméra et montrer chaque face (ou saisir les couleurs à la main), vérifier le patron puis suivre la solution animée en 3D
Fabriqué avec
- 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