Today's Cube is made of two pages. One is a puzzle that gives you one problem a day, and the other is a 7-step solving guide for people solving a Rubik's Cube for the first time. Both live under play.ghmun.com/cube, and they share a single cube.js file for the cube math and the 3D view. It started from the Rubik's Cube lab on ainmath (ainmath.com). After building a math page that uses least common multiples to explain why repeating the same moves brings the cube back to its starting state, I figured I could make something to play with that cube too.
The cube is computed as a permutation of 54 stickers
The cube is computed as 54 stickers swapping places. Each sticker carries the coordinates of its piece and the direction it faces outward, and turning a face rotates the coordinates and directions of the stickers in that layer by 90° to find their new positions. Once you build the rotations of the six faces into a permutation table like this, everything else is just following the table. I checked that this math was right against known values. Repeating R U should return to the start after 105 times, R U R' U' after 6, and R U2 D' B D' after 1260, and all of them came out exactly that way.
The 3D view uses only CSS 3D transforms, no library. Each sticker is one square, and when a face turns, only the squares in that layer rotate for 0.2 seconds before being repainted with the colors of the new state. Rather than eyeballing whether the animation ends in the same place as the actual computed result, I checked all six faces against the rotation matrices. During those 0.2 seconds while a face turns, though, you can briefly see that the inside of the cube is hollow. Filling it in would have added quite a lot of code, so I left it.
The same problem every day, exactly 4 moves minimum
The problem is generated using the date in Korea time as the seed. Everyone who comes in on the same day gets the same cube. At first I thought four random turns would make a 4-move problem. But turn R L R' and the R and R' cancel out, so it's really just one L. So after scrambling, I compute the minimum solution directly, and if the minimum isn't exactly 4 moves, I draw again from the same random sequence.
The minimum solution is found by trying all 18 moves (6 faces × clockwise, counterclockwise, 180°) in depth order. Turning the same face twice in a row, or turning two opposite faces in swapped order, gives overlapping results, so those are skipped. Originally I wanted 5-move problems. But a 5-move search took up to 1.6 seconds even on a desktop, and it's slower on a phone. A 4-move search finishes in around 0.25 seconds, so I went with 4. Even at 4 moves, it's plenty hard for anyone who doesn't know the algorithms.
Press the hint and it shows the minimum solution one move at a time from the start. It's not recomputed from your current state; it's the solution applied from the original problem. That's because once you've made a bunch of wrong turns, the minimum solution gets much longer than 4 moves and takes a long time to compute. The copy-result button copies the problem number, the minimum moves, your record, and how many hints you used as text.
The solving guide's rules were tested on 3000 states
The solving guide is a layer-by-layer method that solves one layer at a time from the bottom up. It has 7 steps — white cross, white corners, middle layer, yellow cross, yellow face, yellow corners, yellow edges — and 7 algorithms. Each step has an example cube, and pressing play moves through the algorithm one move at a time. The examples' starting states weren't made by hand. They're made by applying the algorithm in reverse to a solved cube. That way, doing the algorithm once is guaranteed to solve it.
The problem wasn't the algorithms but the rule sentences: "In this situation, hold it like this and do this." The algorithms themselves are well known, but whether following my sentences as written actually finishes the cube is a separate question. So I generated 3000 random last-layer states that can actually occur, translated the rules for steps 4–7 into code word for word, and had it follow them.
The first version of the rules failed on 2464 of the 3000. In step 6 I'd written "turn the top face so the most corners are in place, then do the algorithm," but doing that can leave two corners swapped with each other. This algorithm cycles three corners, so a state where only two are swapped never gets solved no matter how many times you do it. When I changed it to the standard rule — find the side where the two top-layer corners are the same color (the "headlights") and put it at the back — all 3000 were solved. For how many times to repeat the algorithm at each step, I wrote down the maximums that came out of this simulation (3, 3, 2, 3) as they were.
Before that, there was one more misstep. When I first tested the step 5 rule, I made the states by twisting corners arbitrarily. That mixed in states that can't occur on a real cube, so I couldn't tell whether the test result meant the rule was wrong or the test was wrong. So I switched to making states by chaining algorithms at random. Every state made this way is one that can actually occur.
What was wrong on screen
Since the white face is on the bottom in step 1, I'd set that example to look up at the cube from below. But this example shows moving a white edge from the top layer down, so the white was actually on the top face and couldn't be seen. I switched it to the default view. Writing "6 algorithms to memorize" in the first paragraph was also wrong. I'd left out the middle layer's left insert when counting. I recounted while writing this and changed it to 7.
How to use it
In Today's Cube, you turn faces with 18 buttons. R turns the right face 90° clockwise, R' counterclockwise, and R2 180°, and all three count as 1 move. Drag the cube to turn it around and look at it. There are buttons to undo one move and to start over, and your result is saved in this browser, so if you come back the same day your record is still there. Once you've solved today's problem, you can keep going with random 3–4 move practice problems. For the solving guide, read from the top down in order and play the example at each step.