• 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!

Embed algs and solves using Twizzle

Lucas Garron

Administrator
Joined
Jul 6, 2007
Messages
3,718
Location
California
WCA
2006GARR01
YouTube
Visit Channel
I'm excited to announce that you can now to embed algs and solves supported by Twizzle!
I've working on the functionality with @rokicki and iterating with @pjk on making this as useful as possible, and we hope you'll be able to use it to share a wide variety of algs and solves on the forum this way.

There are 3 ways to use this:
Code:
1. BBCode [alg] tag:     [alg=OLL]R U R' U R U2' R'[/alg]
2. BBCode [twizzle] tag: [twizzle=megaminx]R U R' U R U2' R'[/twizzle]
3. Twizzle URL:          https://alpha.twizzle.net/edit/?alg=R2+U2%27+R2%27+U%27+R2+U2%27+R2%27&puzzle=megaminx&stickering=PLL&title=Megaminx+PLL+Example&setup-anchor=end
Here are more usage details and examples:



How to Use Twizzle embeds

1. If you are sharing a 3x3x3 alg, you can use the alg BBCode tag and specify a "stickering" to highlight or dim cubies for various common speedsolving stages:

MethodAvailable stickerings
CFOPOLL, PLL, LL, EOLL, COLL, OCLL, CLL, ELL, ZBLL
LSLS, ELS, CLS, ZBLS, VLS, WVLS
F2LF2L, Daisy, Cross
ZZEO, EOline, EOcross
RouxCMLL, L10P, L6E, L6EO
Petrus2x2x2, 2x2x3
Code:
[alg=OLL]R U R' U R U2' R'[/alg]
 Twizzle link 
 Title OLL Alg
 Moves 
R U R' U R U2' R'


2. You can write an alg inside the twizzle BBCode tag for other puzzles. This cannot support other parameters, but it provides an easy way to show the effect of an alg on the solved state for the following puzzles:

Cubes:2x2x2, 3x3x3, 4x4x4, 5x5x5, 6x6x6, 7x7x7
Other WCA puzzles:clock, megaminx, pyraminx, skewb, square1
Unofficial puzzles:gigaminx, fto, master_tetraminx, kilominx, redi_cube, melindas2x2x2x2
Code:
[twizzle=megaminx]R U R' U R U2' R'[/twizzle]
 Twizzle link 
R U R' U R U2' R'


3. For more general functionality, you can paste any URL from https://alpha.twizzle.net/edit/ or https://alpha.twizzle.net/explore/ and it will automatically be converted into the twizzle BBCode tag. This allows you to separately specify:
  • The puzzle.
  • A speedsolving stage stickering (e.g. OLL, PLL, CLS, etc.)
  • Setup moves (e.g. a scramble).
  • Whether the setup state is "anchored" at the start (e.g. for a solve or pretty pattern) or at the end (e.g. for an alg).
Code:
Paste this:

https://alpha.twizzle.net/edit/?alg=R2+U2%27+R2%27+U%27+R2+U2%27+R2%27&puzzle=megaminx&stickering=PLL&title=Megaminx+PLL+Example&setup-anchor=end

... and it becomes:

[twizzle]https://alpha.twizzle.net/edit/?alg=R2+U2%27+R2%27+U%27+R2+U2%27+R2%27&puzzle=megaminx&stickering=PLL&title=Megaminx+PLL+Example&setup-anchor=end[/twizzle]
 Twizzle link 
 Title Megaminx PLL Example
 Moves 
R2 U2' R2' U' R2 U2' R2'




Additional Examples

Speedsolve reconstruction:
Code:
https://alpha.twizzle.net/edit/?alg=y%27+L%27+D%27+U%27+R+%2F%2F+Double+X-Cross+%0Ay+U%27+L%27+U+L+%2F%2F+Slot+3+%0AR+U+R%27+%2F%2F+ELS+%0AU2+%5BR%27+D%27+R%3A+U%5D+%2F%2F+CLS+%0AU%27+M2%27+U%27+M2%27+U2%27+M2%27+U%27+M2%27+%2F%2F+PLL&setup-alg=L+F+L2+U%27+L+U2+D%27+L+U2+D2+R%27+F2+D2+B2+L2+D2+F2+R+B&title=Lucas+Garron%2C+4.88s+PB%0AOctober+20%2C+2020
 Twizzle link 
 Title Lucas Garron, 4.88s PB
October 20, 2020
 Setup 
L F L2 U' L U2 D' L U2 D2 R' F2 D2 B2 L2 D2 F2 R B
 Moves 
y' L' D' U' R // Double X-Cross 
y U' L' U L // Slot 3 
R U R' // ELS 
U2 [R' D' R: U] // CLS 
U' M2' U' M2' U2' M2' U' M2' // PLL


FMC solution using caret NISS notation:
Code:
https://alpha.twizzle.net/edit/?alg=F+D%27+%2F%2F+2x2+Square%0A%5E%28F%27+D+B+F2+L%27%29+%2F%2F+2x2x3%0AB+U%27+B+%2F%2F+EO%0A%5E%28U%27+B2%29+%2F%2F+2x2+Square%0A%5E%28L+U+L%27+U+B2+U%29+%2F%2F+Finish&setup-alg=R%27+U%27+F+U2+B+D2+B+F2+R2+F+D2+B+D%27+B+U+F2+D%27+R%27+F2+U2+R%27+F%27+R%27+U%27+F&title=Cale+Schoon%0ANorth+Star+Cubing+Challenge+2020%0A3x3x3+Fewest+Moves%2C+Solve+%232
 Twizzle link 
 Title Cale Schoon
North Star Cubing Challenge 2020
3x3x3 Fewest Moves, Solve #2
 Setup 
R' U' F U2 B D2 B F2 R2 F D2 B D' B U F2 D' R' F2 U2 R' F' R' U' F
 Moves 
F D' // 2x2 Square
^(F' D B F2 L') // 2x2x3
B U' B // EO
^(U' B2) // 2x2 Square
^(L U L' U B2 U) // Finish


4x4x4 OLL:
Code:
https://alpha.twizzle.net/edit/?puzzle=4x4x4&title=lucasparity&stickering=OLL&alg=r+U2+x+r+U2+r+U2%0Ar%27+U2+l+U2+r%27+U2%0Ar+U2%27+r%27+U2+r%27
 Twizzle link 
 Title lucasparity
 Moves 
r U2 x r U2 r U2
r' U2 l U2 r' U2
r U2' r' U2 r'



FTO:
Code:
https://alpha.twizzle.net/edit/?puzzle=fto&alg=%5BRv%3A+R%27+U+R%27+D%27+R+U%27+R%27+D+R%27%5D&title=FTO+Commutator+Example
 Twizzle link 
 Title FTO Commutator Example
 Moves 
[Rv: R' U R' D' R U' R' D R']


Gigaminx pretty pattern:
Code:
https://alpha.twizzle.net/edit/?puzzle=gigaminx&title=Gigaminx+Extended+Superflip%0Aby+Per+Kristen+Fredlund&alg=BL2+B2%27+DL2%27+B%27+BL%27+B%27+DL2%27+BL2+B%27+BL2%27+B2+BL+DL2+B%27+DL+BL+B%27+BL2+DR2+U%27+%28F2+FR2%27+D2+FR+L2%27+1-4BR+1-4R2%27+U%295+F2+FR2%27+D2+FR+L2%27+1-4BR+1-4R2%27+U2+2DR2+u2%27+1-3R2+1-3BR%27+l2+fr%27+d2%27+fr2+f2%27+%28u%27+1-3R2+1-3BR%27+l2+fr%27+d2%27+fr2+f2%27%295+u+dr2%27+bl2%27+b+bl%27+dl%27+b+dl2%27+bl%27+b2%27+bl2+b+bl2%27+dl2+b+bl+b+dl2+b2+bl2%27
 Twizzle link 
 Title Gigaminx Extended Superflip
by Per Kristen Fredlund
 Moves 
BL2 B2' DL2' B' BL' B' DL2' BL2 B' BL2' B2 BL DL2 B' DL BL B' BL2 DR2 U' (F2 FR2' D2 FR L2' 1-4BR 1-4R2' U)5 F2 FR2' D2 FR L2' 1-4BR 1-4R2' U2 2DR2 u2' 1-3R2 1-3BR' l2 fr' d2' fr2 f2' (u' 1-3R2 1-3BR' l2 fr' d2' fr2 f2')5 u dr2' bl2' b bl' dl' b dl2' bl' b2' bl2 b bl2' dl2 b bl b dl2 b2 bl2'


Pyraminx Crystal, one of many puzzles supported by Twizzle Explorer:
Code:
https://alpha.twizzle.net/explore/?puzzle=pyraminx+crystal&alg=%28%5BR%2C+L%5D+y%2915&title=Pyraminx%20Crystal%20Example
 Twizzle link 
 Title Pyraminx Crystal Example
 Moves 
([R, L] y)15


A puzzle specified using custom puzzle geometry, as implemented by @rokicki:
Code:
https://alpha.twizzle.net/explore/?puzzle-description=d+v+0+e+0&alg=%28UF+UFR%27+UF+UFR%27+UF+UFR%27+UF+UFR%27+UF+UFR%27+UF+UFR%27+UF+UFR+UF+UFR+UF+UFR%27+UF+UFR%27+UF+UFR+UF+UFR+UF+UFR+UF+UFR%27+UF+UFR%27+UF+UFR+UF+UFR%27+UF+UFR%27+UF+UFR%27+UF+UFR%27+UF+UFR%27+UF+UFR+UF+UFR%27+UF+UFR+UF+UFR%27+UF+UFR+UF+UFR+UF+UFR%29210
 Twizzle link 
(UF UFR' UF UFR' UF UFR' UF UFR' UF UFR' UF UFR' UF UFR UF UFR UF UFR' UF UFR' UF UFR UF UFR UF UFR UF UFR' UF UFR' UF UFR UF UFR' UF UFR' UF UFR' UF UFR' UF UFR' UF UFR UF UFR' UF UFR UF UFR' UF UFR UF UFR UF UFR)210


We hope you will find these features useful for sharing algs and solves throughout the forum! 😃
@rokicki and I are still actively working on Twizzle, so this is only the beginning. Please let us know when it works well, and when it could use additional functionality.
 
Last edited:

OldSwiss

Member
Joined
Oct 10, 2022
Messages
361
Location
Switzerland
Really cool. I think I will use that in the future
:cool:👍

I'm just testing some pyraminx algs and what I miss a little bit is a view from the top.
Most Pyraminx pages use that in alg sheets and the view from the front is a litte unfamiliar for me.
Do you think you could add that?
 

Lucas Garron

Administrator
Joined
Jul 6, 2007
Messages
3,718
Location
California
WCA
2006GARR01
YouTube
Visit Channel
Really cool. I think I will use that in the future
:cool:👍

I'm just testing some pyraminx algs and what I miss a little bit is a view from the top.
Most Pyraminx pages use that in alg sheets and the view from the front is a litte unfamiliar for me.
Do you think you could add that?
I assume this is because Pyraminx algs are usually for L4E? Do you have example links?

Also, do you think the *entire* animation should keep a top-down view or just the initial view? It's easy to do the entire animation in 2D, but I don't think that's what most people would want: https://codepen.io/lgarron/pen/BaVXMNN
I've experimented with a hybrid that starts top-down for 3x3x3 LL, and then switches to 3D once you start animating, which I could also try to apply to Pyraminx.
 

OldSwiss

Member
Joined
Oct 10, 2022
Messages
361
Location
Switzerland
Here is an alg Sheet I use

You are right. The algs are mostly for L4E and there the bottom layer is not very interesting.

The 2D view looks cool but if you dont see the pieces move, it's hard to understand.
Maybe something like the FTO Example above.
Probably it's already enough to let the user turn the puzzle a little more. In the moment, if i try to change the view it blocks at some point and I can't turn it further.

This is from the front but the similiar view from the top would be optimal for me.
Maybe with markers to see the downside
1671177029798.png
 

Lucas Garron

Administrator
Joined
Jul 6, 2007
Messages
3,718
Location
California
WCA
2006GARR01
YouTube
Visit Channel
How do i make the white side a part of F2l? I’m trying to get some screenshots of F2l cases and when I use the F2l colors, it puts yellow on the bottom
Right now, stickering is still pretty basic — if you specify a stage like F2L or PLL, it will use the default WCA color scheme & orientation.

I know that some people prefer different orientations from that — e.g. PLL on the yellow face — but this is surprisingly complicated because it's related to several concepts: solving stages, masks (dim/bright/ignored stickers), color substitutions and swaps (e.g. purple for orange), completely different color schemes, reorientation *before* setting up a case on the puzzle, reorientation *after* setting up case on the puzzle, and whether any of these can be safely translated into someone's personal preference (i.e. I want to see purple where orange would be) vs. whether they should consistent across everyone who sees them (e.g. when talking about a video with concrete colors), how to make this all accessible to people with color blindness and vision impairments, and how to present everyone with a way to configure these things in a general-purpose tool like Twizzle... without having 3-4 configuration options that all kind of do the same thing.

I have some ideas on how to support this eventually, but I don't want to promise a timeline on how soon that will be possible. However, it helps to hear requests like yours with use cases, so we know what to prioritize!

(Also, if you just want a set of screenshots for a project, I can probably help you more directly. Feel free to DM me!)
 

Caden Fisher

Member
Joined
Feb 3, 2022
Messages
529
Location
Montana
WCA
2022FISH12
YouTube
Visit Channel
Yep
Right now, stickering is still pretty basic — if you specify a stage like F2L or PLL, it will use the default WCA color scheme & orientation.

I know that some people prefer different orientations from that — e.g. PLL on the yellow face — but this is surprisingly complicated because it's related to several concepts: solving stages, masks (dim/bright/ignored stickers), color substitutions and swaps (e.g. purple for orange), completely different color schemes, reorientation *before* setting up a case on the puzzle, reorientation *after* setting up case on the puzzle, and whether any of these can be safely translated into someone's personal preference (i.e. I want to see purple where orange would be) vs. whether they should consistent across everyone who sees them (e.g. when talking about a video with concrete colors), how to make this all accessible to people with color blindness and vision impairments, and how to present everyone with a way to configure these things in a general-purpose tool like Twizzle... without having 3-4 configuration options that all kind of do the same thing.

I have some ideas on how to support this eventually, but I don't want to promise a timeline on how soon that will be possible. However, it helps to hear requests like yours with use cases, so we know what to prioritize!

(Also, if you just want a set of screenshots for a project, I can probably help you more directly. Feel free to DM me!)
Ok no problem. Twizzle is still awesome! I’m just taking a couple of screenshots for a YT vid that I’m making.
 

Lucas Garron

Administrator
Joined
Jul 6, 2007
Messages
3,718
Location
California
WCA
2006GARR01
YouTube
Visit Channel
I tried putting inside a spoiler tag but it says "twizzle link" and the alg below

I'll try to reproduce the error later

I put a caption on the spoiler and there was like 4 or 5 twizzle urls on the post.
Then I took it off the spoilers and it worked

Hmm, yeah, I just tried putting a whole bunch of Twizzle URLs inside a spoiler (with and without a spoiler summary caption), and I'm not able to observe any issues. Happy to take a look at a repro case!
 

kroko

Member
Joined
Jan 9, 2023
Messages
7
Location
Toulon, France
Hi,
Is there a way to programmatically use Twizzle?
My goal is to populate an alg sheet in Excel with lots of algs (and the corresponding image case)
Currently I use http://cube.rider.biz/visualcube.php for my 2x2 and 3x3 alg sheets.

It is great because you give input parameters in the URL and you get an image in the end. Alas, it is limited to NxNxN cubes.
I didn't find a way to do something similar with Twizzle or cubing.js, which could extend my (automatic) alg sheets to the other platonic solids.
Is it possible?
 

Lucas Garron

Administrator
Joined
Jul 6, 2007
Messages
3,718
Location
California
WCA
2006GARR01
YouTube
Visit Channel
Hi,
Is there a way to programmatically use Twizzle?
My goal is to populate an alg sheet in Excel with lots of algs (and the corresponding image case)
Currently I use http://cube.rider.biz/visualcube.php for my 2x2 and 3x3 alg sheets.

It is great because you give input parameters in the URL and you get an image in the end. Alas, it is limited to NxNxN cubes.
I didn't find a way to do something similar with Twizzle or cubing.js, which could extend my (automatic) alg sheets to the other platonic solids.
Is it possible?
The answer is yes, but probably not directly in Excel. `cubing.js` is designed to render puzzles on websites directly using browser APIs, which can be faster and more efficient than downloading a whole bunch of images.

https://js.cubing.net/cubing/twisty/ shows how to use the player on any web page, and https://experiments.cubing.net/cubing.js/ has some demos.

If you want images to embed in a spreadsheet, the simplest might be to use a tool like https://experiments.cubing.net/cubing.js/multi-alg/?stickering=PLL&puzzle=3x3x3 to download images in bulk.
 
Last edited:

bcube

Member
Joined
Sep 8, 2010
Messages
336
Hi,
My goal is to populate an alg sheet in Excel with lots of algs (and the corresponding image case)
Currently I use http://cube.rider.biz/visualcube.php for my 2x2 and 3x3 alg sheets.

It is great because you give input parameters in the URL and you get an image in the end. Alas, it is limited to NxNxN cubes.
I didn't find a way to do something similar with Twizzle or cubing.js, which could extend my (automatic) alg sheets to the other platonic solids.

Hi kroko,

would PuzzleGen work for you?
 

kroko

Member
Joined
Jan 9, 2023
Messages
7
Location
Toulon, France
The answer is yes, but probably not directly in Excel. `cubing.js` is designed to render puzzles on websites directly using browser APIs, which can be faster and more efficient than downloading a whole bunch of images.

https://js.cubing.net/cubing/twisty/ shows how to use the player on any web page, and https://experiments.cubing.net/cubing.js/ has some demos.

If you want images to embed in a spreadsheet, the simplest might be to use a tool like https://experiments.cubing.net/cubing.js/multi-alg/?stickering=PLL&puzzle=3x3x3 to download images in bulk.
Bulk downloading is not ideal for me because it would need handmade copy-paste actions after that for each case. Which is tedious and error prone.
My alg sheets are completely automatic : I put algs in a column (with parameters if needed on the same line), I run my macro and it populates another column with the pic for each case.
I have seen other people do the same in google sheets.

I already tried cubing.js with no much success, I managed to install it but I am stuck with how to use it beyond easy cases that you describe.
I am a total newbie in javascript or HTML and prefer regular scripts (powershell, vba) or good old coding (C#, java) even though I did not do coding for at least 5 years.
If I find a way to wrap a function that gets an alg in input and gives an image as output, I think I will be on my way.

I will try some more to make it work.
Anyway, thanks for the tip (your link looks promising).
And a huge thank you for Twizzle and all the hard work you have put in it (coding, site, YouTube videos), that's very useful.
 

kroko

Member
Joined
Jan 9, 2023
Messages
7
Location
Toulon, France
Hi kroko,

would PuzzleGen work for you?

Thanks for your help.
I came upon PuzzleGen during my quest for a more versatile "visualcube".

Pros (for my usage) :
  • nice images, no fuss, it is really what I am looking for in my alg sheets
  • more cubes than visualcube
Cons :
  • limited number of cubes (compared to Twizzle's seemingly limitless list)
  • needs Linux or WSL (and I didn't practice Linux for a while so that would mean hassle in my case)
So I discarded it and tried Twizzle/cubing.js instead, in hope to succeed and have a more versatile solution that would work for kilominx and weird cubes I might buy in the future.
That does not mean I will not try it later
 
Last edited:

Lucas Garron

Administrator
Joined
Jul 6, 2007
Messages
3,718
Location
California
WCA
2006GARR01
YouTube
Visit Channel
Small new feature: The "Moves" field now includes move count.

Initially supported are:
  • All puzzles: ETM — "Execution Turn Metric" (every written move counts as 1 turn)
  • 3x3x3 only:
    • OBTM — "Outer Block Turn Metric" (used by the WCA, a generalization of HTM)
    • RBRM — "Range Block Turn Metric" (a generalization of STM where an arbitrarily wide range of slices can be turned as a block, e.g. 2-4r)
You can also hover over any of the three move counts to view a description.

Screenshot 2023-01-31 at 17.06.15.png
 
Last edited:
Top