#Roofpig

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.

##1. Usage All you need is one file and a web server. Put roofpig_and_three.min.js on your server. Include it, and jQuery 1.11.3 in your HTML:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="roofpig_and_three.min.js"></script>

To put a cube on the page, make a div with 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>

##2. data-config In 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: alg, algdisplay, base, colored, colors, flags, hover, pov, setup, solved, speed, tweaks. We'll go over them in a logical order.

###2.1 The Algorithm. alg. 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.

#####Standard notation 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. Turns: 2, ', 2'. You can also use ², Z, 1 and 3.

#####Rotation notation Roofpig adds "non destructive" rotations, that turns the cube while preserving the side names. You can think of them as moving the "camera". R> rotates the whole cube like an R move. R>> is a double turn, R< and R<< the same in the opposite direction. This means F> is the same as B<.

#####Combination notation Roofpig also allows combining moves. Using +. Side safe slice moves: M = L'+R, E = D'+U, and S = F'+B. 'w' moves: Rw = R>+L, Lw = L>+R, Uw = U>+D, etc. Whole cube: y=U+E'+D'. Combining moves that can't be done in parallel, like L+U or Rw+Fw2, will make horrible and amusing things happen.

Alg notation demo

###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.

#####Cubexps We often need to define sets of stickers. So I made a tiny language to simply describe logical 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. u is 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. c = corners, e = edges and m = 'middles'. So U*/c is the corners in the U layer, or UBL UBR UFL UFR. u/me is U Ub Uf Ul Ur. The demo has more.

Cubexp demo

Now that we know Cubexps, we can make cubes!

#####solved and colored The main parameters for this are the solved and colored Cubexps. solved stickers will be dark grey. colored stickers will have normal colors. Anything not solved or colored will be light gray as 'ignored'. solved trumps colored.

Solved and colored demo

#####setupmoves and tweaks When marking stickers 'solved' and 'ignored' is not enough, you need to use these.

• setupmoves applies some moves to the cube. For example setupmoves=L' B' R B L B' R' B permutes 3 corners.
• tweaks is the free form tool, that can set any sticker to any color - AND MORE! tweaks=F:RF sets both stickers on the FR edge to the F color. tweaks=R:Ubl sets only the U sticker on the UBL corner to the R color. Aside from colors, you can also put X es on stickers: tweaks=X:Ub x:Ul

setupmoves and tweaks demo (clearer than the text)

###2.3 Other parameters

Other parameters Demo

#####hover 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 none, near and far (1, 2 and 7.1). Solved and ignored stickers don't hover.

#####speed Number of milliseconds for a turn. Defaults to 400. Double turns take 1.5x longer.

#####flags 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 algdisplay setting.
• canvas - Use regular 2D canvas to draw instead of WebGL.
• startsolved - Start out with a solved cube, instead of with the reverse alg applied.

#####colors 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 pink, #77f, #3d3dff etc.

#####pov 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 pov=Fdl.

#####algdisplay 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.

###2.4 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!"

You can use Javascript variables, named starting with "ROOFPIG_CONF_", as base.

<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 I wrote this in a Rails project, since that's how I usually do web programming. Maybe a little crazy to have the whole project in git, but it does work!

####To run it

• Clone the github repository to your computer.
• Download and install Rails.
• cd to .../Roofpig/rails_project
• Start Rails with rails server

You should get a demo page on http://localhost:3000/

####To test it

• Start test server with rake konacha:serve, then visit http://localhost:3500/
• Or, run the tests on the command line rake konacha:run

##4. What's a Roofpig anyway? "Most unexpected!"