Roofpig is an animated, programmable and interactive Rubik's Cube for the modern web. It uses WebGL or plain Canvas (by way of three.js) and is written in CoffeeScript. You can see it in use on http://lar5.com/cube/, or play with demos.
It should work on most any modern browser.
All you need is one file and a web server. Put
roofpig_and_three.min.js on your server. Include it, and jQuery 3.1.1 in your HTML:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="roofpig_and_three.min.js"></script>
To put a cube on the page, make a
class='roofpig'. Configuration goes in a
data-config attribute. Set height and width in CSS. That's it!
<div class=roofpig data-config="alg=R U R' U R U2 R'"></div>
To create a cube dynamically under a parent div, call
CubeAnimation.create_in_dom(parent_div, config, div_attributes), where
config is the
div_attributes is what it sounds like.
CubeAnimation.create_in_dom('#show-alg', "alg=R U R' U R U2 R'", "class='my-roofpig'");
data-config you set values to properties. The format is
property1=value|prop2=other value | prop99=you get the idea.
This is a fully configured example cube:
<div class=roofpig style="width:140px; height:160px;" data-config="alg=L' U2 L U2 R U' L' U L+R'|solved=U-/ce|colors=F:b B:g U:r D:o R:w L:y"> </div>
Valid properties are:
tweaks. We'll go over them in a logical order.
2.1 The Algorithm.
Define the animated algorithm like this:
alg=R F' x2 R D Lw'. It handles standard cube notation and some more. If no alg is given, the playback buttons don't appear.
Roofpig supports (almost) all standard cube notation. Layer(s): F, B, R, L, U, D. M, E, S. x, y, z. Fw, Bw, Rw, Lw, Uw, Dw, f, b, r, l, u, d. Turns: 2, ', 2'. You can also use ², Z, 1, and 3.
Roofpig adds "non destructive" rotations, that turns the cube while preserving the side names (in contrast, inserting
x2 changes all following moves). You can think of them as moving the "camera".
R> rotates the whole cube like an
R>> is a double turn,
R<< the same in the opposite direction. This means
F> is the same as
Roofpig also allows combining moves. Using +. Side safe slice moves:
F'+B. 'w' moves:
U>+D, etc. Whole cube:
U+E'+D'. Combining moves that can't be done in parallel, like
Rw+Fw2, will make horrible and amusing things happen.
2.2 The Cube
In Roofpig, you normally define how the cube will look after the alg is done. By default, it's a fully colored cube. You can also make parts 'solved' (dark gray) or 'ignored' (light gray), move pieces, recolor stickers and sprinkle out X-es.
But first we must talk about Cubexps.
We often need to define sets of stickers. So I made a tiny language to simply describe groups of stickers.
Cubexps do one thing: Define a set stickers, out of the 54 on a cube. That's it. They do nothing else.
The simplest format is listing pieces.
UBL is all the stickers on the UBL corner piece.
F is the F side center sticker. This Cubexp is the whole U layer:
U UB UBL UBR UF UFL UFR UL UR. For individual stickers,
UbL is only the U and L stickers on UBL. So
U Ub Ubl Ubr Uf Ufl Ufr Ul Ur is the U side.
This would be enough to define any set of stickers. It would also be tedious to write and hard to read. So there are shorthand expressions.
- F*. Whole layer(s).
U*is the U layer (
U UB UBL UBR UF UFL UFR UL UR).
UF*is the whole U and F layers.
- F-. Everything not in these layers.
U-is everything but the U layer.
ULB-is the pieces not in U, L or B, which are
D DF DFR DR F FR R(the DFR 2x2x2 block).
- f. A whole side.
uis the same as
U Ub Ubl Ubr Uf Ufl Ufr Ul Ur.
- *. The whole cube. Useful for filtering (see below)
- Filtering. All expressions can be filtered by piece types.
e= edges and
m= 'middles'. So
U*/cis the corners in the U layer, or
UBL UBR UFL UFR.
U Ub Uf Ul Ur. The demo has more.
Now that we know Cubexps, we can make cubes!
The main parameters for this are the
solved stickers will be dark grey.
colored stickers will have normal colors. Anything not
colored will be light gray as 'ignored'.
When marking stickers 'solved' and 'ignored' is not enough, you need to use these.
setupmovesapplies some moves to the cube. For example
setupmoves=L' B' R B L B' R' Bpermutes 3 corners.
tweaksis the free form tool, that can set any sticker to any color - AND MORE!
tweaks=F:RFsets both stickers on the FR edge to the F color.
tweaks=R:Ublsets only the U sticker on the UBL corner to the R color. Aside from colors, you can also put X es on stickers:
tweaks demo (clearer than the text)
2.3 Other parameters
How far out do the 'peek' stickers hover away from the cube?
1 is 'not at all'.
10 is 'too far'. It's easiest to use the aliases
far (1, 2 and 7.1). Solved and ignored stickers don't hover.
Number of milliseconds for a turn. Defaults to 400. Double turns take 1.5x longer.
Things that can only be on or off are set to "ON" by mentioning them in this free form text field. Current flags are
showalg- Display the alg, according to the
canvas- Use regular 2D canvas to draw instead of WebGL.
startsolved- Start out with a solved cube, instead of with the reverse alg applied.
Default colors are R - green, L - blue, F - red, B - orange, U - yellow, and D - white. Or
colors=R:g L:b F:r B:o U:y D:w in this notation. Aside from 'g' for green etc, you can also use any CSS color, like
By default the Point Of View is on the UFR corner, with U on top. Or
Ufr in this notation. To face DFL with F on top, use
This defines how algs are written (if
showalg is on). Much like flags, it's a free form string, where we look for certain words:
fancy2s- Double moves are written F² rather than F2.
rotations- Displays the Roofpig rotations (R>, U<< etc) . Off by default.
2p- Display counter clockwise double moves as 2'. Just 2 by default.
Z- Display counter clockwise double moves as Z.
base - sharing configs.
By now you may be asking, "But Lars, what if I use the Japanese color scheme? Do I really have to repeat that in each and every cube config?". To that I say, "No, dear infomercial plant, Roofpig has a simple way to share common config, which both cuts down on repetition and makes the common parts easy and safe to change!"
<script> ROOFPIG_CONF_F5 = "solved=U- | colors=F:B B:G U:R D:O R:W L:Y" </script> <div class=roofpig data-config="base=F5|alg=L+R' U' R U L' U' R' U R"></div> <div class=roofpig data-config="base=F5|alg=R' U' R U L U' R' U R+L'"></div>
Properties in data-config override those "inherited" from the base. One
base can refer to another
base to form an elaborate hierarchy if you're into that kind of complexity.
To share between pages, you can for example put "ROOFPIG_CONF_"'s in a common .js file.
3. Working with the code
- Install Node and NPM - https://docs.npmjs.com/getting-started/installing-node
- Clone/download this Github repository, and
cdto the resulting directory
sudo npm install -g gulp
Now the gulp task below should work. Let me know if it doesn't.
gulp build on the command line creates a
roofpig_and_three.min.js file in
misc/demo_local.html is a demo page using the built file.
misc/demo.html is the same demo using the official release file.
gulp test makes the
rptest.html file for running the tests in a browser.
open rptest.html is one way.