New WCA Puzzle Image Generator

[SolvingRubik]

Hey, I'm back to share something I've been sitting on for awhile.

This is my new javascript library PuzzleGen. A library to draw puzzle images in the DOM. Full 3d models of all puzzles are supported, as well as 2d "net" views of puzzles

Here is the GitHub
Here is some documentation
Here is an app I wrote to see it in action

It takes inspiration from my previous port of Visualcube. But this is rewritten entirely from scratch and supports all WCA puzzles (except clock). It's mainly for showing scramble previews, or demonstrations for tutorials.

This is not intended to be an interactive/animated puzzle preview, rather just rendering a static image to the screen. But hopefully it's useful enough to build whatever you want with it.

Here are some examples


One cool feature I am proud of is the ability to write a custom renderer. This lets you use the library in a context without a DOM. (ex. react native, or a node.js app running server side)

Happy to hear any feedback. Or if you find any issues feel free to report them on github.

 

[OreKehStrah]

I've recently started genning new algs for megaminx, so I'll definitely be checking this out. It looks great!

 

[AndyK]

This is brilliant. tdecker91 is legend

 

[Athefre]

Finally an image generator with custom line thickness. As seen in most of the projects on my websites, for years I've been making custom images using PowerPoint and Paint to produce images with thin lines to make something more modern looking than VisualCube.

A few feature requests which may or may not be difficult to implement:

1. On the web app the ability to select a color from a series of boxes then click and paint individual stickers on the cube. This is what I do in Paint on templates to quickly produce images. I see that there is a way to select from a drop-down and color stickers in an order. It would be a bit easier to have more direct control over stickers.
2. If it isn't already there and I didn't overlook it, the ability to input a series of algorithms in the "Case" box and the app will produce images for each case.
3. Taking it further, you could combine the two requests. A main image from which to work and create a template then produce a series of images for a case list. For example, let's say the user wants to make images for all cases to insert the FR edge while orienting all of the LL edges. On the main image the user could paint the U stickers of UF, UL, UB, and UR light grey then the rest of the stickers on those four edges will all be black or dark grey because the user doesn't care about the permutation of those edges. They will also paint UFR, UFL, UBL, UBR, and DFR all black or dark grey since they don't care about corners either. Then the user can input the full series of case algorithms. The result will be all of the edge orientations with the FR edge in its various positions.

 

[SolvingRubik]

Finally an image generator with custom line thickness. As seen in most of the projects on my websites, for years I've been making custom images using PowerPoint and Paint to produce images with thin lines to make something more modern looking than VisualCube.

A few feature requests which may or may not be difficult to implement:

1. On the web app the ability to select a color from a series of boxes then click and paint individual stickers on the cube. This is what I do in Paint on templates to quickly produce images. I see that there is a way to select from a drop-down and color stickers in an order. It would be a bit easier to have more direct control over stickers.
2. If it isn't already there and I didn't overlook it, the ability to input a series of algorithms in the "Case" box and the app will produce images for each case.
3. Taking it further, you could combine the two requests. A main image from which to work and create a template then produce a series of images for a case list. For example, let's say the user wants to make images for all cases to insert the FR edge while orienting all of the LL edges. On the main image the user could paint the U stickers of UF, UL, UB, and UR light grey then the rest of the stickers on those four edges will all be black or dark grey because the user doesn't care about the permutation of those edges. They will also paint UFR, UFL, UBL, UBR, and DFR all black or dark grey since they don't care about corners either. Then the user can input the full series of case algorithms. The result will be all of the edge orientations with the FR edge in its various positions.

Great feedback. To be honest the web app was just an afterthought to demonstrate a few things the library can do. As my strengths aren't in UI development . There are a few kinks and bugs with it. But I hope others can use the image generating library to build other great things

1. As far as painting the stickers by clicking on them, this is 100% something I intend to implement in the web app. Since currently it's very cumbersome to input sticker colors manually. There are a few ways I think it can be done, and I just need to find a good way to go about doing it.
2. This is a great idea and should be easy enough to implement. Although the megaminx scrambles themselves are already separated by newlines so I would need to find a better way to insert multiple algorithms. I'll give it some thought.
3. For painting the stickers and then providing an algorithm, that might work. Although, currently any painted sticker colors will override any algorithms or case provided. Cause I thought if sticker colors were going to be provided, that should override anything else. (although I like the idea, and I can see the use case for it from your sites. Maybe I can provide this as an option)

I think what you may be looking for is the "mask". This will gray out some stickers and still be affected by the algorithm or case provided. For 3x3 there are some custom masks defined, like (OLL, F2L...) and of course you can define your own masks when using PuzzleGen.

Something that I need to add are more default masks for other puzzles, and larger NxN cubes.

 

[m4rkoSSS]

Would it be possible to add this kind format to your app? It’d be great to generate F2L images

 

[SolvingRubik]

Would it be possible to add this kind format to your app? It’d be great to generate F2L images

View attachment 19977

It could be possible in the underlying framework to render a cube like this by altering the projection matrix. Although it wouldn't show the back and bottom colors on the edge / corner as you have in this example

A completely custom view like this would be possible, but not something I have the time to add right now. But open to any contributors on the github project if they're interested in adding features.

 

[OreKehStrah]

Would it be possible to have this setup with a weblink that algs can be pasted into to create an image for the case that is solved by the alg, like visualcube? It would be amazing to be able to create megaminx algsheets that react to algs getting added and automatically create an image for the case like we can with 3x3

 

[SolvingRubik]

Would it be possible to have this setup with a weblink that algs can be pasted into to create an image for the case that is solved by the alg, like visualcube? It would be amazing to be able to create megaminx algsheets that react to algs getting added and automatically create an image for the case like we can with 3x3

As it stands now, it's not quite possible like visualcube where you could use the link as an img src

ex.

<img src="http://cube.rider.biz/visualcube.php?fmt=png&size=200&alg=S2M2E2">

This is because visualcube renders the image on the server and returns the image source that the html img tag can consume. Whereas PuzzleGen is a javascript library that does all of the logic in the browser and can return html elements to add to the document.

It is certainly possible to build a server application that does this with the library I created. That is something I was planning on building, but life keeps getting in the way making me busy

It's also possible to have what you want by creating your own html pages using the library and instead of adding html <img> tags you'd call the javsascript library puzzleGen.PNG(...) which fits better with my intended usage.

 

[OreKehStrah]

I’ve been using this tool to generate a ton of images for different projects and it’s been super helpful!

I was wondering if it would be possible to add a feature to place text on top of any sticker. It would be useful for things like labeling centers so there’s no confusion on what angle an image represents, numbering corners for CP diagrams, labeling reference stickers, etched

 

[Filipe Teixeira]

wow it have megaminx
thx a lot!