Cube.io

• 

  Screenshot of the cube solving page

Inspiration

Solving a Rubik's cube is hard, but it is a good skill to learn. Learning to solve a Rubik's cube helps improve problem solving skills, and research has shown that people who know how to solve a Rubik's cube have better memory and reflexes. Our app aims to make this learning process as easy as possible by presenting the user with solutions to their own scrambled cube.

What it does

Cube.io, aims to make solving a Rubik's cube accessible to anyone with a smartphone. Cube.io is simple to use. You simply take a photo of each side of a Rubik's cube, then the app shows a visual solution to the cube. The solution generated is a beginner's solution so it should be easy to follow for beginners. The moves are shown visually on a 3D rendered cube, so those who struggle with cube notation, can simply watch what moves are made on the cube. Users can step through moves one by one, undo moves, and play the entire solution all at once.

How we built it

Cube.io utilises Tensorflow to handle image processing. Canny Edge detection is used to find the edges within the image, and RANSAC is used to extract straight lines from these edges. From these edges bounding boxes of the 27 visible quadrilaterals are computed. Unfortunatley we ran out of time to complete the rest of the image processing part, so the current version of the app uses a hard coded cube state. We also used Three.js to render the 3D cube and Material Design to create a beautiful and clean UI. To calculate the puzzle solution we have created a backend API with express.js (node) which also integrates Python to handle algorithmic processing.

Challenges we ran into

Converting two images into a cube state was much more difficult than we anticipated. In the end we did not finish this portion of the app. The current state of the image processing portion is able to determine the 27 bounding quadrilaterals of the faces of the cube, but it can only do this if the background is relatively monotone, as any extra edges result in problems with our algorithm

Accomplishments that we're proud of

We are very proud of the 3D rendering of the cube, as it looks very nice and the move animations are clean and smooth.

What we learned

Throughout this hack, we learned a number of new frameworks. We learned how to render 3D objects in a web browser using Three.js. We also learned about backend development, which was used to integrate with a python script to get the solution to a cube state.

What's next for Cube.io

In the future we plan to add support for other types of twisty puzzles, such as the 2x2 and 4x4 cubes, as well as the Pyraminx and Square-1 among others. We also plan to provide the option to generate other types of solutions, such as more advanced solutions, and optimal solutions to help users move beyond the beginners method.

Built With

• javascript
• node.js
• python
• tensorflow.js
• three.js