a PaintCode - Expression Language

Expression Language

In PaintCode, you can define variables that depend on other variables using our simple Expression Language. It supports many of the mathematic and logical functions and operators that most programmers expect. The syntax is simple, a subset of both C and JavaScript.

Just create a new variable of kind Expression and write an expression into the text view. Value of the new variable will be calculated and updated automatically.

After you export your PaintCode document, these variable expressions are transformed into the programming language you chose (Objective-C, Swift, C#, JavaScript and Java). The calculations and dynamic relationships between variables that they define will keep working in the exported code.

Types of variables

Numbers

All numbers in PaintCode are floating points. These expressions return numbers:

5 
5 * 4 + 3 * 2 

You can easily reference other variables in expressions. The language also has some built-in functions you can call:

width * (4 - offset)
sin(2.7 / PI * 180)
sqrt(width * width + heigt * height)

Texts

Text variables are strings of unlimited length. You can use either double quote " or single quote ' as text qualifiers:

"This is text!"
'This is also text, now using single quotes.'

Texts can be concatenated using the + operator. Number can be converted to text using the stringFromNumber(x) function.

"angle: " + stringFromNumber(180)

You can use the dot-notation to access the length (number of letters) of the text. This returns a Number.

"Hello".length

Booleans

Boolean variables are used to represent logical values - true and false. Alternative, you can also use (YES, yes, NO, no) constants.

The result of comparisons are always booleans. Examples of expressions that return booleans:

true
3 > 2
"hello" != "world"
mousePosition.x >= activeRect.x &&
mousePosition.y >= activeRect.y &&
mousePosition.x <= activeRect.x + activeRect.width &&
mousePosition.y <= activeRect.y + activeRect.height

You can also use the ternary ?: operator to return one of two values, depending on the value of the first argument. The second and the third arguments have to be of the same type (in this case, texts):

isValid ? "Valid" : "Invalid"

Point

Create new point using the makePoint(x, y) function:

makePoint(10, 20)

Let's assume you have a point variable (called myPosition) and want to use the x-coordinate of the point in your expression. Use the dot notation like this:

myPosition.x + 100

Here's how you can compute the point in the middle between two points called "positionA" and "positionB":

makePoint((positionA.x + positionB.x) / 2,
          (positionA.y + positionB.y) / 2)

Size

Size is similar to point. It also consists of two numbers, but they are called width and height. Its main purpose is to represent size of a rectangle.

 makeSize(10, 20) 

Let's assume you have defined a size variable called defaultSize and a numeric variable zoom. Now you want a new size with enlarged width by factor zoom:

makeSize(zoom * defaultSize.width, defaultSize.height)

Rectangle

Rectangle variable consists of four numbers: x, y, width, height. There is a function makeRect(x, y, width, height) for creating a rectangle value. Width and height represent size of the rectangle and (x, y) is its origin.

makeRect(0, 0, 640, 1136)

Let's assume you have a rect called iPhoneBounds. Not only can you easily access the individual components (x, y, width, height), you can also get the size or origin of the rectangle:

iphoneBounds.size

These two expressions are equivalent:

iphoneBounds.origin.x + iphoneBounds.size.width

iphoneBounds.x + iphoneBounds.width

Color

Color is represented by four numbers: red component, green component, blue component and alpha component. Each component is from interval 1. Create colors using the makeColor(r, g, b, a) function. The following expression returns solid yellow color:

makeColor(1, 1, 0, 1)

Colors defined in your library can also be used in expressions (for example, to return one of two colors based on whether a button is pressed). However, be careful when referencing colors (and other library items such as gradients and shadows) in your expressions. They can have arbitrary names, but names of variables are restricted:

Names of your colors may contain spaces, accents and symbols (e.g. "Dialog Background Color"), but when referring to them from script, use "sanitized" form as in this example:

Some examples of original and sanitized library item identifiers:

original item name sanitized item name
myColor myColor
Bézier Color bezierColor
button-background buttonbackground
button_background 1 button_background1
$a%#^(4)@ a4
Extrémité extremite

Gradient

To create a two step gradient, use the makeGradient(color1, color2) function. The red-to-transparent gradient can be defined as follows:

makeGradient(makeColor(1, 0, 0, 1), 
             makeColor(1, 0, 0, 0))

Or, if you already have the two colors, you can just do this:

makeGradient(solidRedColor, transparentRedColor)

Shadow

To create a shadow, use the makeShadow(color, offsetX, offsetY, blur) function.

makeShadow(solidRedColor, 5, 5, 3)

Operators

Operators arranged by their priorities:

operator type result
!b boolean logical negation of b
x * y numbers product of numbers x and y
x / y numbers quotient of numbers x and y
x % y numbers remainder after performing division of x and y; modulus
m + n texts concatenation of the texts m and n
x + y numbers sum of numbers x and y
x - y numbers difference of x and y
x > y numbers true if x is greater than y, false otherwise
x >= y numbers true if x is greater than or equal to y, false otherwise
x < y numbers true if x is less than y, false otherwise
x <= y numbers true if x is less than or equal to y, false otherwise
a == b same type true if a is equal to b, false otherwise
a != b same type true if a is not equal to b, false otherwise
a && b booleans true if a and b both true, false otherwise
a || b booleans false if a and b both false, true otherwise
b ? x : y b - boolean
x, y - same
if b is true, result is x, otherwise result is y

Constants

Basic Math Functions

floor(x)

returns x rounded downwards

ceil(x)

returns x rounded upwards

round(x)

returns x rounded to nearest integer

frac(x)

returns the fractional part of x

sqrt(x)

returns the square root of x

abs(x)

returns the absolute value of x

min(x, y)

returns the smaller of the two parameters

max(x, y)

returns the larger of the two parameters

pow(x, y)

returns the x raised to the power of y

log(x)

returns the natural base logarithm of a number

log2(x)

returns the base 2 logarithm of a number

log10(x)

returns the base 10 logarithm of a number

Goniometric Functions

sin(a), cos(a), tan(a)

goniometric functions.
Note: parameter a should be in degrees

atan2(y, x)

arc tangent in degrees of y/x based on the signs of both values to determine the correct quadrant

Colors, gradients and shadows

makeColor(r, g, b, a)

returns color with components r, g, b, a (red, green, blue, alpha). All parameters should be from interval 0..1

makeGradient(c1, c2)

returns two step gradient with colors c1 and c2

makeShadow(color, xOffset, yOffset, blurRadius)

returns shadow

Other Functions

makePoint(x, y)

returns point

makeSize(width, height)

returns size

makeRect(x, y, width, height)

returns rect with position of origin (x, y) and size (width, height)

stringFromNumber(x)

converts number x to text