Devlog #4:

I added a net of the scrambled Rubik’s cube to my webpage. Even though a real cube moves in separate pieces, I decided to calculate the cube using the stickers.

I used an array to represent all 54 stickers on the cube, and used functions that switched around the stickers to represent turning the cube’s faces. I was originally going to make a function switching around the stickers for every single face turn (there’s 12, not including rotating the entire cube, the middle slice, and the double moves). But after I made the function for turning the top face and it already took up like 100 lines of code, and deciding that I don’t want to get carpal tunnel syndrome when I’m not even an adult, I realized I could just rotate the entire cube and stick with only one face turn. This brought down my code from a potential 1200 lines to only 300.

At this point, I’ve spent like 2 hours on making this cube net but there’s still nothing on screen to show for it.

So I quickly coded a net of the cube using HTML and CSS and used JavaScript to change each element according to what its color in the array is.

Just when everything was just about done, I ran into the biggest problem of this entire session: the net/drawing wasn’t accurate. After about 2 hours of debugging, I discovered I forgot to reset the cube before “scrambling” it again. I literally wrote a function doing just that and I forgot to use it.

(I’m reading the page on how to write a devlog and apparently they’re only supposed to be 4-6 sentences… lol)