Show HN: Rubik's cube variants in different shapes and sizes using canvas 2D API | Hacker News Reader

Show HN: Rubik's cube variants in different shapes and sizes using canvas 2D API

29 pointsaditya_r_m10 comments

demo https://aditya-r-m.github.io/twisty-polyhedra/

article https://medium.com/@adityam.rtm/creating-3d-twisty-puzzles-u...

source https://github.com/aditya-r-m/twisty-polyhedra

View on HN

Sadly, it not work for me.

After click on "play" button nothing happen, look on screenshot[0]

Browser: Pale Moon 28.1.0[1]

[0] http://i.imgur.com/0GYEa9D.png

[1] http://linux.palemoon.org/download/mainline/

I'll look into it, probably will need to run Google closure compiler on the JavaScript code.

I passed the code through Google closure compiler.

Now it should work on your browser, assuming that it supports HTML5 canvas API.

Pretty cool but it'd be nice to have buttons to turn the cube rather than gestures - or at least an option in the settings for it. Love it either way.

Will add this feature in the TODO list :) thanks!

How do you rotate around the vertical axis on the diamond variants?

I think you may be mistaking them for a different type of puzzle with diamond shape & similar look. As far as I know,there are two possible variants of similar looking Octahedron shaped puzzles: 1) Face turning octahedron (the ones I've currently defined in the project) 2) Axis turning octahedron (on which you can twist around axis)

Cool demo! One thing you could do to improve this is use quaternions to handle rotation of the cube. There are some great articles on implementing quaternions out there if you search for them. For example, I noticed when you turn a cube "upside down", the dragging to the left or right (with ctrl pressed) rotates the cube the wrong way. Quaternions are a great way to solve this issue

yes, Quaternions.. thank you! Will do.. :) I was expecting exactly this answer to the third problem I mentioned in that medium article. I've been thinking of studying them for some time now.

Improved it, thank you!

Note that Quaternions didn't fix the issue by themselves. I had to change the interpretation of cursor movements to use axis-angle rotation based orientation.

The fix could be deployed with or without Quaternions.

Reply on news.ycombinator.com