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 xcoordinate 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.
Spinner
You can use variables to create a simple spinner that increases by one or decreases by one.
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.
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.
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 nonnumber 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 noncolor 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 xcoordinate of a point where a touch is registered. 
$touchY
The ycoordinate 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 xcomponent of the velocity of a touch using a finger or mouse that is in movement. 
$touchVelocityY
The ycomponent 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
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 xcoordinate of a layer. 
`layerName`.y
The ycoordinate 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`.scroll
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.
Function
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"
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)
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.
green(#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

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.