• Welcome to SpeedSolving.com — the world’s largest puzzle community!

    You’re currently browsing as a guest, which means you have limited access to discussions, resources, member profiles, and community features.

    Join 50,000+ cubers and puzzle enthusiasts from around the world to ask questions, share solves, improve faster, and be part of the community.

    Registration is free, fast, and easy — create your account today.

    Already a member? Log in here to hide this message and start participating.

Vizarto Puzzle Visualisations

Cride5

Cride5

Premium Member
Joined
Jan 27, 2009
Messages
1,229
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.
 
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.
Click to expand...

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:
bcube said:
.. do some instructions for non-technicians
Click to expand...

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 };
 
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)?
Click to expand...
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?
Click to expand...
Yes, by using the 'alg' function documented above.

StachuK1992 said:
Is this available for usage?
Click to expand...
Yes. The library is free for personal/non-commercial use.

StachuK1992 said:
Can I help?
Click to expand...
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 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?
Click to expand...

Cride5 said:
Yes, by using the 'alg' function documented above.
Click to expand...

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 :-)
 
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)
Click to expand...

A simulator UI built on the Vizarto toolkit is available here. It is being discussed in this thread.
 
Cride5 said:
A simulator UI built on the Vizarto toolkit is available here.
Click to expand...

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.
 
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 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?
Click to expand...

Since there is no equivalent to it (I am aware of) yet, programmers please, don´t let die this project.
 
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.

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.
Click to expand...

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.
 
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 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/
Click to expand...
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:
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
 
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?
 
You must log in or register to reply here.

Similar threads

Puzzle Maniac
4-Pad Results Thread
Replies
3
Views
280
acrystal
acrystal
Puzzle Maniac
[OcR] Andrew Feng 34.53 5x5 Single
Replies
11
Views
503
Puzzle Maniac
Puzzle Maniac
C
Cubelelo Daily Calendar Puzzle - September solutions now up
Replies
1
Views
189
abunickabhi
abunickabhi
Puzzle Maniac
Corner twist algorithm on alg.cubing.net
Replies
11
Views
651
Renslay
Renslay
Puzzle Maniac
[OcR] Max Parris 1.78 Tied Skewb Average
Replies
4
Views
446
abunickabhi
abunickabhi
Back
Top