Show HN: Interactive Rubik's Cube with sub-puzzles for solution steps | Hacker News Reader

Show HN: Interactive Rubik's Cube with sub-puzzles for solution steps

gregfjohnson.com

51 pointsgregfjohnson23 comments

This is an ongoing JavaScript learning exercise. Tons of fun. I used THREE.js for the 3-d effects. It includes a (really inefficient!) solver.

There are radio buttons that select from among eight sub-problems that progress through levels of difficulty, culminating in the full cube.

The 3-d graphics aspects of the implementation were interesting - I wrote an alternative "change camera position" function that suits the symmetry of the Rubik's cube better than the default one in THREE.js. It was very interesting implementing mouse-based face selection and movement in the presence of a perspective projection.

I added a "Record/Rewind" feature, which is in fact a big hint on the key idea for solving the cube: commutators. (If two top pieces are similarly wrong, fix one of them and record the fix. Then, move the other one to where the first one was, and "rewind" your fix!)

Future ideas: 1 - add a scroll bar so that users can explore solutions one move at a time, and go backward and forward.

2 - add links to a text-based web page with hints and suggestions.

3 - add more intermediate sub-problems, with "scramble" options. I.e., have a sub-problem with only the top face and one corner cubie out of place. Have the "scramble" put that one cubie somewhere else, but leave the rest of the top level in place.

4 - HN: any other fun thoughts, suggestions, or ideas?

thank you for sharing.

I am disturbed by the unusual color scheme. The usual color scheme being this one: https://en.wikipedia.org/wiki/Rubik%27s_Cube#/media/File:Rub... I mean yellow and white being on opposite faces, as well as red/orange, and blue/green.

I'm not sure that's the usual, so much as a common one. I have a Rubik's cube at my desk and the yellow/white are adjacent, as are blue/green. Red and orange are opposite, though. It was probably acquired circa 2000.

Is it an official Rubik's one or some other brand? I've got about 15 of them (Mostly from QiYi and GAN) and all of them have the yellow/white opposite. Of course they're all made within the last 5 years so maybe it changed at some point.

Likely the Japanese color scheme: https://ruwix.com/the-rubiks-cube/japanese-western-color-sch...

This is very cool! Agreed on the color scheme though. Yellow and White are almost always opposites when working with other tools.

Corner Lookahead Drill + some others http://cube.rider.biz/coracle.html

I was thrown off by the color scheme as well. Opposing sides are red/orange, green/blue and yellow/white. Ultimately the colors are meaningless, but it feels off, similar to how opposing sides of dice always add to the same number.

Thanks, I will make that change!

My partner recently brought an dodecahedral puzzle into our home and it comes with instructions in a language I can't read. I'd love to have a "desk calculator" like this to explore the impact of various commutators. Especially now that I'm down to the last 5 corners :|

Otherwise known as a "megaminx" it's solvable using almost the exact same techniques (with small variation) to a regular 3x3 depending on the method used.

Is this another site that only works in Chrome? The radio buttons have no text in Safari, they're just white blobs in a sea of black.

As of now, the radio buttons have no labels. I will fix this! I have tested pretty minimally - just on the platforms I have within arm's reach ;-) This includes Safari on my smartphone and an iPad, and Chrome on Linux and Windows.

this is a strange request, but could you make the cube translucent? I'd really like to see an internal cord/line between the 'solved' position (where it should be) of each color square to its place in the scrambled position (where it actually is) in order to get an idea of how "tangled up" a position is. Who knows, it might even help with solving strategies!

the solving animation is too fast (which can also be a good thing but not always) ... maybe add a slider.

also depending on your idea of fun, this allows for making a rubik's cube of rubiks cubes :^)

I see two problems with the solving animation - it is fast, and also you can't tell what the intermediate goals are. To your point about giving visual hints - I've toyed with the idea of highlighting the cubie that is being moved and the position it is being moved to. (One problem with this is when you are trying to re-orient a cubie that is already in its correct position.) Also, perhaps add pauses to delineate sub-goals. I think the best thing to do would be your slider suggestion, perhaps with markers along the slider indicating waypoints toward the solution. And, of course, make the slider bi-directional so that users can go forward and backward. As far as slider - I'm debating whether to use an HTML native slider, or create a cool custom 3D one using THREE.

I originally meant a slider to control speed but I also like the waypoints idea (a slider in cube state history) .

I'm still curious about the internal lines idea. But I don't understand the Rubik's cube enough. If you label all blue squares as {1,2,3,4,5,6,7,8,9} is their solution configuration unique?

My OS is in dark mode, resulting in a black background. I see eight radio buttons but no text, just a sea of black, a rubix cube, four buttons, and then the eight radio buttons but no text next to them. I tried using my mouse to highlight the area so I could read the text, I also tried ctrl+a and holding down tab, but there's no way to highlight the text to read it.

This is the dark mode setting that I am using: https://support.apple.com/en-us/HT208976

I don't think that's the issue (or at least not the only one). I see the same thing and even though I just switched my MacOS/General Appearance setting to Light instead of Auto I still see all black in Firefox.

(OP) Yikes! I will check that out. Thank you for pointing that out. As of now, the four text buttons should say "Scramble", "Solve", "Record" and "Rewind". I will check with Firefox to see if I get blank buttons with no visible text. The radio buttons have no labels or text associated with them currently. I will add little pictures next to them of the sub-puzzles they select.

I find the controls very confusing. It's hard to guess whether I'm going to make a move or reorient the cube. Usually, it makes a move when I'm trying to reorient the cube.

I think you can drag on the space around the cube to reorient without making a move.

(OP) You're right - left-mousing outside of the cube and moving the mouse around re-orients the cube. Left-mousing a face and dragging across one of the four boundaries of that face will rotate the face in the direction of the boundary you crossed.

I'm wondering if there would be a clean way to communicate the above to the user other than having them experiment and find it on their own.

You could try putting double arrows around the corners and sides. Like these (unicode): ⬌ ⬍ ⤡ ⤢

Could you tell us more about the solver ? where can we find the source code ? how does it works ? thanks.

Reply on news.ycombinator.com