Expressions and Animations

Expressions & Animations

Numeric properties in PainterJS can be strings containing mathematical formulas. These formulas are evaluated on the client every single frame. As of 1.2.0, color properties also accept expressions, enabling dynamic color cycling and effects.

Built-in Variables

Variable	Description
$screenW	Width of the game window.
$screenH	Height of the game window.
$mouseX	Mouse X position.
$mouseY	Mouse Y position.
$delta	Render partial tick (0.0 to 1.0).
$time / time	Total time elapsed in seconds (both forms work).

Math Functions

Standard math functions: sin(), cos(), abs(), min(), max(), sqrt(), pow(), floor(), ceil(), round(), log(), rad(), deg(), random().

Color Functions

Function	Description
rgb(r, g, b)	Converts 0.0-1.0 RGB values to an ARGB integer (alpha = 1.0).
hsv(h, s, v)	Converts HSV values (0.0-1.0) to an ARGB integer. Great for rainbow effects.

Custom Variables

You can reference any variable you've set via Painter.vars.set() by prefixing it with a $.

Examples

Pulsing Size

A box that changes size smoothly over time:

pulse: {
    w: '50 + sin(time * 3) * 10',
    h: '50 + sin(time * 3) * 10'
}

Following the Mouse

A box that stays 10 pixels to the right of the mouse:

follow: {
    x: '$mouseX + 10',
    y: '$mouseY'
}

Centering Math

You can calculate the center manually if needed:

centered: {
    x: '($screenW / 2) - 25', // Assuming width is 50
    w: 50
}

Rainbow Color

Using hsv() to cycle through colors over time:

rainbow_box: {
    type: 'rectangle',
    w: 100, h: 20,
    color: 'hsv(time * 0.3, 1, 1)'
}