# Getting Started

Formulas and variables make it possible for designers to make prototypes with interactions that are more dynamic. You are able to define your own variables and create your own formulas where you can use arithmetic operations, variables and functions, and even access layer properties. These all unlock the potential of interactions that are far more dynamic than what you are used to.

### Formula Input

The formula input field is where you can create formulas. You can include layer properties, variables and functions simultaneously in the formula input field. Clicking on the plus icon will help you select the variables and layer properties to autocomplete formulas. ## Basic Tutorials

### Formula

The basics of formulas are explained in this video showing how useful they can be. For example, you can use coordinates of a layer directly in an interaction making it dynamic, instead of using fixed values.

### Variable

The basics of variables are explained in this video showing how easy it is to use them. You have various types of variables that can hold different kinds of values. Subsequently, you can use variables in various ways.

## Examples

### Tab Menu

Besides fixed values, it is possible to use formulas for responses. Layer properties can be utilized when it comes to formulas. The x-coordinate of each “menu” layer is utilized in the formulas for the Move responses, in order to achieve an interaction where the blue layer moves left and right, as seen below. Download Assets

### Spinner

You can use variables to create a simple spinner that increases by one or decreases by one. Download Assets

### Ripple Effect

Coordinates of a point where a touch is registered can be used through predefined variables. In order to create a ripple effect at the exact position where a touch is registered, “\$touchX” and “\$touchY” are used in the Move response of the ripple layer. Download Assets

### Text Input

The text property of the input layer refers to the text that was entered through the input layer. With functions, you are able to combine texts and manipulate texts to your liking. Download Assets

# Variable

As mentioned earlier, as of version 3.9, ProtoPie supports variables. These variables can hold text, number or color values. The value of a variable can be modified using the Assign response, while the Detect trigger would be activated based on any changes that a layer or variable undergoes. You can use variables instead of using fixed values for responses, e.g. Move, Scale, Rotate and others.

Variable for all scenes
A variable for all scenes is a variable that is usable in all scenes in ProtoPie, and it can also be used for interactions between scenes. It is possible for the value of a variable for all scenes to be changed in Scene A, and after jumping from Scene A to Scene B, the changes in the variable would be visible in the new scene.
Variable for this scene only
A variable for this scene only is a variable that is usable only in the scene where the variable is created. This means that a variable created in Scene A cannot be used in Scene B.

## Variable Type

Variables can be one of the three types: a number, text or color type. These variables hold different values based on their type.

Text
A text variable can only hold text as a value. Any number used as a value for a text variable will be treated as text.
Number
A number variable can only hold numbers as a value. Any non-number used as a value for a number variable will result in an error.
Color
A color variable can only hold values in the #FFFFFF format (Hex color code). Any non-color value used as a value for a color variable will result in an error.

## Variable Display

Values of variables can be displayed in the canvas and in Preview. This way, you can make sure that your variables are storing the correct values. ## Predefined Variable

These are variables that have been predefined within ProtoPie.

• `\$touchX` The x-coordinate of a point where a touch is registered.
• `\$touchY` The y-coordinate of a point where a touch is registered.
• `\$touchVelocity` The velocity of a touch using a finger or mouse that is in movement.
• `\$touchVelocityX` The x-component of the velocity of a touch using a finger or mouse that is in movement.
• `\$touchVelocityY` The y-component of the velocity of a touch using a finger or mouse that is in movement.
• `\$touchPointerCount` The number of fingers that are touching the screen.
• `\$keyboardHeight` The height of a native keyboard on a smart device when it is visible.
• `\$deviceOS` The operating system of the device on which the prototype is running.
• `\$pi` Pi (3.141592).
• `\$time` Time after running Pie (seconds). If you want to figure out the time passed since a certain event, you should assign the time when the event occurs to a variable and deduct it from the \$time value.

# Formula Syntax

## Literal Values

Refer to the following syntaxes for using layer names, text, numbers, color values and variables in the formula input field.

### Layer name

Use backticks around the layer name. ### Text

Use single or double quotation marks around the text. ### Text with multiple lines

Add a \n to add a line break between characters or words. ### Number

Use Arabic numbers only; other symbols are not allowed. ### Color

Colors must be expressed in the #FFFFFF format (Hex color code). ### Variable

Use variable names that do not have any symbols in the name. ## Arithmetic operations

The four basic arithmetic operations (+, -, *, /) and remainder calculations are supported.

### Remainder calculations (%)

Remainder calculations are done to derive the remainder of a division operation by using the % operative. For example, 5%2 would result in 1 as the remainder in that operation is 1.

## Text functions

While arithmetic operations apply to numbers only in most cases, addition can be done with texts. When a text is “added” to another text, the end result is a new text with the two texts combined together. For example, adding “2” to “1” would result in the new text “12”.

### Text + Text `➔ "helloworld"` `➔ "12"`

### Text + Number `➔ "hello1234"`

# Layer Property

A layer’s property, like coordinates or size, can be used for variables.

• ``layerName`.x` The x-coordinate of a layer.
• ``layerName`.y` The y-coordinate of a layer.
• ``layerName`.width` The width of a layer.
• ``layerName`.height` The height of a layer.
• ``layerName`.scaleX` The scale factor X of a layer.
• ``layerName`.scaleY` The scale factor Y of a layer.
• ``layerName`.rotate` The rotate value of a layer.
• ``layerName`.opacity` The opacity value of a layer.
• ``layerName`.radius` The radius value of a layer.
• ``containerName`.scrollOffset` The current scroll value.
• ``layerName`.color` The Hex color code of a layer.
• ``layerName`.fillOpacity` The fill opacity value of a layer.
• ``layerName`.text` The text in a text layer.

# Functions

## Text Manipulation

• `length(source: TEXT)``NUMBER`
• Calculates the number of characters in a text.
• e.g. `length("hello") ➔ 5`
• `left(source: TEXT, count: NUMBER)``TEXT`
• Extracts a number of letters from a text, starting on the left side.
• e.g. `left(“hello”, 3) ➔ “hel”`
• `right(source: TEXT, count: NUMBER)``TEXT`
• Extracts a number of letters from a text, starting on the right side.
• e.g. `right(“hello”, 3) ➔ "llo”`
• `concat(source1: TEXT, source2: TEXT)``TEXT`
• Joins two separate texts into one text.
• e.g. `concat("hello", "world") ➔ "helloworld"`
• `replace(source: TEXT,from: TEXT, to: TEXT)``TEXT`
• Replaces a part of a text with another text.
• e.g. `replace("helloworld","world", "protopie") ➔ "helloprotopie"`
• `trim(source: TEXT)``TEXT`
• Removes whitespace on either side of a text.
• e.g. `trim(" helloworld ") ➔ "helloworld"`
• `ltrim(source: TEXT)``TEXT`
• Removes whitespace from the left side of a text.
• e.g. `ltrim(" helloworld ") ➔ "helloworld "`
• `rtrim(source: TEXT)``TEXT`
• Removes whitespace from the right side of a text.
• e.g. `rtrim(" helloworld ") ➔ " helloworld"`
• `indexOf(source: TEXT, searchValue: TEXT)``NUMBER`
• Returns the position of the occurrence of the searchValue in a text. This method returns -1 if searchValue never occurs.
• e.g. `indexOf("hello world", "world") ➔ 6`
• `lowerCase(source: TEXT)``TEXT`
• Converts a text to lowercase.
• e.g. `lowerCase("Hello") ➔ "hello"`
• `upperCase(source: TEXT)``TEXT`
• Converts a text to uppercase.
• e.g. `upperCase("Hello") ➔ "HELLO"`
• `lpad(source: TEXT, length: NUMBER, padString: TEXT)``TEXT`
• Add padString on the left side of a text to match the chosen length.
• e.g. `lpad(5, 2, "0") ➔ "05"`
• `rpad(source: TEXT, length: NUMBER, padString: TEXT)``TEXT`
• Add padString on the right side of a text to match the chosen length.
• e.g. `rpad(5, 2, "0") ➔ "50"`
• `repeat(source: TEXT, count: NUMBER)``TEXT`
• Repeat a text at count times.
• e.g. `repeat("hello", 3) ➔ "hellohellohello"`

## Math

• `min(source1: NUMBER, source2: NUMBER)``NUMBER`
• Returns the smallest of two numbers.
• e.g. `min(0, 1) ➔ 0`
• `max(source1: NUMBER, source2: NUMBER)``NUMBER`
• Returns the largest of two numbers.
• e.g. `max(0, 1) ➔ 1`
• `abs(source: NUMBER)``NUMBER`
• Returns the absolute value of a number.
• e.g. `abs(-1) ➔ 1`
• `round(source: NUMBER)``NUMBER`
• Returns the rounded value of a number.
• e.g. `round(1.5) ➔ 2`
• `floor(source: NUMBER)``NUMBER`
• Returns the largest integer value smaller than or equal to a number.
• e.g. `floor(1.5) ➔ 1`
• `ceil(source: NUMBER)``NUMBER`
• Returns the smallest integer value larger than or equal to a number.
• e.g. `ceil(1.5) ➔ 2`
• `sqrt(source: NUMBER)``NUMBER`
• Returns the square root of a given number. If the number is negative, an error occurs.
• e.g. `sqrt(9) ➔ 3`
• `pow(source1: NUMBER, source2: NUMBER)``NUMBER`
• Calculates the first number raised to the power of the second number.
• e.g. `pow(2, 3) ➔ 8`
• `sin(radian: NUMBER)``NUMBER`
• Returns the sine of a number.
• e.g. `sin(90) ➔ -0.89`
• `cos(radian: NUMBER)``NUMBER`
• Returns the cosine of a number.
• e.g. `cos(90) ➔ -0.45`
• `tan(radian: NUMBER)``NUMBER`
• Returns the tangent of a number.
• e.g. `tan(45) ➔ 1.62`
• `asin(value: NUMBER)``NUMBER`
• Returns the arcsine of x, in radians.
• e.g. `asin(0) ➔ 0`
• e.g. `asin(1) ➔ 1.5707963267948966(PI / 2, 90°)`
• `acos(value: NUMBER)``NUMBER`
• Returns the arccosine of x, in radians.
• e.g. `acos(0) ➔ 1.5707963267948966(PI / 2, 90°)`
• e.g. `acos(1) ➔ 0`
• `atan(value: NUMBER)``NUMBER`
• Returns the arctangent of a number.
• e.g. `atan(0) ➔ 0`
• e.g. `atan(1) ➔ 0.7853981633974483(PI / 4, 45°)`
• `random()``NUMBER`
• Returns a random number between 0 and 1.
• e.g. `random() ➔ a random number between 0 and 1`
• `random(min: NUMBER, max: NUMBER)``NUMBER`
• Returns a random number between two given numbers.
• e.g. `random(1, 5) ➔ a random number between 1 and 5`
• `randomInt(min: NUMBER, max: NUMBER)``NUMBER`
• Returns a random integer value between two given numbers.
• e.g. `randomInt(1, 5) ➔ a random number between 1 and 5(integar)`
• `sign(value: NUMBER)``NUMBER`
• Returns 1 if the number is a positive number.
Returns -1 if the number is a negative number.
Returns 0 if the number is 0.
• `atan2(x: NUMBER, y: NUMBER)``NUMBER`
• Returns the angle in the plane (in radians) between the positive x-axis and the ray from (0,0) to the point (x,y).
• `degrees(radians: NUMBER)``NUMBER`
• Convert radians to degrees.
• `radians(degree: NUMBER)``NUMBER`
• Convert degrees to radians.

## Color

• `color(red: NUMBER, green: NUMBER, blue: NUMBER)``COLOR`
• Returns a color value (Hex color code) based on the RGB value.
• e.g. `color(255, 255, 255) ➔ #FFFFFF`
• `red(source: COLOR)``NUMBER`
• Returns the red RGB value of a color code.
• e.g. `red(#FF0000) ➔ 255`
• `green(source: COLOR)``NUMBER`
• Returns the green RGB value of a color value (Hex color code).
• e.g. `green(#FF0000) ➔ 0`
• `blue(source: COLOR)``NUMBER`
• Returns the blue RGB value of a color value (Hex color code).
• e.g. `blue(#FF0000) ➔ 0`

## Type Conversion

• `text(source: NUMBER)``TEXT`
• Converts a number to a text.
• e.g. `text(1234) ➔ "1234"`
• `number(source: TEXT)``NUMBER`
• Converts a text to a number. If the text is not a number, an error occurs.
• e.g. `number("1234") ➔ 1234`
• `color(source: TEXT)``COLOR`
• Converts a text to a color value. The text must be in the form of a Hex color code (#FF0000), and if it isn’t, an error occurs.
• e.g. `color("#FFFFFF") ➔ #FFFFFF`
• `format(value: NUMBER, format: TEXT)``TEXT`
• Converts a number into a text. The number can be split into separate texts made up of any number of digits. Furthermore, numbers with decimals can be expressed, and the number of digits following a decimal point can be designated.
number: the number that is to be converted into a text.
formatText: the text that will be made up of the number. # is the placeholder for integers and 0 is a placeholder for fractional numbers. Additional numbers can be inserted into the text.
• e.g. `format(1234.567, "#,###.00") ➔ 1,234.58`
• e.g. `format(1234567, "#,###.00") ➔ 1,234,567`
• e.g. `format(1234.567, "#.###,00") ➔ 1.234,57`
• e.g. `format(1234.567, "#,##.00") ➔ 12,34.57`
• e.g. `format(1234.567, "#,###") ➔ 1,235`
• e.g. `format(1234.567, "#") ➔ 1235`
• `layer(source: TEXT).layerProperty``TEXT or NUMBER`
• Refer to a layer.
• e.g. `layer("Rectangle 1").x ➔` Get the x value of a layer called Rectangle 1
Language selector
TOP