Rabbit Ear is gearing up for a version 2 release. Documentation and updates will continue through 2019

Origami

grab

.HTML
<!DOCTYPE html>
<title>Rabbit Ear</title>
<script src="rabbit-ear.js"></script>
<script>
RabbitEar.Origami( {"folding":true} );
</script>

This simple app creates the sketch above - a square sheet of paper that you can fold.

Example Apps

Getting Started

Create a new project inside the "sketches" folder by copying and renaming "empty".

There are three files in your sketch:

let origami = RabbitEar.Origami();

// respond to a touch event origami.onMouseMove = function(event){ }

Examples

This loads an svg image, interprets it like a crease pattern, and folds it.

let origami = RabbitEar.Origami();
origami.load("crane.svg");
let origami = RabbitEar.Origami();
origami.load("crane.svg");
origami.fold();

In some cases Rabbit Ear is capable of determining layer ordering for a folding. When it is unsure it draws translucent faces.

loading a file requires running a localhost server.

This sketch loads a frog base and colors the faces.

let origami = RabbitEar.Origami();
origami.load(RabbitEar.bases.frog);

RabbitEar.core.faces_coloring(origami.cp)
  .map(color => color ? "#224c72" : "#f1c14f")
  .forEach((color, i) =>
    origami.faces[i].setAttribute("style", "fill:" + color)
  );

A flat-foldable crease pattern is always two-colorable.

These generative pleats are based on sine curves.

let origami = RabbitEar.Origami();
let creaseLines = Array.from(Array((12)))
  .map((_,i) => [ [p[i][0], p[i][1]], [p[i][2], p[i][3]] ]
);

creaseLines.forEach((a,i) => i%2 === 0
  ? sinePleats.cp.creaseLine(a[0], a[1]).mountain()
  : sinePleats.cp.creaseLine(a[0], a[1]).valley()
);

Because Rabbit Ear draws using SVG, a vector image is always ready to download.

There's a three.js extension in the works.

let origami = RabbitEar.Origami3D();
origami.load("square-twist.fold");

CREASE PATTERN

Each origami object contains a Crease Pattern, an extended FOLD object. This is where all the crease information is stored including the folded form.

origami.cp // crease data is stored here

For especially algorithmic cases, you can create a crease pattern data object directly, unattached to any SVG.

let cp = RabbitEar.CreasePattern();

There is a growing list of ways to put in a crease.

axiom1(point, point)
...
axiom7(point, line, line)
addVertexOnEdge(x, y, oldEdgeIndex)
creaseRay(ray)
creaseLine(line)

Read more about the Crease Pattern object, .svg to .fold converters, the math library, and more in the following sections.