Interactive Rubik’s cube

Wow, I can’t believe it’s been over 7 months since my last project here! Well, of course I haven’t been sleeping the  whole time… I was focusing mostly on my master’s thesis, which I took as if it was a personal project of mine, with the sad exception that I cannot just share my results here… But believe me, it was super cool 🙂

The past year I’ve been turning more to the software side of things, partly because of my master’s, partly because I have loads of fun! So this little project is me mixing my new passion for animation and simulation with my good old Rubik’s cube hobby.

I was introduced to Three.js through Udacity’s Interactive 3D Graphics online course and instantly fell in love with the simplicity of creating 3D graphics directly on the browser – really recommend the course and the library (even though it could be better documented :P). A great help was also this tutorial – in fact, I started my script by modifying their example 😀 This was also a nice opportunity to start using GitHub, the whole code is available there for anyone to modify, add features and so on 🙂

The cube is very simple, the faces can be rotated by pressing keys on the keyboard (U,D,L,R,F,B: as conventional Rubik’s cube notation) and the camera can be moved with the arrows. If you hold the SPACE key while rotating a face, the face rotates in the opposite direction (U’,D’ and so on). The cube can be reset by pressing F5 and reloading the page.

Enjoy chapu’s cube 😉 Let me know what you think, if the code is retarded, if it needs more functionality, and so on 😛  I still want to clean up the code, improve the camera movement (the current one was mostly to help me with the debugging), add more interactivity… And I have many many more plans for it, stay tuned mwahaha

(You can play with the cube at http://chapulina.github.io/cube/. WordPress.com doesn’t support embedding frames or anything… Maybe my next project should be to move to WordPress.org :P)