Comment by gregfjohnson | Hacker News Reader

Comment by gregfjohnson | Hacker News Reader

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!

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.

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.

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?

Reply on news.ycombinator.com