# TwistySim



## Cride5 (Jan 22, 2016)

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 (Jan 22, 2016)

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 (Jan 22, 2016)

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 (Jan 22, 2016)

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 (Jan 23, 2016)

Thanks for all the great feedback. 



Lucas Garron said:


> 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.



Lucas Garron said:


> 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.



1973486 said:


> 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.



1973486 said:


> practically no one uses that color scheme any more.


OK, is this better?



1973486 said:


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


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



AlexMaass said:


> 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.



AlexMaass said:


> 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.



AlexMaass said:


> 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?



AlexMaass said:


> 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.



AlexMaass said:


> 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 (Feb 1, 2016)

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 (Nov 14, 2016)

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


----------



## bcube (Nov 14, 2016)

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 (Dec 1, 2016)

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 (Dec 2, 2016)

Just want to say, that scramble animation is *awesome*.


----------



## rokicki (Dec 6, 2016)

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 (Sep 27, 2018)

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 (Sep 28, 2018)

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 (May 15, 2022)

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


----------



## Cride5 (Jun 11, 2022)

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 (Jul 30, 2022)

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.


----------

