Introducing Twizzle (alpha)

[BenChristman1]

How do you notate 3 pins up on clock (when solving the corners)? I’ve seen it notated using lowercase letters (ur1+ representing the UR pin down and the UL, DL, DR pins up, then using one of the dials that isn’t the UR dial), but this doesn’t seem to be the case on Twizzle.

 

[THE_V01DL0RD]

There's a bug. I can't record it, but when the 3x3 is scrambled it can sometimes mirror itslef randomly.

 

[erictom333]

When I rotate the puzzle (happens on any puzzle) all the way around, it sometimes jumps around by 180 degrees; this is likely a bug in the code determining rotation, possibly rotating the puzzle to -180° above 360° instead of 0°. I presume @THE_V01DL0RD's report is the same issue.

 

[THE_V01DL0RD]

When I rotate the puzzle (happens on any puzzle) all the way around, it sometimes jumps around by 180 degrees; this is likely a bug in the code determining rotation, possibly rotating the puzzle to -180° above 360° instead of 0°. I presume @THE_V01DL0RD's report is the same issue.

Yes. I am baad at describing things.

 

[erictom333]

Also the color scheme for icosahedra is bad; many of the colors are similar, and there are too many greens and blues. Here's my personal color scheme for icosahedra:

White should go on the bottom.

 

[Lucas Garron]

The Twizzle alg editor now supports two features when pasting:

1. If you paste an alg containing smart closing quotes (’), they are rewritten to "prime" apostrophes ('). This allows pasting from other websites that automatically change quotes[^1].
2. If you paste an alg between two moves, Twizzle will try to add extra spaces around it in order to keep the resulting alg valid.

I've tried to make this as robust as possible, but please let me know if you run into any issues.

[^1]: Tip: If you have a website that has an <input> field or <textarea> for algs, you can avoid automatic smart quotes by specifying spellcheck="false". (Twizzle has always done this.)

 

[Lucas Garron]

Apologies, I forgot to post replies to some earlier questions.

How do you notate 3 pins up on clock (when solving the corners)? I’ve seen it notated using lowercase letters (ur1+ representing the UR pin down and the UL, DL, DR pins up, then using one of the dials that isn’t the UR dial), but this doesn’t seem to be the case on Twizzle.

This is supported as of June using experimental notation: https://www.speedsolving.com/threads/embed-algs-and-solves-using-twizzle.88543/page-2#post-1547160

 Twizzle link 

 Title 

Clock notation demo (2023-06-26)

 Moves 

// Adjacent 2-pin
U1+ R1+ D1+ L1+
BU1+ BR1+ BD1+ BL1+

// 1-pin
UL1+ UR1+ DR1+ DL1+
BUL1+ BUR1+ BDR1+ BDL1+

// 3-pin
ULw1+ URw1+ DRw1+ DLw1+
BULw1+ BURw1+ BDRw1+ BDLw1+

// Diagonal 2-pin
MUL1+ MUR1+ MDR1+ MDL1+
BMUL1+ BMUR1+ BMDR1+ BMDL1+

// Entire side
ALL1+ F1+ B1+

// Rotations
x2 y2 z

There's a bug. I can't record it, but when the 3x3 is scrambled it can sometimes mirror itslef randomly.

When I rotate the puzzle (happens on any puzzle) all the way around, it sometimes jumps around by 180 degrees; this is likely a bug in the code determining rotation, possibly rotating the puzzle to -180° above 360° instead of 0°. I presume @THE_V01DL0RD's report is the same issue.

This should be fixed as of July.

(I was specifying a range size of 360 degrees where I should have specified a range boundary of 180 degrees. So the puzzle would jump from an effective angle of y2' to y4 instead of from y2' to y2.)

 

[THE_V01DL0RD]

Can I have Melinda's 2x2x2x2 notation or is it not finished?

 

[Lucas Garron]

Can I have Melinda's 2x2x2x2 notation or is it not finished?

It's not finished but the current moves are defined here: https://github.com/cubing/cubing.js...de-events/melindas2x2x2x2.kpuzzle.json.ts#L15

 Twizzle link 

Rx Ry Rz
Lx Ly Lz
Mx My Mz
Ox Oy Oz
U2 D2 F2 B2
x y2 z2

 

[Soldier]

cool!

 

[Soldier]

why cant i see the puzzles on explore

 

[Lucas Garron]

why cant i see the puzzles on explore

Could you let us know what's happening instead? I don't know of a reason it wouldn't be working right now, but screenshot of the app and JavaScript DevTools console could be useful in identifying what's happening on your device.

 

[Christopher Mowla]

When integrating this into the wiki pages involving 4x4x4 algorithms, I noticed that the algorithm will not parse with comments if there isn't at least one space between the // and the comment algorithm. For example, try running this algorithm for the 4x4x4:
L R U2 L' R' U' L R U2 L2 x' U B2 2R2 U2 2R D2 2R' U2 x' U2 2L2 U2 2R' B2 2R' U2 x 2L U' m' U'//Safe

I can easily (and I will with a search and replace) add one space between the alg and the //, but just an FYI.

 

[erictom333]

On dodecahedral puzzles, white and tan, and to a lesser extent grey, are extremely similar. Would it be possible to change tan and grey to more distinct colors, such as #FFE080 and #808080?

 

[Christopher Mowla]

On dodecahedral puzzles, white and tan, and to a lesser extent grey, are extremely similar. Would it be possible to change tan and grey to more distinct colors, such as #FFE080 and #808080?

And speaking of color codes, @Lucas Garron , I recently found an online calculator that finds the closest 3 digit color code to an inputted 6 digit one. You (of all people) probably know about algorithms like that, but just in case you didn't, and such a change would save memory/space, etc., maybe you and Tom can look into it? (It doesn't work well with very light or dark gray colors... wants to suggest solid white or black, respectively, but it seemed to work well with colors I used it to get 3 digit hex codes for.)

Try It Online

tio.run

 

[Lucas Garron]

When integrating this into the wiki pages involving 4x4x4 algorithms, I noticed that the algorithm will not parse with comments if there isn't at least one space between the // and the comment. For example, try running this algorithm for the 4x4x4:
L R U2 L' R' U' L R U2 L2 x' U B2 2R2 U2 2R D2 2R' U2 x' U2 2L2 U2 2R' B2 2R' U2 x 2L U' m' U'//Safe

I can easily (and I will with a search and replace) add one space between the alg and the //, but just an FYI.

Indeed, you'll have to make sure there is a space (or newline) between a move and any other part of an alg.

It should also be possible to embed viewers in the wiki in various ways, if we want to do that.

 

[Lucas Garron]

And speaking of color codes, @Lucas Garron , I recently found an online calculator that finds the closest 3 digit color code to an inputted 6 digit one. You (of all people) probably know about algorithms like that, but just in case you didn't, and such a change would save memory/space, etc., maybe you and Tom can look into it? (It doesn't work well with very light or dark gray colors... wants to suggest solid white or black, respectively, but it seemed to work well with colors I used it to get 3 digit hex codes for.)

Try It Online

tio.run

Ooh, that's a cool tool!

However, color codes are represented as integers in the source and the amount of space taken up by color definitions is tiny, so this is unlikely to be helpful for this project. What we *could* really use, though, is a compact way to do `oklab` color mixing in JS without pulling in a large dependency.

 

[Christopher Mowla]

Indeed, you'll have to make sure there is a space (or newline) between a move and any other part of an alg.

Already done. (Added a space.)

 

[Christopher Mowla]

It should also be possible to embed viewers in the wiki in various ways, if we want to do that.

Just looking at the "example solves" in various pages in the wiki, yeah, I think content like that could benefit the most. (Like the embed feature being used for those... not with long alg sets.) I actually just thought about that today. But if you (as an administrator) can see how many views the pages that contain "example solves" for solving methods get, then you can put it on your priority list accordingly.

What we *could* really use, though, is a compact way to do `oklab` color mixing in JS without pulling in a large dependency.

I recently had to learn about the Delta E2000 algorithm (and get/write code to do the various conversions for the actual inputs of the main algorithm). It's a lot more code than what I was expecting a "color algorithm" to be.

So I guess that's what you were referring to by "large dependency"?

 

[Lucas Garron]

Just looking at the "example solves" in various pages in the wiki, yeah, I think content like that could benefit the most. (Like the embed feature being used for those... not with long alg sets.) I actually just thought about that today. But if you (as an administrator) can see how many views the pages that contain "example solves" for solving methods get, then you can put it on your priority list accordingly.

Hmm, I'd say that's more up to @pjk. But I can certainly write different embeddings for players to be used on different pages, if you have a good idea of how to make that easy to use.

I recently had to learn about the Delta E2000 algorithm (and get/write code to do the various conversions for the actual inputs of the main algorithm). It's a lot more code than what I was expecting a "color algorithm" to be.

So I guess that's what you were referring to by "large dependency"?

Yeah. The solutions is probably to use https://colorjs.io/, but that's 35KB gzipped. I haven't yet tested how much that would get reduced with tree shaking, but for comparison a fresh visit to alpha.twizzle.net/edit/?puzzle=clock uses only ≈100KiB of code over the network. So I've set aside all the color details until I have time to combine them with a full pass for accessibility.