📐 A web-based crease pattern editor for origami.
You can view the application here.
At its core,
crease is a simple, vector-based line drawing tool with several geometric operations that are particularly useful for diagramming origami crease patterns. A crease pattern is essentially an embedding of a planar graph (i.e. a graph where no edges overlap). So, the primary challenge in creating such a tool is maintaining planarity throughout the lifecycle of the program. For example, if the user draws a crease that passes through one or more existing creases, the offending creases (including the one that they just created) should be “split,” and new vertices should be added at the point(s) of intersection.
OrderedSelection. It is “ordered” in the sense that some tools (such as the DROP_PERPENDICULAR tool) require the user to first select a vertex then select a crease. In the future, this functionality may be redesigned to accomodate things like undo stacks, history, unordered selections, box selections, etc.
The bulk of the work is handled by the
PlanarGraph class, which maintains a list of edges and nodes. Each node is a
Vec2 (i.e. a point in 2-space with coordinates x and y). Each edge is a pair of integer indices into the list of nodes. Nodes and edges can be added at will, and the
PlanarGraph takes care of splitting edges, removing stray nodes (i.e. nodes with no incoming / outgoing edges), etc. One challenge with this design was figuring out how to communicate this “state” back to the rest of the application for drawing and visualization purposes. Inspired by Erik Demaine’s own
cp-editor tool, I structured the
addEdge() functions so that they each return a list of “changed” nodes and edges upon completion. The drawing code can then iterate through the list of changed objects, find the corresponding SVG elements, and modify / delete / re-add them to the canvas, as necessary. To facilitate this process, each SVG element is created with an “index” into the graph data structure. You can view these details by hovering over any crease or vertex (except for “grid vertices”: the vertices that appear when the application starts).
The application is fairly self-explanatory, but for completeness, each of the tools is described (in order) below:
Finally, the SAVE (or EXPORT) button lets you save out the crease pattern as a
This project was largely inspired by (and indebted to) Jun Mitani’s Java application, ORIPA and Erik Demaine’s FOLD. Erik Demaine’s own crease pattern editor was also a very helpful reference, especially in terms of understanding the interop between SVG elements and planar graphs.
Some other resources that were useful during the creation of this project: