TwistySim

[Cride5]

A puzzle simulator built with the TwistySim puzzle visualisation toolkit (posted in this thread).

cube.crider.co.uk/twistysim/demo.html​

We have a developer with some time assigned to this project, so may be able to implement some feature requests. If you have any suggestions please post them below.

On the current roadmap are:

• A better set of default keyboard bindings (suggestions needed)
• Save keyboard bindings in cookies

 

[Lucas Garron]

SVGis good for static images, but there is a lot of z-fighting. I also suspect you're not transforming the pieces correctly?

In any case, Heise bindings with Kirjava's modification is pretty excellent. My code is here.

 

[1973486]

The Square 1 sim seems to do a z2 sometimes when scrambling, and practically no one uses that color scheme any more.

EDIT: And rotations start the timer... Is this common for sims?

 

[AlexMaass]

seems nice, but a ton of issues, how do you do a move in the opposite direction with mouse, theres no slice moves for mouse controls it seems

also regarding the key binding notation, the pyraminx notation in the controls should be in the format of [R] or [R'], which means instead of doing a regular R move (or L, U, B) the whole puzzle is moved a R turn, also skewb notation, I'd say rubikskewb notation is the way to go

the skewb mouse controls I don't like as well, tedious to explain, i could do it later : p

color scheme customization would be a big plus, also customization of the animation, like being able to set the animation speed (0 speed means no animation it just instantly does a turn)

its nice to see a sim for all wca puzzles though, hopefully this can be improved a ton

 

[Cride5]

Thanks for all the great feedback.

SVG is good for static images, but there is a lot of z-fighting.

This isn't to do with SVG per-se, it occurs because no z-order calculations occur during the 'transitions'. Transitions are used to animate moves, rotations and scrambles. If you use your mouse to change the view angle you will see the puzzle move with z-order being re-calculated. Using SVG (instead of a raster based technology such as Canvas or WebGL) makes it easer to make the visualisations interactive since event handlers can be attached to the DOM elements. I agree it does have its limitations however. It is less suited to visualisations with large numbers of elements (eg the 17x17), and for things like shading and textures.

Heise bindings with Kirjava's modification is pretty excellent. My code is here.

Thanks for those - I'll change these to the defaults for the cubes. I'll attempt to create analogues of these for the other puzzles, but if anyone knows of specific bindings for the other puzzles please share.

The Square 1 sim seems to do a z2 sometimes when scrambling

This is because the 'L' move is included. I'll remove 'L' from the set of moves. This will also resolve issues with detecting the solved state after the puzzle has been rotated with L and R.

practically no one uses that color scheme any more.

OK, is this better?

And rotations start the timer... Is this common for sims?

No, this is silly - rotations are needed for inspection. Will fix.

how do you do a move in the opposite direction with mouse

Hold Ctrl. This is not touch friendly I know. I would like to introduce drag gestures for touch devices. In the mean-time only the keyboard will be able to provide full functionality.

the pyraminx notation in the controls should be in the format of [R] or [R'], which means instead of doing a regular R move (or L, U, B) the whole puzzle is moved a R turn

Will change to the WCA notation, so U, L, R, B for wide turns and u, l, r, b for vertex turns.

also skewb notation, I'd say rubikskewb notation is the way to go

Again, I think its best to stick to WCA here, so will use R, L, U, B, but also include the non-standard r, l, u, b for the remaining corners. Does this sound reasonable?

color scheme customization would be a big plus

This can be done in code, but would be nice as an interface control, will add to roadmap.

also customization of the animation, like being able to set the animation speed (0 speed means no animation it just instantly does a turn)

Again, added to roadmap.

 

[Cride5]

A new version has been released with most of the issues mentioned fixed.

Remaining issues:
* Save custom key bindings in cookie.
* Customisation of colour scheme (also saved in cookie).
* Customisation of animation speed.
* Better touch/mouse control via drag gestures.

 

[Cride5]

Latest version of the TwistySim API, along with documentation/examples has been posted here:
http://cube.crider.co.uk/twistysim.html

 

[bcube]

Except for earlier mentioned things which would be nice (in my opinion; some of them are already implemented), here are another points (all refer to InteractivePuzzle option):

- for programmer greenhorns, could a list of classes (and their options) which can be used be put somewhere? Also, can you explain anywhere what does "('#ip2')" or "('#ap3')" mean?

- on mobile device I can see displayed moves (i.e. letters) under "Toggle other features" (among others), however, on FF on desktop I see only blank squares (if I highlight them using a mouse cursor, they will become visible)

- for ModalPuzzle option, that Skewb can´t be closed through Esc key, while that Square-1 can. Could both puzzles be closed by Esc button?

- for ModalPuzzle on mobile device, there are displayed no buttons above and below the puzzle, only the puzzle itself

- those grayish blocks with texts seem to be too narrow for all the informations included in them. As a result, one cannot read the whole instructions / tutorial.

P.S. As ruwix pointed out, the 2x2x2 cube on http://starsoftqa.com/twistysim/ doesn´t turn properly (however, it did in the past because I was solving it (and even if I am able to solve a computer 2x2x2 in less than 15 seconds, I needed more than 2 minutes because I couldn´t rotate the puzzle the way I wanted to)).

P.S.2 For some reason, when I solved the Pyraminx on http://starsoftqa.com/twistysim, the timer didn´t stop.

 

[Cride5]

Hi bcube, most of the issues you've mentioned above are now fixed. Get the latest version at cube.crider.co.uk/twistysim/demo.html

 

[mDiPalma]

Just want to say, that scramble animation is awesome.

 

[rokicki]

Is it possible to make it so clicking on the right half of a face does a clockwise turn,
and clicking on the left half of the face does a counter-clockwise turn? That may
work better than drags on a mobile device as well.

 

[regispicanco]

Hi Cride5, congratulations for this wonderful puzzle simulator.

I would like to create other puzzles that I have, like Okar Redi Cube, Crazy Cube 3x3, Crazy Cube 4x4, Crazy Megaminx, and others.
I understood how to create the panels and the faces, so I could create the 3 model of those puzzles.
But I did not understand how to define Moves and PanelMoves.
Could you please share some tips about those puzzles' properties?

I am not a java coder, but I know a bit of coding.

 

[regispicanco]

Hi Cride5,

I think I finally understood the MOVES and PANEL MOVES of a model, but I think the example of the SKEWB cube has a problem.
I did a lot of tests and the skewb did not worked.

I just copied the example to a file called skewb2.js and I renamed all the "SKEWB" to "SKEWB2" in the file.

A tried to create a Skewb2 cube, but it did not rendered. Only a single white square was rendered.

I started commenting the code to see what part was causing the problem. So I found that the problem was occurring because of the TTk.Puzzle.SKEWB2.moves.

If I comment this part, the skewb is rendered normally.

I think the problem is in the parameter TYPE: T.ABOVE. If I suppress this parameter, the cube is rendered.

Example of the original code that did not work (copied from http://cube.crider.co.uk/twistysim.html )
'L': {plane: [pnl[20][0], pnl[20][3], pnl[25][2], pnl[25][1]], angle:-120, type: T.ABOVE},

Example of the code without TYPE parameter that worked (rendered), but does not rotate....
'L': {plane: [pnl[20][0], pnl[20][3], pnl[25][2], pnl[25][1]], angle:-120, angle:120},

I tried other things like using quotes or double quotes, but nothing worked.

Other atempts that does not work:
'L': {plane: [pnl[20][0], pnl[20][3], pnl[25][2], pnl[25][1]], angle:-120, type: "T.ABOVE"},
'L': {plane: [pnl[20][0], pnl[20][3], pnl[25][2], pnl[25][1]], angle:-120, type: 'T.ABOVE'},
'L': {plane: [pnl[20][0], pnl[20][3], pnl[25][2], pnl[25][1]], angle:-120, type: T.above},
'L': {plane: [pnl[20][0], pnl[20][3], pnl[25][2], pnl[25][1]], angle:-120, (type: T.ABOVE)},

 

[a_cuber04]

How do I use TwistySim and embed it into a website’s html code? I just can’t seem to figure it out.

 

[Cride5]

Hi a_cuber, I've added a more complete example on the API page here: http://cube.rider.biz/twistysim.html
Hope it helps.

 

[a_cuber04]

How do I use TwistySim, and how do I embed it in HTML code so that it shows up correctly? I just can’t seem to figure it out.