DOWNLOAD

381 kb

YOUR FIRST APP

It's easy to create a new project: copy and rename the "empty" folder in "sketches".

You can peek inside index.html and style.css if you like. But those are mostly for setting up the files.

<!DOCTYPE html>



<title>Rabbit Ear</title>

<meta charset="UTF-8">

<link rel="stylesheet" type="text/css" href="style.css">



<script type="text/javascript" src="../../RabbitEar.js"></script>

<script type="text/javascript" src="sketch.js"></script>

Most of your creative energy can be spent inside of sketch.js

var origami = new OrigamiPaper();


// respond to an event. these are optional:

origami.onMouseDown = function(event){

}

origami.onMouseUp = function(event){

}

origami.onMouseMove = function(event){

}

origami.onMouseDidBeginDrag = function(event){

}

origami.animate = function(event){

   // this will repeat ~60 times/second

}

Open index.html you'll see an empty square piece paper. It assumes a square shape. You can change that later.

The origami paper comes from this one line of Javascript:

var origami = new OrigamiPaper();

Let's fold the paper. To make a crease in Rabbit Ear we add a crease onto the crease pattern object

CREASE PATTERN

The crease pattern object keeps track of all the crease lines and their endpoints (among other things). When you add a crease it will either add two endpoints or re-use another line's endpoints if they touch. It's smart like that. 

var cp = new CreasePattern();

Let's put a crease into the piece of paper and ask the software to fold it.

Erase everything inside of sketch.js, and replace it with:

var cp = new CreasePattern();
cp.crease(0, 0, 0.5, 1).valley();
new OrigamiPaper(cp);

This puts a crease in the paper and gives it a valley assignment.

The last line is the one we've seen before, it creates the origami paper on screen. But this time there's "cp" in parentheses, we're telling it to use our crease pattern.

In the last line, if you replace "OrigamiPaper" with "OrigamiFold" you get the folded form.

var cp = new CreasePattern();
cp.crease(0, 0, 0.5, 1).valley();
new OrigamiFold(cp);

ORIGAMI PAPER

Try out this sketch:

var origami = new OrigamiPaper();



origami.onMouseMove = function(event){

  this.cp.clear();

  this.cp.crease(0, 0, event.point.x, event.point.y);

  this.cp.crease(0, 1, event.point.x, event.point.y);

  this.cp.crease(1, 0, event.point.x, event.point.y);

  this.cp.kawasakiCollapse(event.point);

}

The this.cp is the same as typing origami.cp here. this can be used interchangeably with origami when you're inside an OrigamiPaper function.

Notice the three crease operations. The creases go from corners of the square to the mouse pointer. Then there is a fourth crease operation:

this.cp.kawasakiCollapse(event.point);

This locates a fourth angle which when added to these three satisfies Kawasaki's theorem of flat foldability.

move the cursor over this paper

Rabbit Ear renders these image on the webpage as .svg content, so it's really easy to save your work as an .svg file:

This code we just wrote is called flat-fold inside the examples/ folder. Check out the other examples to get a quick sense about what is possible.

new OrigamiFold().load("crane.svg");

DOWNLOAD