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

Introducing Twizzle (alpha)

Lucas Garron

Member
Joined
Jul 6, 2007
Messages
3,574
Location
California
WCA
2006GARR01
YouTube
Visit Channel
So, it's been a while since I announced alg.cubing.net, and it hasn't changed much over the years. That's because I've been working from scratch with Tom Rokicki to build a much more powerful successor called Twizzle!

We have so much more to do, we not even in beta yet!
However, you can now start using it at:

Twizzle (short for "twisty puzzle") is an open source project based on a new library called cubing.js and its <twisty-player>, which allows us to support lots of new features:

All WCA puzzles and WCA notationMore & custom puzzlesExtended features
alpha.twizzle.net_edit__puzzle=pyraminx&alg=R%27+B+R+L+U%27+R+U+L%27+U+L+U%27+l%27+u%27&experi...pngalpha.twizzle.net_explore__puzzle=pyraminx+crystal (1).pngalpha.twizzle.net_edit_index.html_puzzle=megaminx&alg=BR2%27+Lv2%27+Uv%27+DL+B+U2%27+BL2+DL%27...png
Puzzle solvers
alpha.twizzle.net_edit__puzzle=clock&alg=R%27+L+R+L%27.png
(Clock is currently 2D and doesn't show pins yet.)
alpha.twizzle.net_explore__puzzle=pyraminx+crystal (2).pngScreen Shot 2021-07-22 at 02.02.32.png
Bluetooth and keyboard input (doesn't work well for all puzzles right now).
alpha.twizzle.net_edit__puzzle=square1&alg=%2F+%28-3%2C+0%29+%2F+%280%2C+3%29+%2F+%280%2C+-3%2...png
(Square-1 doesn't currently check that corners stay together and is only 2D so far.)
alpha.twizzle.net_edit_index.html_alg=%2F%2F+Extended+Multisuperflip+by+Per+Kristen+Fredlund%0...png
From Walter Randelshofer's Pretty Patterns database.
Screen Shot 2021-07-22 at 02.05.51.png
General puzzle format handling (using the KPuzzle format, based on KSolve).

So far we have an "editor" (similar to alg.cubing.net) and an "explorer", but we're working to combine those into a single app and have a few more experiments to bring in.
You can see the influence of alg.cubing.net, and also the rather general puzzle support, which is almost entirely thanks to Tom.

I've started a video series explaining Twizzle, and plan to cover new features as we work on them.
In particular, there are a few important open topics (notation, accessibility, etc.) where I want to reach out to the community before we go to beta and v1.0.

Twizzle Diaries — Ep. 1: What If?
[Thumbnail] Ep. 1 — What If?.jpg

Twizzle Diaries — Ep. 2: Ten Years Ago
[Thumbnail v1.0.0] Twizzle Diaries — Ep. 2 | Ten Years Ago.jpg

Please try out Twizzle alpha and let us know what you think!
There are a lot of things we haven't gotten around to, and it would be useful to know what kind of functionality is valuable for you.
 

Attachments

  • alpha.twizzle.net_edit__puzzle=pyraminx&alg=%5BR%27%2C+L%5D.png
    alpha.twizzle.net_edit__puzzle=pyraminx&alg=%5BR%27%2C+L%5D.png
    272 KB · Views: 2
  • alpha.twizzle.net_explore__puzzle=pyraminx+crystal.png
    alpha.twizzle.net_explore__puzzle=pyraminx+crystal.png
    331.4 KB · Views: 1
  • alpha.twizzle.net_explore__puzzle=pyraminx+crystal (1).png
    alpha.twizzle.net_explore__puzzle=pyraminx+crystal (1).png
    291.7 KB · Views: 1
  • alpha.twizzle.net_edit_index.html_puzzle=megaminx&alg=BR2%27+Lv2%27+Uv%27+DL+B+U2%27+BL2+DL%27...png
    alpha.twizzle.net_edit_index.html_puzzle=megaminx&alg=BR2%27+Lv2%27+Uv%27+DL+B+U2%27+BL2+DL%27...png
    455.6 KB · Views: 1
  • Twizzle Logo (Core) for Round Outline.png
    Twizzle Logo (Core) for Round Outline.png
    66.5 KB · Views: 3
Last edited:

pjk

Administrator
Staff member
Joined
Mar 13, 2006
Messages
6,563
WCA
2007KELL02
Nice work @Lucas Garron. Just watched both videos, nice edits. I think making a video showing how to use Twizzle, why you should use it, why it's useful, etc. would be useful for new people to the community who aren't sure how it is used 1k times/day and would perhaps open their curiosity to it. Keep up the good work, hope all is well with you.
 

CodingCuber

Member
Joined
Nov 10, 2019
Messages
605
Location
Melbourne
WCA
2019HERR14

Lucas Garron

Member
Joined
Jul 6, 2007
Messages
3,574
Location
California
WCA
2006GARR01
YouTube
Visit Channel
Wow that's nice!! Do you think it's possible/feasible to build a web-based Cube Explorer-like solver?

Edit: ACube.js exists wow!!
Yep!
Tom has been working on twsearch, which is a more powerful replacement for KSolve and ACube. The goal is to make that available on the web similar to ACube.js, and we're pretty close!

As someone who uses custom color schemes on all my cubes, would it be possible to add a color scheme customization option in the future?

Yeah, this is a top request. We need to think about it carefully, because people have a variety of color scheme needs:
  • Colorblind folks who might have different needs for distinguishable colors.
  • People who like to substitute an individual color vs. rearrange a bunch.
  • Viewing algs with your preferred color scheme or LL face.
  • Reconstructions of solves performed on some other color schemes (less of a problem now that most Japanese cubers use BOY).
  • Reorienting the color scheme of a reconstruction to match your cross color.
... and then we need a way to handle this for all puzzles, and a way to "remember" such a setting for the right situation. I don't want to implement something super-customizable only for someone's "red" to mean someone else's "white".
I don't want to hold up 3x3x3 color schemes until we have a full solution, but I definitely want to get it right.

O boy, I always wanted to solve a 40X40!!

You wouldn't be the first! :p

https://experiments.cubing.net/cubing.js/stress-tests/40x40x40.html


Nice work @Lucas Garron. Just watched both videos, nice edits. I think making a video showing how to use Twizzle, why you should use it, why it's useful, etc. would be useful for new people to the community who aren't sure how it is used 1k times/day and would perhaps open their curiosity to it. Keep up the good work, hope all is well with you.

Thanks! First order of priority was just getting the site working and announced, but we're definitely working on a basic explainer vid. :-D

It would be great if you could put the movecount of the solve (QTM, HTM, STM, etc.) into Twizzle, like it is in ACN.

Thanks, it's good to hear requests like that!
It's definitely on the list. (For now, you can paste an alg back into alg.cubing.net to get counts, since the notation is compatible).

Will alg.cubing.net going to stay on the air even after a beta comes out, or do we have to update the links to all the algs in the wiki again?
I plan to redirect everything to twizzle.net eventually, but we will definitely make sure all existing links continue to lead somewhere that animates the same thing.
For now, it's probably best not to update any place with a lot of links.

alpha.twizzle.net dosen't work on my computer.
Hmm, it should work on any modern browser on any device. Could you try on a different network, or with another browser or device?
 

Attachments

  • experiments.cubing.net_cubing.js_stress-tests_40x40x40.html.png
    experiments.cubing.net_cubing.js_stress-tests_40x40x40.html.png
    962.9 KB · Views: 75

Lucas Garron

Member
Joined
Jul 6, 2007
Messages
3,574
Location
California
WCA
2006GARR01
YouTube
Visit Channel
Since I learned basic js I can help contribute

Contributions are definitely welcome!
We rely on `npm` and GitHub. If you're familiar with those, it should be pretty straigthforward: https://github.com/cubing/cubing.js/blob/main/CONTRIBUTING.md

We have a few things marked as a "good first issue", although they tend to assume familiarity our tooling:
But it might be more effective to just start by tinkering with the code to see what changes.
(I want to make a proper "how to work with the code" video at some point. I have one draft, but it's very long.)

Feel free to join our Slack if you'd like to chat more directly about development!
 

CodingCuber

Member
Joined
Nov 10, 2019
Messages
605
Location
Melbourne
WCA
2019HERR14
Contributions are definitely welcome!
We rely on `npm` and GitHub. If you're familiar with those, it should be pretty straigthforward: https://github.com/cubing/cubing.js/blob/main/CONTRIBUTING.md

We have a few things marked as a "good first issue", although they tend to assume familiarity our tooling:
But it might be more effective to just start by tinkering with the code to see what changes.
(I want to make a proper "how to work with the code" video at some point. I have one draft, but it's very long.)

Feel free to join our Slack if you'd like to chat more directly about development!
I'd love to help contribute. I'll try get around to it when I can.
 

qwr

Member
Joined
Jul 24, 2019
Messages
2,198
YouTube
Visit Channel
Contributions are definitely welcome!
We rely on `npm` and GitHub. If you're familiar with those, it should be pretty straigthforward: https://github.com/cubing/cubing.js/blob/main/CONTRIBUTING.md

We have a few things marked as a "good first issue", although they tend to assume familiarity our tooling:
But it might be more effective to just start by tinkering with the code to see what changes.
(I want to make a proper "how to work with the code" video at some point. I have one draft, but it's very long.)

Feel free to join our Slack if you'd like to chat more directly about development!
I use GitHub a lot, not really familiar with Node environment. I have taken a computer graphics course in C++ and worked with Plotly
 

Lucas Garron

Member
Joined
Jul 6, 2007
Messages
3,574
Location
California
WCA
2006GARR01
YouTube
Visit Channel
Don't worry, Node.js is very simple to get started with. The documentation is straightforward too.

`node` also has... a lot of compatibility challenges. I'm on macOS, so I personally would do this:
At that point, you should be edit the code for on any part of Twizzle and. Unfortunately, setting up `node` can vary a lot by computer. If anyone runs into issues setting up `node`, feel free to contact me directly and I'll try to help.

(Note: If you have access to GitHub Codespaces, that is much more convenient.)

If anyone is interested in trying out `cubing.js`, it's actually much easier to use a service like CodePen:


We have some documentation for `<twisty-player>` at https://js.cubing.net/cubing/ , although we could certainly use feedback on how to make it more useful.
I know this is all a bit vague, but we're still in the early days!
 
Top