Hello, this is Matsubara.
Now I work as a "project consultation desk" and am in charge of calculating the amount of work required for estimating and scheduling projects that customers consult with me about. I'm a former coder, so I do some coding from time to time.
I started working with Rubik's Cubes during the work-from-home period and became obsessed with them, so I've started a series called "Let's create a program that automatically draws the unfolded diagram of a cube!"
In the first episode , I talked about why I started Rubik's Cube (speed cube), how to "scramble" the cube, and the concept of the program I'm going to create.
In the second and third articles , we reported on the process of developing the site using HTML and JavaScript, but the content may be a bit difficult for those who don't understand coding.
In the previous No. 4 issue , we brought you a little break from the excitement with seven cube trivia facts that you'll want to tell someone about once you know them.
And now, this series has finally reached its final episode.
In other words, the "Scrambler" is finally complete!!!
The final touch: Displaying the development diagram
Now, I would like to report on the final finishing touches. As with the production process, most of the information is aimed at people who understand coding, so please bear with me.
The program for the cube's rotation has been completed, so all that remains is to code the unfolded diagram in HTML and reflect the state of the cube (the color information of the six faces). The path to completion is in the following three steps:
- Get the HTML elements of the development diagram to draw it on the browser
- Match the format of the acquired HTML element and JavaScript color information
- Reflect the colors of all 54 parts in HTML based on the color information from JavaScript
1. Get the HTML element of the development diagram
First, in order to draw it on the browser, we obtain the HTML elements that make up all 54 parts of the unfolded diagram (9 squares x 6 faces).
2. Standardize the color information format of HTML elements and JavaScript
Currently, the color information for all 54 parts held in JavaScript is stored in a two-dimensional array (indexes 00-02, 11-12, 20-22), but because the HTML elements obtained in 1 are normal arrays (one-dimensional arrays), we will convert the JavaScript color information from a two-dimensional array to a one-dimensional array (indexes 0-8) to match the two data formats.
3. Reflect the colors of all 54 parts in HTML based on the color information from JavaScript
Based on the color information from JavaScript, a class that changes the background color is assigned to the obtained HTML elements in order. The colors of all 54 parts are reflected in the exploded view.
This sequence of steps written in code looks like this:
See the Pen Sample3.js by M Matsubara ( @matsume ) on CodePen .
Since the cube has six sides, the same thing is repeated six times. It looks a bit lame. The above code has been refactored (reorganized without changing the behavior) to the following code.
See the Pen Sample4.js by M Matsubara ( @matsume ) on CodePen .
By using JavaScript's forEach (repeated processing), you no longer need to write the same thing over and over again. To use this function, we first defined the necessary information for the six faces of the cube as an object (key and value). We then write the program we want to execute repeatedly just once, and loop that as many times as there are objects. As a result, there is no more duplicated code, and the code itself is much shorter!
Bonus: Added loading screen
I'm very satisfied with the movement and appearance as I imagined at first, but... it's kind of slow. It's not that it's slow, but it takes 2-3 seconds for the first screen to appear, which bothers me. Well, it's inevitable since it's loading a TSV file with 1,193,647 lines, but I decided to add a loading screen to create an atmosphere.
Recently, there have been a lot of samples of loading animations that can be implemented using only CSS and JS without images, so I decided to arrange one of them to make it look more like a cube.
So, it's finished!!
I managed to finish the whole thing, and here is the finished page. Please visit it and click the update button. If you have a cube, try scrambling it. In addition, when I made it public, I couldn't solve the problem that the TSV data was too large, so I deleted some of the data and adjusted it this time.
When the Monosas Search Team started on the Monosas website, I brought in this project out of curiosity, and have continued to create and serialize this "Scrambler" (which ended up being a working title until the very end). However, I was always struggling with each article.
In the end, I never really understood who I was writing for or why I was writing, but I managed to keep my passion for the cube intact.
This year, I reserved a lucky bag for the first time in over 10 years, and of course the contents are cubes. It will arrive on January 1st, so it looks like the new year will be filled with cubes!
How much has speedcubing grown?
Finally, regarding my time to spin the actual cube, my best time (single time) in July 2020, when I started this series, was 45.49 seconds. And my current best time is... 26.82 seconds! I've managed to improve my best time by about 19 seconds in five months.
My "Best average of 5" (the average of the three times excluding the shortest and longest two times out of five consecutive measurements) that I mentioned in each article is now 33.21 seconds, 1.14 seconds faster than last time. It's a little at a time, but I'm steadily improving.
This is a bit technical, but I solve the cube using a method called "CFOP". There are 119 steps to the solution, but I only remember about half of them. That means I still have a lot of room to grow!
Of course, spinning the cube quickly is not the only way to enjoy it. The more you learn about it, the deeper the world of cubes becomes, and just like how I programmed the scramble in JavaScript this time, there are many people in the cube world who practice their own unique ways of enjoying it. This breadth is also one of the attractions of cubes. I hope you will pick up an actual cube and discover your own way of enjoying it.
This marks the happy end of the "Web, Cube, and Me" series.
Thank you very much for reading to the end.
MATSUBARA Megumi