About Rubik's Cube Solver

What is this?

Rubik's Cube Solver is a complete digital companion for your physical cube. Whether you're a speedcuber analyzing patterns, a beginner learning to solve, or just someone who loves the iconic puzzle, this tool lets you capture, visualize, solve, and learn from your cube states with ease.

Built with vanilla JavaScript and powered by Python computer vision and the Kociemba solving algorithm, it combines the simplicity of web technologies with advanced color detection and optimal solving to bring your cube to life on screen.

Features

  • Interactive 3D Cube: Drag to rotate the cube in any direction for full 360° viewing with smooth CSS transforms.
  • Dual View Modes: Toggle between 3D perspective and flat net layout for different visualization needs.
  • Smart Camera Capture: Advanced HSV color detection using OpenCV automatically identifies cube colors, optimized for low-brightness environments.
  • Cube Solver: Generate optimal solutions using the Kociemba two-phase algorithm. Get step-by-step instructions in standard notation.
  • Solution Animation: Watch your solution come to life with visual step-by-step playback. Play, pause, step forward/backward, and reset controls.
  • Manual Color Editing: Color-first workflow - select a color from the palette, then paint multiple stickers. Includes keyboard navigation and screen reader support.
  • Reset Controls: Separate reset buttons for cube state and viewing angle.
  • Validation System: Backend validation ensures accurate cube states before import.
  • Responsive Design: Optimized for desktop, tablet, and mobile. Your cube looks great everywhere.

How to Use

  1. View Your Cube: Toggle between 3D and Net views. Drag the 3D cube to rotate it in any direction.
  2. Capture with Camera: Click the Camera button and follow the guided sequence (White → Red → Green → Yellow → Orange → Blue) to scan your physical cube.
  3. Edit Manually: Enable edit mode, select a color from the palette, then click stickers to paint them. The selected color persists, making bulk editing fast and efficient.
  4. Solve Your Cube: Click the Solve button to generate an optimal solution using the Kociemba algorithm.
  5. Watch Animation: Click "View Animation" to see the solution visualized step-by-step with playback controls.
  6. Reset Anytime: Use the reset button to return to the solved state, or reset the viewing angle separately.

Technology

This project showcases modern web development without the complexity of build tools or frameworks:

  • Frontend: Vanilla JavaScript (ES6 modules), CSS3 (Grid, Flexbox, 3D transforms), HTML5 Web APIs
  • Backend: Python 3.7+ with Flask, OpenCV for computer vision, NumPy for color processing, Kociemba for optimal solving
  • Architecture: Modular ES6 design with centralized state management, observer pattern, and event-driven communication
  • No Build Process: Direct browser execution, keeping things simple and fast
  • Production Ready: Deployable to Render with comprehensive deployment documentation

The Cube State Format

Under the hood, cube states are represented as a 54-character "cubestring" following standard notation:

UUUUUUUUURRRRRRRRRFFFFFFFFFDDDDDDDDDLLLLLLLLLBBBBBBBBB

This represents the six faces in order: Up (White), Right (Red), Front (Green), Down (Yellow), Left (Orange), Back (Blue). Each face has 9 stickers, reading left-to-right, top-to-bottom.

Deployment

This app is production-ready and can be deployed to platforms like Render in minutes. The single-service architecture serves both frontend and backend from one Flask app, making deployment simple and cost-effective.

Note: Camera features require local hardware and won't work on cloud deployments. All other features (visualization, manual editing, solving, animation) work perfectly in production.

Open Source

This project is built with passion for the Rubik's cube community. The modular architecture makes it easy to understand, extend, and customize. Whether you want to add new features, integrate different solving algorithms, or use it as a learning resource, the clean codebase and comprehensive documentation make it accessible to developers of all levels.