Patches

Patches are the building blocks of Origami Studio. Play with your ideas and iterate with incredible speed.

Patches allow you to add interaction, animation, and behavior to your prototype. Each patch performs a unique function and can pass and receive information to and from other patches.

The patch library contains a large number of patches, but a core set of 15-20 patches will support most prototypes. They all have single key Keyboard Shortcuts to enable super fast iteration.

Patches range from simple math patches:

… to patches that add interactions to layers:

… to patches that manage states:

… to patches that control layer properties:

Ports

Ports allow patches to receive information in and pass information back out. The ports on the left side of a patch are inputs, and the ones on the right are outputs. Edit Inputs by clicking the port’s value (unless a cable from another patch is connected to the Input already).

Each port has a different type of information it can receive — the important types of values used in Origami are:

• Number: An integer or decimal.
• Boolean: A boolean value, which can have two possible values (ex: true/false, yes/no, on/off, 0/1). Boolean ports are often labeled On/Off, and the On value is represented with a checkmark. Similar to programming, a boolean can be converted to a number 0 (off) or 1 (on) when passing values between patches.
• Text: Any text string.
• Image: Any image that you drag or paste.
• Video: Any video that you drag or paste.
• Sound: Any sound that you drag or paste.
• Color: Any RGB or HSL color.
• Index: Any non-negative, integer (ex: 0, 1, 2)
• JSON Data: Any number of values of any type in JSON format. JSON (JavaScript Object Notation) is a common format for storing and exchanging data.
• Point: A value that represents numbers in 2D, 3D, or 4D. Points can represent any set of X, Y, Z values (ex: Position X, Y, Z; Rotation X, Y, Z).

Some patches can change the number of ports it has or the type of value it supports. Right-click any patch to see the options available.

Cables

Cables pass information (values) from patch to patch via their ports. Think of values like water, and cables as the pipes that move it from place to place. The values flow in one direction: left-to-right from an output to an input.

To create a cable, drag from an output port (on the right of a patch) to an input port (on the left of a patch). To disconnect a cable, drag the right end out of the Input port.

An output port may connect to multiple cables, but an input port can only accept one cable at a time. Use patches like math (+, -, x, /), logic (Or, And, Not), Transition, or Option Picker to combine or select from multiple cables. Quickly connect an output to multiple inputs by selecting the output, and shift-clicking the inputs you want to connect.

Connecting them together

In the example below, three different patches pass values to each other with cables that are connected to their ports. Together, the patches describe a touch down interaction that switches a layer on and off.

Summary

• Patches let you quickly add interaction, animation, and behavior to your prototype.
• A patch can have inputs and outputs that let it communicate with other patches.
• There is a large library to support building any idea. For most prototypes, you only need to know about 15-20.
• Learn keyboard shorcuts to speed up your workflow.