Drawing

Drawing statements control which pixels on the grid receive color. They are processed in the order they appear in the source, so later statements overwrite earlier ones.

draw

The draw statement colors every pixel where the condition evaluates to true.

draw <condition> with <color>

Examples:

// draw a single pixel
draw x = 3 and y = 5 with #e84a00

// draw a horizontal line
draw y = 0 with #b0a090

// draw a filled circle using a math expression
draw (x - 8) ^ 2 + (y - 8) ^ 2 < 16 with #5a3018

// draw using a named color
draw x > 0 and x < 15 with color warm

The condition must be a boolean expression. Using a numeric expression as a condition produces an error.

erase

The erase statement removes color from every pixel where the condition is true, setting those pixels back to transparent.

erase <condition>

Examples:

// erase the top row
erase y = 0

// erase a rectangular region
erase x > 0 and x < 4 and y > 0 and y < 4

clear

The clear statement removes all pixels from the entire grid, resetting everything to transparent.

clear

This is useful when you want to start fresh partway through a program.

Execution order

Statements execute top to bottom. This means:

• A draw overwrites any previous color at the same position.
• An erase after a draw removes those pixels.
• A clear resets the entire grid, regardless of what was drawn before.

grid 9 by 9

// fill the entire grid
draw x = x with #e8ddd0

// erase the border
erase x = 0 or x = 8 or y = 0 or y = 8

// draw only the corners
draw (x = 0 or x = 8) and (y = 0 or y = 8) with #e84a00

export "order" in png scale 16

copy

Copy a rectangular region of the grid to another position. The original pixels remain in place.

copy (<x1>, <y1>) to (<x2>, <y2>) at (<dx>, <dy>)

circle (4, 4) radius 3 with #e84a00
copy (1, 1) to (7, 7) at (8, 1)

move

Move a rectangular region of the grid to another position. The source region is erased after the pixels are placed at the destination.

move (<x1>, <y1>) to (<x2>, <y2>) at (<dx>, <dy>)

circle (4, 4) radius 3 with #e84a00
move (1, 1) to (7, 7) at (8, 1)

layer

A named block that groups drawing statements onto an isolated grid. clear and erase inside a layer only affect that layer. Layers are composited in the order they appear — later layers are drawn on top.

layer background {
    rectangle (0, 0) to (15, 15) with #87CEEB
}

layer character {
    circle (8, 8) radius 3 with #e84a00
}

An export inside a layer block exports only that layer. An export outside any layer exports all layers composited. In SVG output, each layer becomes a <g> element with the layer name as its id.

mirror

A block that draws its contents and also their reflection across a two-point axis.

mirror (0, 8) to (15, 8) {
    circle (4, 4) radius 3 with #e84a00
}

The two points define the axis line. Any two points on the grid are valid, enabling horizontal, vertical, diagonal, or arbitrary-angle mirroring.

frame

Capture the current grid state as an animation keyframe. Each frame requires a delay in milliseconds. Use with export in gif to produce an animated image.

circle (4, 4) radius 1 with #e84a00
frame 200

circle (4, 4) radius 2 with #e84a00
frame 100

circle (4, 4) radius 3 with #e84a00
frame 500

export "grow" in gif

The grid accumulates between frames. Use clear to reset explicitly. If frame statements are present but no animated export is used, the compiler emits a warning.