Skip to content

Commit

Permalink
Did the Github Markdown format change?
Browse files Browse the repository at this point in the history
  • Loading branch information
larspetrus committed Mar 25, 2017
1 parent b9932ce commit 58456ec
Showing 1 changed file with 25 additions and 25 deletions.
50 changes: 25 additions & 25 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,31 +1,31 @@
#Roofpig
# 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](http://threejs.org/)) and is written in CoffeeScript. You can see it in use on http://lar5.com/cube/, or [play with demos](http://jsfiddle.net/Lar5/86L4C/).

It should work on most [any modern browser](http://caniuse.com/canvas).

##1. Usage
## 1. Usage
All you need is one file and a web server. Put [`roofpig_and_three.min.js`](https://raw.githubusercontent.com/larspetrus/Roofpig/master/roofpig_and_three.min.js) on your server. Include it, and jQuery 3.1.1 in your HTML:

```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>
```
#####Static creation
##### 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!**

```html
<div class=roofpig data-config="alg=R U R' U R U2 R'"></div>
```

#####Dynamic creation
##### 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.
```html
CubeAnimation.create_in_dom('#show-alg', "alg=R U R' U R U2 R'", "class='my-roofpig'");
```


##2. data-config
## 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:
Expand All @@ -38,27 +38,27 @@ This is a fully configured example cube:

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`.
### 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
##### 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
##### Rotation notation
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` 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
##### 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**](http://jsfiddle.net/Lar5/MfpVf/)

###2.2 The Cube
### 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
##### 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.
Expand All @@ -77,12 +77,12 @@ This would be enough to define any set of stickers. It would also be tedious to

Now that we know Cubexps, we can make cubes!

#####`solved` and `colored`
##### `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**](http://jsfiddle.net/Lar5/tE83s/)

#####`setupmoves` and `tweaks`
##### `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.
Expand All @@ -91,37 +91,37 @@ Aside from colors, you can also put **X** es on stickers: `tweaks=X:Ub x:Ul`

[`setupmoves` and `tweaks` demo](http://jsfiddle.net/Lar5/JFgQg/) (clearer than the text)

###2.3 Other parameters
### 2.3 Other parameters

[**Other parameters Demo**](http://jsfiddle.net/Lar5/9vq68/)

#####`hover`
##### `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`
##### `speed`
Number of milliseconds for a turn. Defaults to 400. Double turns take 1.5x longer.

#####`flags`
##### `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`
##### `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`
##### `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`
##### `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.
### 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.
Expand All @@ -138,24 +138,24 @@ Properties in data-config override those "inherited" from the base. One `base` c

To share between pages, you can for example put **"ROOFPIG_CONF_"**'s in a common .js file.

###3. Working with the code
### 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
#### 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
#### Testing

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

##4. What's a Roofpig anyway?
## 4. What's a Roofpig anyway?
[**"Most unexpected!"**](https://www.youtube.com/watch?v=PtO0diaiZEE&t=14m57s)

0 comments on commit 58456ec

Please sign in to comment.