# 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:
```javascript
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:
```javascript
follow: {
    x: '$mouseX + 10',
    y: '$mouseY'
}
```

### Centering Math
You can calculate the center manually if needed:
```javascript
centered: {
    x: '($screenW / 2) - 25', // Assuming width is 50
    w: 50
}
```

### Rainbow Color
Using `hsv()` to cycle through colors over time:
```javascript
rainbow_box: {
    type: 'rectangle',
    w: 100, h: 20,
    color: 'hsv(time * 0.3, 1, 1)'
}
```