• Welcome to the Speedsolving.com, home of the web's largest puzzle community!
    You are currently viewing our forum as a guest which gives you limited access to join discussions and access our other features.

    Registration is fast, simple and absolutely free so please, join our community of 40,000+ people from around the world today!

    If you are already a member, simply login to hide this message and begin participating in the community!

Vizarto Puzzle Visualisations

Cride5

Premium Member
Joined
Jan 27, 2009
Messages
1,228
Location
Scotland
WCA
2009RIDE01
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

Member
Joined
Sep 8, 2010
Messages
336
Wonderful!

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?
 
Last edited:

Cride5

Premium Member
Joined
Jan 27, 2009
Messages
1,228
Location
Scotland
WCA
2009RIDE01
.. do some instructions for non-technicians

For basic usage:
  1. Include the vizarto.js library in a <script> tag (I recommend uploading a copy, rather than cross-domain link).
  2. 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:
    Code:
    // Create the puzzle object
    var puzzle = Vzr.TwistyPuzzle('skewb');
    // Apply scramble moves
    puzzle.scramble();
     // Render the SVG
    puzzle();
  • Check if solved:
    Code:
    if(puzzle.isSolved()){
    // do something
    }
  • Rotate the view:
    Code:
    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:
Code:
// 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:
Code:
// 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

Premium Member
Joined
Jan 27, 2009
Messages
1,228
Location
Scotland
WCA
2009RIDE01
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.

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.

Is this available for usage?
Yes. The library is free for personal/non-commercial use.

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.
 
Last edited:

bcube

Member
Joined
Sep 8, 2010
Messages
336
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

Premium Member
Joined
Jan 27, 2009
Messages
1,228
Location
Scotland
WCA
2009RIDE01
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

Member
Joined
Sep 8, 2010
Messages
336
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

Member
Joined
Sep 8, 2010
Messages
336
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...
 

bcube

Member
Joined
Sep 8, 2010
Messages
336
- 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

Member
Joined
Mar 2, 2014
Messages
566
Location
Doylestown, PA
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.

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.
 

bcube

Member
Joined
Sep 8, 2010
Messages
336
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?
 

Cride5

Premium Member
Joined
Jan 27, 2009
Messages
1,228
Location
Scotland
WCA
2009RIDE01
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
 
Last edited:

AceZephyr

Member
Joined
Jun 25, 2016
Messages
2
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
 

bcube

Member
Joined
Sep 8, 2010
Messages
336
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?
 
Top