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 inquire 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 how I got started with Rubik's Cubes (speed cubes), how to "scramble" the cube, and the concept of the program I'm going to create.
*Scramble: Breaking the faces of a cube into pieces as a preparation for lining up all six sides. Cubes have rotation symbols, and if you rotate the cube in the order of the rotation symbols, you can scramble the cube into the specified shape.
The program that we will create next will randomly display scrambled cubes and automatically draw the unfolded diagram of the cube. It can also be used to practice speed cubing, a game in which players compete to see who can rearrange the disassembled cubes the fastest.
From the second round , we started using HTML and JavaScript. We extracted the necessary scrambles from the database published by the World Cube Association (WCA) and implemented a random display and refresh button.
We are now entering a phase where it will be difficult for people who don't know how to code to understand, but I will continue my research. In this third installment, I will program a "mechanism" for displaying an unfolded diagram using a JavaScript array.
As an aside, the other day I participated in an online Rubik's Cube LT competition. "LT" stands for Lightning Talks, and presenters are given about five minutes to give a presentation on a given topic.
One of the presenters was a web development engineer, so I unexpectedly learned a lot about the web, and I also got to hear stories about overseas expeditions from someone who has participated in about 150 speedcubing tournaments, so it was a much more meaningful experience than I had expected.
Speaking of competitions, it's pretty difficult to meet up in person these days, but there are also some easy online contests. " Tricon ," hosted by tribox , a specialist 3D puzzle store, is an online speedcubing contest that anyone can participate in at any time by simply registering their email address. You can record and register your time at any time you like, so I try it every week!
The biggest challenge: Recreating the cube rotation with JavaScript
Now back to the main topic.
This time we will implement the mechanism for this part of the completed image of the "Scrambler (tentative)".
Clicking the update button will display a scramble (rotation symbol) (implemented in the second session). The development diagram when the cube is rotated according to the scramble will be displayed here.
To display the development diagram, you must verify which parts move to where, and program the pattern of part movement. Furthermore, by executing the program (instructions) in the order of the rotation symbols, you can create the state of the six faces of the cube that will be the basis for the development diagram.
If I was just spinning the cube as a toy, I would not have thought so deeply about the movement of the cube. But now, I cannot complete Scrambler (tentative) without fully understanding this movement. In other words, once I have this mechanism, it is as good as complete.
Setting the initial state
First, with all 6 sides of the cube aligned, store the color information of all 54 parts (9 squares x 6 sides) in a JavaScript array . To put it simply, imagine having 9 people wear each of the 6 colors of clothing (white, green, red, blue, yellow, and orange) and have all 54 people move into designated room numbers in an apartment.
The image is that the apartment door will change to the same color as the clothes of the person who moves in.
After this, the apartment residents will move out every time the cube rotates. Each "move" represents the movement of each part of the cube.
Verification by rotating the actual cube
Now let's actually rotate the cube to see how it moves.
Let's explain using the rotation symbol "R" as an example.
"R" is the right side rotated 90 degrees clockwise.
The movement of R (left photo) and the state of the cube after rotation (right photo)
I attached stickers with the array index (apartment room number) written on them to each part of the cube, and checked how each part moved. It was a fairly analog method, even for me, but it was obvious at a glance how the parts were moving.
Looking at the Front, we can see that the yellow parts that were originally on the Down side have been moved to positions 02, 12, and 22. Looking at the Up, Back, and Down sides in the same way, we can see that each part has moved as follows:
After moving
This is the movement pattern for "R".
Even if the color of the parts changes, this pattern will not change. If you create a program that assigns the index value of the destination (the apartment occupant) according to this pattern, all you have to do is execute it in the scramble order.
The parts that should be white are somehow green.
However, when we ran the program that assigned the values mentioned above in the order (A) through (D), the following problem occurred during the processing of (D):
| (A) Front → Top |  |
|---|---|
| (B) Bottom → Front |  |
| (C) Back → Bottom |  |
| (D) Top → Back |  |
The top side was originally white, but in process (A), 02, 12, and 22 were changed from white to green. Therefore, in process (D), the back parts, which should have been white, turned green.
A program runs in the order it is written, so ABCD is a chronological order. However, in the real cube, these movements occur simultaneously in one rotation, so the difference between the program (chronological order) and the real thing (simultaneity) is what caused this problem.
This meant that some of the array values would become the assigned values before all processing was complete, so I realized that I needed to temporarily save the initial states of the six faces of the cube in a different location.
Written in code, it looks like this:
See the Pen sample1.js by M Matsubara ( @matsume ) on CodePen .
There are arrays "arrayF, arrayD, arrayB..." that set the initial states of the six faces of the cube in advance. Before executing steps (A) to (D), these arrays are temporarily copied and stored in separate variables "stashF, stashD, stashB...".
Okay, that's good!
The parts that should have been white turned green for some reason. Part II
...But it didn't work.
This is because copying an array in JavaScript is not a "deep copy" that duplicates the value, but a "shallow copy" that duplicates the reference, so both "arrayF" and "stashF" are actually arrays that reference the same value. In other words, what we wanted to store was the resident (value), but we duplicated and stored the address (reference).
This is a common JavaScript problem, so when I looked into it, I found a solution right away.
See the Pen sample2.js by M Matsubara ( @matsume ) on CodePen .
This allows you to store the values of an array.
This time it was OK!
Actual movement. The state of the six faces of the cube is provisionally displayed in text.
See the Pen scramble.js by M Matsubara ( @matsume ) on CodePen .
HTML and JavaScript code (scramble.js)
You won't see the scramble in CodePen because you're loading a local TSV.
Summary of this post
This time too, I fell into the trap. You may have noticed that this is a very basic step, but I've never been good at JavaScript since my days as a coder, and to be honest, I've avoided it. However, I was surprised at how hard I could work on my favorite Rubik's Cube! I realized that I can broaden my horizons by doing something I like.
One of the challenges we will face going forward is that, as you can see, the cord is quite long.
I haven't been able to analyze the patterns of movement very well, and there are a lot of similar descriptions. I'm thinking of doing a code review in-house and getting some advice.
Current Best average of 5: 34.89
And as for my progress with speed cubes, I've improved my time by almost 3 seconds since last time! I improved by 0.48 seconds last time, so I think it's safe to say that I've improved a lot. I definitely feel like I've been able to consistently get good times recently. However, maybe it's because of my age, but when I learn something new, I forget what I learned before (lol), so I'm thinking that I should study memory techniques along with cubes.
*The "average of 5" is the average of the three times out of five consecutive solves (a series of actions to complete six sides), excluding the fastest and slowest times.
MATSUBARA Megumi