Coming From Code

See how Origami differs from programming.

Using functions and adding logic to your prototypes is straightforward in Origami, but a little different to what you might expect if you come from a programming background. If you haven’t touched code before, feel free to skip forward to Adding Logic.

Patches and functions

The basic building blocks in Origami are called patches. They are similar to functions as far as they take data input(s), perform an action on it, and produce a result.

function name(input1, input2, input3) {
  code to be outputted
The format of a function in code.

Origami patches work in the same way; taking a single or multiple input(s), performing an action, and producing an output — albeit using a slightly different format.

A function in Patch format in Origami Studio.
A function in Patch format in Origami Studio.

What makes Origami unique is the suite of pre-made patches that allow you to listen for various types of interaction, create natural animations, manipulate layer properties, and more. Just like functions in code, you can also create your own patches.

Inputs and outputs

We are using an example of converting Fahrenheit to Celsius. Fahrenheit being our Input value, and Celsius being our returned value, or Output.

In programming languages such as JavaScript, this calculation would look something like this:

function fahrenheitToCelsius(fahrenheit) {
    return (5/9) * (fahrenheit-32);
var text = fahrenheitToCelsius(86);
A JavaScript function converting Fahrenheit to Celsius.

Calculations done in patches are hidden from view by default. The patch simply presents the published Input(s) and Output(s).

An Origami patch converting Fahrenheit to Celsius.
An Origami patch converting Fahrenheit to Celsius.

Entering this custom-made patch through Patch > Enter Patch Group reveals the same calculations as in code.

Inner workings of the Fahrenheit to Celsius patch.
Inner workings of the Fahrenheit to Celsius patch.

One important thing to take note of is the order of calculations. Code usually follows the traditional order of mathematical operations; prioritizing some operators (/,*) over others (+, -). Origami simply calculates from the order in which the patches are connected.

Multiple outputs

Returning multiple outputs is easy in Origami. This means patches can be used beyond what functions are typically used for. As an example, here is our temperature calculating patch going beyond Fahrenheit to Celsius:

Temperature conversion patch outputting multiple outputs.
Temperature conversion patch outputting multiple outputs.

Values calculated inside the patch simply need to be published as outputs:

Inner workings of the Fahrenheit to Multiple patch.
Inner workings of the Fahrenheit to Multiple patch.

Logic and conditionals

Logic in code, called conditionals, is a little different from the way Origami handles logic. Code usually runs linearly from top to bottom, and requires calculations to be done before moving to the next line.

In Origami’s visually-focused Patch Editor, information flows from left to right (including logical operations), depending on what is being interacted with and/or triggered. For that reason, you won’t find patches analogous to if, else, else if, or while found in code. Instead, information passed through patches (usually from an interaction) will only continue to flow unless the comparison is false.

Doing math

Math in Origami is largely the same as arithmetic operators in code. Origami has patches for most standard operators.

Simple arithmetic in code.
Simple arithmetic in Origami.
Simple arithmetic in Origami.

Comparing items

Origami is able to take values and output a true or false boolean value, similar to comparison operators in code.

Simple comparisons in code.
Simple comparisons in Origami.
Simple comparisons in Origami.

Comparing with logic

This is where things start to diverge. Origami has built-in patches which allow for common logic to be done quickly and easily. For example:

Comparison in code.
Comparing with logic in Origami.
Comparing with logic in Origami.

In code, a logical operator is usually paired with a comparison operator (as shown above). Origami makes it easy to make comparisons with dedicated patches for common logic:

Comparison operators in code.
Comparison operators in Origami.
Comparison operators in Origami.

These patches are useful for checking conditionals—similar to if or else. Take an example of checking to see if a calculation is true:

if (3>2 && (2==3||2<3) && 2!=>3) {
  code to be executed if true

Origami takes the information flowing left to right (analogous to 3>2 && (2==3||2<3) && 2!=>3 above) and outputs either true or false, represented by the output on the And patch:

Chaining multiple calculations can become complex and difficult to manage in code. This task becomes intuitive and flexible when built in Origami.

Next Up

Adding Logic

Add logic to your transitions and flows.