SolvingRubik
Member
- Joined
- Jan 24, 2019
- Messages
- 16
Hey guys. Just thought I'd post this here in case anyone was interested. I'm sure most of you have heard of visualcube. I've put a little work into porting it to typescript/javascript to allow rendering images right in your page without requesting it from the old .php file. You can find my progress here https://github.com/tdecker91/visualcube
I know there are other great javascript cube visualization libraries out there, like TwistySim and RoofPig. Other libraries that have a larger variety of supported puzzles etc... But visualcube was always my favorite. It looks great. Plus sometimes you only need to generate an image and don't need a 3d interactive puzzle.
The code is pretty much spaghetti, but it seems to function almost just like the original. I left out a few minor features. Also the api is changed a bit. Calling it from javascript is completely different from the old URL parameter api.
I hope to take what I learned from doing this and build a more generic version that can render any WCA puzzle. And make the code cleaner while i'm at it.
Anyway, enjoy! I hope someone finds it useful.
Let me know if you have any suggestions or find any issues with it. Hopefully the documentation is clear.
Edits:
I know there are other great javascript cube visualization libraries out there, like TwistySim and RoofPig. Other libraries that have a larger variety of supported puzzles etc... But visualcube was always my favorite. It looks great. Plus sometimes you only need to generate an image and don't need a 3d interactive puzzle.
The code is pretty much spaghetti, but it seems to function almost just like the original. I left out a few minor features. Also the api is changed a bit. Calling it from javascript is completely different from the old URL parameter api.
I hope to take what I learned from doing this and build a more generic version that can render any WCA puzzle. And make the code cleaner while i'm at it.
Anyway, enjoy! I hope someone finds it useful.
Let me know if you have any suggestions or find any issues with it. Hopefully the documentation is clear.
Edits:
Algorithm parsing has been improved. It should support any valid WCA scramble for NxN cubes. The alg can be applied to any size cube
For example, the following will scramble a 5x5 cube. The same pattern can be used for larger cubes.
For example, the following will scramble a 5x5 cube. The same pattern can be used for larger cubes.
JavaScript:
cubePNG(element, {
cubeSize: 5,
algorithm: 'R U Uw2 Bw\' Dw L\' F\' Lw\' Dw Lw\' B Lw2 Bw B2 U2 L\' Fw Rw D\' Rw\' Bw D\' Rw2 L2 B L2 Bw L B\' R\' F\' R\' B\' Dw2 Lw2 D2 Dw\' B Lw L\' R\' Fw Uw2 R2 Bw\' Lw\' B R L\' Dw2 F D2 Bw\' U\' Uw F\' B R\' D2 Bw2'
});
I've added support for the old "fd" parameter. This allows user to define color of sticker by color scheme. "Transparent" stickers work now as well. If the sticker color is "transparent" then it won't even be rendered.
Not much of a change, but these are just steps making it more backwards compatible with the original version.
Not much of a change, but these are just steps making it more backwards compatible with the original version.
Last edited: