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 got hooked on Rubik's Cubes during my work-from-home period, and this time I decided to start a serial project called "Let's make a program that automatically draws the development diagram of a cube!" I wanted to do something that combines my love of cubes with the web, and that's when I came up with the idea of implementing this function. There are already apps like this, but by making one yourself, you should be able to deepen your understanding and love for cubes. I'd like to share the process of making it in several parts. This is the second part, and I'll start making it using HTML and JavaScript.
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.
By the way, it seems that the third Rubik's Cube boom is currently underway!
The three-dimensional puzzle "Rubik's Cube" celebrates its 40th anniversary this year.
(Omitted)
Megahouse: As it is the 40th anniversary, we had planned various events, but due to COVID-19, it became difficult to hold events. However, from April to May, when people were asked to stay home, the amount of shipments jumped to 2.5 times that of the same period last year.
*Quoted from an article in Yahoo! News dated August 21, 2020
Indeed, when watching YouTube, you often see videos of famous celebrities trying to solve cubes. I myself have been hooked on speed cubes for three months, and I continue to practice by trial and error, watching videos of Rubik's cubes every day, hoping to improve my time by even a second. It's fun to do it alone, but it's more motivating when there are many people who can relate to me!
Now back to the main topic.
Before lining up the six sides of the cube, you must first scramble the cube (break the faces into pieces). You can break the cube however you like, but in competitions, cubes that have been broken into a specified shape are used to ensure fairness. Cubes have rotation symbols, and if you rotate the cube according to these 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 crumbled cubes the fastest.
The parts to be produced in the second installment are indicated in the completed image.
Now, let's start creating the "Scramble random display and update button" part.
Production has begun!
First of all, the problem is how to make the scramble. This leads to a question.
"Are there any rules regarding the numbers or order of the rotation symbols in scramble?"
I took a look at the World Cube Association (WCA) website and luckily I found some scramble data that looked like it could be used as is! Use whatever you can.
I found a database of WCA competition results , and the data of the scrambles used in past competitions was provided in SQL and TSV files. This time, I will use the TSV file (Tab Separated Value).
TSV format file.
Since 2014, all official competition scrambles have been recorded.
The file is heavy. I thought to myself, but it turned out to be 1,193,647 lines in total (lol). And when I looked closely, I saw some unfamiliar rotation symbols. In fact, I learned this while I was getting into cubes and researching them, but in speed cube competitions, there are other types besides 3x3x3, such as 2x2x2, 4x4x4, 5x5x5... and even one-handed and blindfolded categories!
Each event was assigned an ID, but this TSV file contained all the scrambles for all events.
File format conversion
First, convert this TSV file into a format that can be handled by JavaScript (JSON).
When I searched for "tsv to json conversion", I found someone who had published JavaScript code, so I tried it immediately, but it didn't work. I wondered what was going on, and it turned out that the data was too heavy and it was taking a really long time to process.
While searching for other conversion methods, I found a library called "d3-dsv" that can convert CSV and TSV files. By loading this library, you can handle TSV in the same way as JSON. The processing speed is also good, so I decided to use it this time.
Data Analysis and Filtering
Next, extract only the 3x3x3 scrambled data from it.
When I checked the Japan Rubik's Association (JRCA) website, I found that the abbreviation for the 3x3x3 competition name is "333", so I filtered out only the data with an "eventId" of "333" from the TSV file and created a new array.
This will extract only the data "333".
Random display & update with button
Next, I want to display the filtered scramble randomly and update it with a button. This went smoothly without any problems.
So, I have completed the "scramble random display and refresh button"!
Actual movement
See the Pen crambles.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
There is a lot of data available online, such as the scrambled cube data. Some of it can be used as is, but some, like this one, requires some processing.
In actual projects, we have been receiving more and more enquiries about things like "I want to get JSON data using a Web API and display it on a website." This is an area where demand is likely to continue to grow, and in this production I learned a lot about analyzing and handling such data.
As for future issues, the TSV file is too heavy to upload to the Git repository, so I'm worried about where to store it. It's fine to run it locally, but I'd like to be able to show you the actual thing eventually, so I'll continue to look into it.
Current Best average of 5: 37.49
I improved my record by 0.48 seconds from my previous 37.97! It's a small improvement, but I'm really happy when I can improve my time even a little, and when that happens, I become even more obsessed with the cube, with the sole desire to get a better time. I don't think I can escape this infinite loop any time soon.
*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