Rubik's Cube Solver

Inspiration

I wanted to create this project because I have a Rubik's cube and I don't know how to solve it. It's as simple as that. I thought that the project would be a technical challenge and help improve my skills with React Native which I hadn't deep-dived into much before this.

What it does

This app scans your Rubik's cube, using the react-native vision camera library and it display the scanned cube using a 3D model and react-native threejs. From there, it provides the optimal solution to the user, and they can follow along with the animations of the 3D render of their cube.

How I built it

The mobile app is built with React Native and Expo. We use react-native-vision-camera to process camera frames directly on the device via worklets, using pixel RGB values and matching them against calibrated color ranges to identify each tile. The 3D cube visualization is rendered with react-three. On the backend, there is a simple FastAPI server in Python that takes the scanned cube state as a string and runs it through the kociemba library, which is a two-phase algorithm that typically finds a solution in 20 moves or fewer.

Challenges I ran into

The animation of the cube was the hardest part. Animating each individual sticker on the 3D model, keeping track of their positions and doing it with speed was very difficult. The cube still does not animate smoothly but is able to do each animation for each individual face. It was hard to keep track of the positions of the stickers as the model was transferred from Blender to my app.

Accomplishments that I'm proud of

Getting good scans in different lightings is something that I'm very proud of. I am also happy with how intuitive the UI is, and how it makes it as easy as possible for new users.

What I learned

I learned a lot about real-time frame processing in React Native and the constraints of running logic on the camera thread via worklets. I also learned how important the UI is in regards to making the user experience as simple as possible. With the little amount of buttons the program has, the scan to solution takes less than a minute.

What's next for Rubik's Cube Solver

Improved animation of the 3D model. Improved color detection to move away from hard-coded RGB values. Offline solving by not using fast-api to solve the cube on the local device in the backend. Support for different cube sizes (2x2, 4x4).

Built With

• fast-api
• react-native