Understanding Shape JSON

↓ download ↓

This prototype is built to help Origami users understand how Origami Studio uses JSON to build shapes

Shape Selection

There are a selection of shapes here that isolate specific aspects of the JSON and build off of one another.

1. simple straight line - shapes at their most basic 
2. compound path made of two straight lines - illustrating how "moveTo" functions to begin a new sub-path 
3. polygon from 3 to 8 sided - illustrating how each instruction builds on to the shape and the function of the "closePath" type 
4. curved line - showing how the "curveTo" type is accompanied by two additional keys "curveTo" and "curveFrom" 
5. rounded rectangle - showing how one of the standard shape types is made in JSON 
6. intersecting circles - showing the behavior when two paths overlap 
7. eye of providence - a modestly complex shape made of three subpaths 
8. skull and crossbones - a more complex shape containing ninety-some path instructions made of five subpaths

Array Index Selector

There are three ways to select and view an individual path array instruction

1. directly selecting points in the shape preview on the left
2. plus and minus buttons next to the Array Index below the shape preview
3. selecting a list item in the JSON scroll on the right