# Vizarto Puzzle Visualisations



## Cride5 (Jan 22, 2016)

I'd like to share some web-based visualisation technology we've been developing.

The system generates 3D SVG visualisations that are interactive and animated.

We've put together a set of WCA twisty puzzles as a showcase of the visualisation toolkit.

Here is a basic demo of static, and interactive versions of the puzzles:
http://starsoftqa.com/twistysim/demo.html

The visualisations may be added to any web-page just by adding a <script> tag
to vizarto.js, and adding a 1-liner that will insert and <svg> image into the page.

The visualisations can be configured, and new puzzles definitions can be added via a JSON object. If folks are interested I'll post more details on how to do that here.


----------



## bcube (Jan 22, 2016)

Wonderful!



Cride5 said:


> The visualisations can be configured, and new puzzles definitions can be added via a JSON object. If folks are interested I'll post more details on how to do that here.



Damn right folks are ;-). Before asking if you could do some instructions for non-technicians (for example see here), I would like to ask:

- in case of using a mouse, how can I turn the slices for example on 4x4x4 (or doing a move "/" on a square-1)?
- would it be possible to make a simulator out of it (see a link above), so that a webmaster would make a starting position and the end user would control a simulator by the control buttons below it?


----------



## StachuK1992 (Jan 22, 2016)

I'm very interested.
Is this available for usage?
Can I help?


----------



## Cride5 (Jan 23, 2016)

bcube said:


> .. do some instructions for non-technicians



For basic usage:

 Include the vizarto.js library in a <script> tag (I recommend uploading a copy, rather than cross-domain link).
 Insert a <script> tag in the document body where you would like the SVG image to be inserted. For a static puzzle visualisation use something like *Vzr.TwistyPuzzle('skewb')();*, and for an interactive puzzle use *Vzr.InteractivePuzzle('skewb')();*

Here is an example of how to apply some important configurations to a puzzle visualisation:

 Change the size: *Vzr.TwistyPuzzle('skewb').size({width:800, height:600})();*
 Apply an alg: *Vzr.TwistyPuzzle('skewb').alg("R U R' U'")();* (NOTE: a space delimiter is needed)
 Scramble:

```
// Create the puzzle object
var puzzle = Vzr.TwistyPuzzle('skewb');
// Apply scramble moves
puzzle.scramble();
 // Render the SVG
puzzle();
```

 Check if solved:

```
if(puzzle.isSolved()){
// do something
}
```

 Rotate the view:

```
var puzzle = Vzr.TwistyPuzzle('skewb');
puzzle.context().transform().yaw(1).pitch(1); // Angles in radians
// Render the SVG
puzzle();
```


To introduce a new puzzle create a JSON puzzle definition object and pass it to the constructor as follows:

```
// Create the definition object
var pzl = {...};
// Create and render the puzzle
Vzr.TwistyPuzzle(pzl)();
```
To demonstrate the format of the puzzle definition, the Skewb definition is provided below:


Spoiler





```
// Puzzle definition for Skewb
var pzl = {};
// Define panel vertices in 3D
pzl.panels = [
	[[-.0, -.5, -.5], [-.5, -.0, -.5], [-.0, +.5, -.5], [+.5, -.0, -.5]],
	[[-.0, -.5, -.5], [-.5, -.0, -.5], [-.5, -.5, -.5]],
	[[-.5, +.0, -.5], [-.0, +.5, -.5], [-.5, +.5, -.5]],
	[[+.0, +.5, -.5], [+.5, +.0, -.5], [+.5, +.5, -.5]],
	[[+.5, -.0, -.5], [+.0, -.5, -.5], [+.5, -.5, -.5]],

	[[-.0, -.5, +.5], [-.5, -.0, +.5], [-.0, +.5, +.5], [+.5, -.0, +.5]],
	[[-.0, -.5, +.5], [-.5, -.0, +.5], [-.5, -.5, +.5]],
	[[-.5, +.0, +.5], [-.0, +.5, +.5], [-.5, +.5, +.5]],
	[[+.0, +.5, +.5], [+.5, +.0, +.5], [+.5, +.5, +.5]],
	[[+.5, -.0, +.5], [+.0, -.5, +.5], [+.5, -.5, +.5]],

	[[+.0, -.5, -.5], [+.5, -.5, -.0], [+.0, -.5, +.5], [-.5, -.5, +.0]],
	[[+.0, -.5, -.5], [+.5, -.5, -.0], [+.5, -.5, -.5]],
	[[+.0, -.5, +.5], [+.5, -.5, +.0], [+.5, -.5, +.5]],
	[[-.0, -.5, -.5], [-.5, -.5, -.0], [-.5, -.5, -.5]],
	[[-.0, -.5, +.5], [-.5, -.5, +.0], [-.5, -.5, +.5]],

	[[+.0, +.5, -.5], [+.5, +.5, -.0], [+.0, +.5, +.5], [-.5, +.5, +.0]],
	[[+.0, +.5, -.5], [+.5, +.5, -.0], [+.5, +.5, -.5]],
	[[+.0, +.5, +.5], [+.5, +.5, +.0], [+.5, +.5, +.5]],
	[[-.0, +.5, -.5], [-.5, +.5, -.0], [-.5, +.5, -.5]],
	[[-.0, +.5, +.5], [-.5, +.5, +.0], [-.5, +.5, +.5]],

	[[+.5, -.0, -.5], [+.5, +.5, -.0], [+.5, -.0, +.5], [+.5, -.5, +.0]],
	[[+.5, -.0, -.5], [+.5, -.5, -.0], [+.5, -.5, -.5]],
	[[+.5, -.5, +.0], [+.5, -.0, +.5], [+.5, -.5, +.5]],
	[[+.5, +.0, +.5], [+.5, +.5, +.0], [+.5, +.5, +.5]],
	[[+.5, +.5, -.0], [+.5, +.0, -.5], [+.5, +.5, -.5]],

	[[-.5, -.0, -.5], [-.5, +.5, -.0], [-.5, -.0, +.5], [-.5, -.5, +.0]],
	[[-.5, -.0, -.5], [-.5, -.5, -.0], [-.5, -.5, -.5]],
	[[-.5, -.5, +.0], [-.5, -.0, +.5], [-.5, -.5, +.5]],
	[[-.5, +.0, +.5], [-.5, +.5, +.0], [-.5, +.5, +.5]],
	[[-.5, +.5, -.0], [-.5, +.0, -.5], [-.5, +.5, -.5]]
];
var pnl = pzl.panels;
// Provide a panel that represents each of the puzzle's faces (this is used to create a plane that is used to detect the solved state)
pzl.faces = {
	U:pnl[0],
	D:pnl[5],
	F:pnl[10],
	B:pnl[15],
	R:pnl[20],
	L:pnl[25]
};
var T = Vzr.MoveType; // Three types are ROTATE (A full rotation around the plane's orthogonal axis), TOUCH (rotation of the panels touching the plane), ABOVE (rotation of the panels on and above the plane)
// Define moves
pzl.moves = {
	'DFL': {plane: [pnl[20][0], pnl[20][3], pnl[25][2], pnl[25][1]], angle:-120, type: T.ABOVE},
	'DFR': {plane: [pnl[0][1], pnl[0][2], pnl[5][3], pnl[5][0]], angle:-120, type: T.ABOVE},
	'DBL': {plane: [pnl[0][3], pnl[0][0], pnl[5][2], pnl[5][1]], angle:-120, type: T.ABOVE},
	'DBR': {plane: [pnl[0][0], pnl[0][1], pnl[5][2], pnl[5][3]], angle:-120, type: T.ABOVE},

	'UFL': {plane: [pnl[5][3], pnl[5][2],  pnl[0][1], pnl[0][0]], angle:-120, type: T.ABOVE},
	'UFR': {plane: [pnl[5][2], pnl[5][1], pnl[0][0], pnl[0][3]], angle:-120, type: T.ABOVE},
	'UBL': {plane: [pnl[5][0], pnl[5][3], pnl[0][2], pnl[0][1]], angle:-120, type: T.ABOVE},
	'UBR': {plane: [pnl[25][1], pnl[25][2], pnl[20][3], pnl[20][0]], angle:-120, type: T.ABOVE},

	'L': {plane: [pnl[20][0], pnl[20][3], pnl[25][2], pnl[25][1]], angle:120, type: T.ABOVE},
	'R': {plane: [pnl[0][0], pnl[0][1], pnl[5][2], pnl[5][3]], angle:120, type: T.ABOVE},
	'D': {plane: [pnl[5][2], pnl[5][1], pnl[0][0], pnl[0][3]], angle:120, type: T.ABOVE},
	'F': {plane: [pnl[5][2], pnl[5][1], pnl[0][0], pnl[0][3]], angle:120, type: T.ABOVE},
	'B': {plane: [pnl[0][3], pnl[0][0], pnl[5][2], pnl[5][1]], angle:120, type: T.ABOVE},
	'U': {plane: [pnl[0][3], pnl[0][0], pnl[5][2], pnl[5][1]], angle:120, type: T.ABOVE},

	'y' : {plane: [pnl[1][2], pnl[2][2], pnl[3][2], pnl[4][2]], angle:90, type: T.ROTATE},
	'z' : {plane: [pnl[16][2], pnl[17][2], pnl[18][2], pnl[19][2]], angle:90, type: T.ROTATE},
	'x' : {plane: [pnl[26][2], pnl[27][2], pnl[28][2], pnl[29][2]], angle:90, type: T.ROTATE},	
};
// Panels to use for mouse-activated moves
pzl.panelMoves = {
	'DFL'   : [13, 1, 26],
	'DFR' : [11, 21, 4],
	'DBL' : [2, 29, 18],
	'DBR' : [24, 16, 3],
	'UFL' : [14, 6, 27],
	'UFR' : [22, 12, 9],
	'UBL' : [7, 28, 19],
	'UBR' : [17, 8, 23],
};
// Key bindings
pzl.keys = {
	'76':'L', // L
	'82':'R', // R
	'85':'U', // U
	'68':'D', // D
	'70':'F', // F
	'66':'B', // B
	'90':'z', // z
	'89':'y', // y
	'88':'x' //x
};
// CSS colours to use
pzl.palette = {
	'y': '#E6D223', // Yellow
	'r': '#7F0000', // Red
	'o': '#DF622D', // Orange
	'b': '#010080', // Blue
	'g': '#008001', // Green
	'w': '#FFFFFF' // White

};
// Colours of each panel
pzl.fc = "yyyyywwwwwbbbbbgggggrrrrrooooo";
// Initial view angle
pzl.rotation = { pitch:30, yaw:45 };
```


----------



## Cride5 (Jan 23, 2016)

bcube said:


> In case of using a mouse, how can I turn the slices for example on 4x4x4 (or doing a move "/" on a square-1)?


The '/' move on sq-1 can be done by clicking the middle of the S-slice on the R-face.
As for slice moves this is not yet possible with the mouse. We may introduce drag gestures to achieve this.



bcube said:


> would it be possible to make a simulator out of it (see a link above), so that a webmaster would make a starting position and the end user would control a simulator by the control buttons below it?


Yes, by using the 'alg' function documented above.



StachuK1992 said:


> Is this available for usage?


 Yes. The library is free for personal/non-commercial use. 



StachuK1992 said:


> Can I help?


 For sure, with suggestions for improvements. Also by creating more puzzle definitions. Currently we have all the WCA puzzles, but we could create a lot more.


----------



## bcube (Jan 25, 2016)

bcube said:


> would it be possible to make a simulator out of it (see a link above), so that a webmaster would make a starting position and the end user would control a simulator by the control buttons below it?





Cride5 said:


> Yes, by using the 'alg' function documented above.



Well, I was rather thinking of buttons (one step forward, one step backward, to the end, pause etc.) which can be pressed by the end user in order to control the solving process of the puzzle. Those buttons are somewhat standard for both java and JS puzzle simulators (not to mention they are extremely useful in terms of written tutorial when using these simulators - that is why I am asking about them)

Thank you for making usage instructions, they work for me


----------



## Cride5 (Feb 1, 2016)

bcube said:


> Well, I was rather thinking of buttons (one step forward, one step backward, to the end, pause etc.) which can be pressed by the end user in order to control the solving process of the puzzle. Those buttons are somewhat standard for both java and JS puzzle simulators (not to mention they are extremely useful in terms of written tutorial when using these simulators - that is why I am asking about them)



A simulator UI built on the Vizarto toolkit is available here. It is being discussed in this thread.


----------



## bcube (Feb 1, 2016)

Cride5 said:


> A simulator UI built on the Vizarto toolkit is available here.



I am sorry, I am not seeing it anywhere. Maybe each of us is talking about different thing. So far I perceive your simulator as Twist-Enabled in AnimCube JS Demo page, while I am asking about buttons which can be seen in Sticker Masking or Algorithm on that linked page.


----------



## bcube (Feb 22, 2016)

Forgive me, Cride5, my impatience, but are those controlling buttons I am asking about planned to do by you/your team? In case not, is any volunteer-programmer willing to make these buttons, please?

I have plenty of "improving" ideas (besides this 1 - 11 list (see second half of that post)) but all are kind of dependent on whether those controlling buttons will be added or not...


----------



## Calode (Mar 5, 2016)

Hey, this seems pretty cool. Would you mind releasing the source code? Would love to check it out.


----------



## bcube (Apr 22, 2016)

bcube said:


> - would it be possible to make a simulator out of it (see a link above), so that a webmaster would make a starting position and the end user would control a simulator by the control buttons below it?



Since there is no equivalent to it (I am aware of) yet, programmers please, don´t let die this project.


----------



## unsolved (Apr 23, 2016)

Cride5 said:


> I'd like to share some web-based visualisation technology we've been developing.
> 
> The system generates 3D SVG visualisations that are interactive and animated.
> 
> ...



It does look awesome! I'd like to link a library of algs I wrote to your rendering engine. That way I can generate some decent diagrams to go with them.


----------



## Cride5 (Jul 27, 2016)

@bcube we have finally completed the algorithm/playback button feature. A basic example of its use can be found on the MirIS tutorial here. And a more advanced example can be found on the ZZ tutorial here.

When I have more time I'll post a detailed API here.


----------



## bcube (Jul 28, 2016)

Thank you for letting me/us know, Cride5. It looks nice.

First impressions (all related to ZZ tutorial link posted above):

1) the page loads very long time especially on mobile phone - could loading be speed up?

2) could the simulator be rotated as the end-user wants it to be? You see, I think beginner cubers would find it useful for a Square-1, for instance. Now it is kind of impossible to be rotated in such a way that the "longer part" of a middle layer would be on the left. I also believe not all beginner cubers are color neutral and they use always the same cube orientation when solving their cubes - that´s why it is so hard for them to solve your puzzles on http://starsoftqa.com/twistysim/ site...

3) the control buttons are hard to be clicked on mobile phone because of their small size - hopefully they will get bigger with a bigger size of the simulator

4) could the control buttons be visible be default? I can imagine it would be more intuitive for the mobile-users

5) could the time-line (AKA progress bar) be clickable? I use 180 move algorithms and it would be a pain for the end-user to display, let´s say, only 90th move...

6) could a move-counter be implemented? Very useful feature in case of a 180 move algorithm (it serves as a communication bridge between me and the end-user).

7) (rather not important ones) could the control button "to the beginning" orient the puzzles to their initial state?; inner surface of cubies is colored too (by more than one color) - could it be uni-colored?


----------



## ruwix (Nov 7, 2016)

The 2x2 cube doesn't respond correctly to clicks. It always makes R/R' no matter which face I'm clicking.
http://html5tools.net/cube3d/


----------



## Cride5 (Nov 12, 2016)

ruwix said:


> The 2x2 cube doesn't respond correctly to clicks. It always makes R/R' no matter which face I'm clicking.
> http://html5tools.net/cube3d/


Hi ruwix, thanks for pointing that out. I've built a new version that has a bunch of improvements, and this fix. It is available here:
http://cube.crider.co.uk/twistysim.html

I'll write up an API when I have time. In the mean time have a look at these pages for some idea of how to use it in tutorials.
http://cube.crider.co.uk/miris.html
http://cube.crider.co.uk/zz.php


----------



## AceZephyr (Nov 23, 2016)

I'm using twistysim for an algorithm visualizer, but on 3x3, M and S moves go in the wrong direction, as in M moves are rendered as M' moves and S moves are rendered as S' moves, according to alg.cubing.net anyway. (E moves are correct though) Is that intentional, or a bug? Thanks


----------



## Cride5 (Dec 1, 2016)

Hi AceZephyr, good spot! This is now fixed in the latest version (v1.5.5). Thanks.


----------



## AceZephyr (Dec 1, 2016)

Cride5 said:


> Hi AceZephyr, good spot! This is now fixed in the latest version (v1.5.5). Thanks.


Thanks a lot!


----------



## bcube (Jan 6, 2017)

Since I am not familiar enough with the parameters defining the puzzles (easy-to-understand manual describing (all) the parameters is missing in my opinion), I was wondering if a current version allows to create a not solved Square-1which could be only rotated by the end-user? If not, is it planned to program such a parameter/feature?

Is it planned to add a movecounter as a parameter? 
Is it planned to allow the end-user to rotate the puzzle as he/she wants?


----------

