Loading...
Text label displayed
above the canvas
Algorithm - classic notation
F R' U2 - face moves
M E' S2 - slice
x - full cube
Rw - double layer F'+B - together
D>> - camera view angle
F, B, R, L, U, D. M, E, S. x, y, z.
Fw, Bw, Rw, Lw, Uw, Dw,
f, b, r, l, u, d. 
2, ', 2'.  Z, 1, 3
Colored stickers with Cubexp:
F* - whole F (U UB UBL UBR UF UFL UFR UL UR)
F- - everything excluding F
f - face
* - whole cube
Filtering: c = corners, e = edges, m = middles
U*/c - corners in U
Dark grey coloring with Cubexp:
F* - whole F
F- - everything excluding F
f - face
* - whole cube
Filtering: c = corners, e = edges, m = middles
U*/c - corners in U
Apply moves to the cube
Needs to be the same as the
  alg to start with the solved state
Set stickers to any color
tweaks=F:RF - set both FR stickers to F color
tweaks=X:Ub - put X marks on stickers
  (XxX - one white sticker)
Sticker - cube hover distance
number 1 - 10 (stick - far)
Miliseconds to make a turn
Default is 400
Canvas settings
showalg canvas startsolved
Default: R - green, L - blue, F - red,
B - orange, U - yellow, and D - white
WCA: U:w L:o F:g R:r B:b U:w D:y
U:#823 F:pink R:#139
Point of view
Default UFR corner, with U on top: Ufr
Try Fdl
When showalg is on:
fancy2s - Double moves F² not F2.
rotations - Display the Roofpig rots (R>)
2p - counterclockwise double moves as 2'
Z - Display counterclockwise double moves as Z.

Iframe code

Show this cube on a website in an iframe:

Roofpig code

3D Interactive Rubik's Cube Widget

Display small Rubik's Cubes on your website with this interactive plugin. Set up the parameters and grab the code to include it in an iframe. Click inside a variable input field to see a short description or read below.

The variables

label

Text label displayed
above the canvas

alg

Algorithm - classic notation
F R' U2 - face moves
M E' S2 - slice
x - full cube
Rw - double layer F'+B - together
D>> - camera view angle
F, B, R, L, U, D. M, E, S. x, y, z.
Fw, Bw, Rw, Lw, Uw, Dw,
f, b, r, l, u, d. 
2, ', 2'. Z, 1, 3

colored

Colored stickers with Cubexp:
F* - whole F (U UB UBL UBR UF UFL UFR UL UR)
F- - everything excluding F
f - face
* - whole cube
Filtering: c = corners, e = edges, m = middles
U*/c - corners in U

solved

Dark grey coloring with Cubexp:
F* - whole F
F- - everything excluding F
f - face
* - whole cube
Filtering: c = corners, e = edges, m = middles
U*/c - corners in U

setupmoves

Apply moves to the cube
Needs to be the same as the
alg to start with the solved state

tweaks

Set stickers to any color
tweaks=F:RF - set both FR stickers to F color
tweaks=X:Ub - put X marks on stickers
(XxX - one white sticker)

hover

Sticker - cube hover distance
number 1 - 10 (stick - far)

speed

Miliseconds to make a turn
Default is 400

flags

Canvas settings
showalg canvas startsolved

colors

Default: R - green, L - blue, F - red,
B - orange, U - yellow, and D - white
WCA: U:w L:o F:g R:r B:b U:w D:y
U:#823 F:pink R:#139

pov

Point of view
Default UFR corner, with U on top: Ufr
Try Fdl

algdisplay

When showalg is on:
fancy2s - Double moves F² not F2.
rotations - Display the rots (R>)
2p - counterclockwise double moves as 2'
Z - Display counterclockwise double moves as Z.

Read more...

Programming background

Roofpig is an animated, programmable and interactive 3D Rubik's Cube for the modern web which uses WebGL or plain Canvas (by way of three.js) and is written in CoffeeScript. You can see it in use on Ruwix or play with demos on jsFiddle.

According to CanIUse.com, It should work in any modern browser.

1. Implementation

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="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="roofpig_and_three.min.js"></script>
Static creation

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>
Dynamic creation

To create a cube dynamically under a parent div, call CubeAnimation.create_in_dom(parent_div, config, div_attributes), where config is the data-config and div_attributes is what it sounds like.

CubeAnimation.create_in_dom('#show-alg', "alg=R U R' U R U2 R'", "class='my-roofpig'");

2. Setting the parameters

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, f, b, r, l, u, d. 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 (in contrast, inserting x2changes all following moves). 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 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

  1. Install Node and NPM - https://docs.npmjs.com/getting-started/installing-node
  2. Clone/download this Github repository, and cd to the resulting directory
  3. npm install
  4. sudo npm install -g gulp

Now the gulp task below should work. Let me know if it doesn't.

Building it

gulp build on the command line creates a roofpig_and_three.min.js file in local/build/

misc/demo_local.html is a demo page using the built file. misc/demo.html is the same demo using the official release file.

Testing

gulp test makes the rptest.html file for running the tests in a browser. open rptest.html is one way.


Download it from Github

Back To The Top