GLASSBOX
A COMPILER YOU CAN SEE THROUGH

AN EXERCISE IN MAKING THINGS VISIBLE

A program, made visible.

From a few lines of thought to a living pattern.
Write it. Take it apart. Watch it happen.

EXPERIMENT
sunflower.glass
Compiled successfullyLn 1, Col 1

Editable Glass source. Click a line number to set a breakpoint. Command or Control Enter runs. F9 steps one instruction. F10 steps one statement. Tab moves focus; use Control ] to indent.

STACK MACHINE—
Live canvas
0, 0640 × 640 Your program draws on a 640 by 640 canvas. FIG. 01 / PHYLLOTAXIS+640, +640
COMPUTED
240 shapes
TRY THIS
Go back. Look closer.Scrub back through execution.
LIVE0 / 0 instructions
1 exact checkpointLocals, stack & canvas travel together. Checkpoints are sampled. Limit: 1,600.

In scope

Operand stack

0 VALUES
CALL STACK
PRINT—

Execution trace

CLICK TO REWIND
TAKE THE MACHINE APART

Good programs are interesting.
Broken ones can teach you more.

GLASSBOX / FIELD NOTES

A little language.
A lot to look inside.

Glass is deliberately small. Numbers, booleans, strings, and a few drawing tools. Every stage you see is computed from your current source.

Keep a value

let turn = 137.5;
turn = turn + 1;

Variables belong to their block. Use // for comments. End statements with ;.

Choose & repeat

while (i < 10) {
  if (i % 2 == 0) { print(i); }
  else { print(false); }
  i = i + 1;
}

Conditions must be booleans. && and || short-circuit.

Name a thought

fn square(x) {
  return x * x;
}
print(square(12));

Top-level functions can recurse and read globals. No explicit return means 0.

Put it on paper

paper("#142624");
ink(hsl(38, 60, 72), 0.8);
circle(320, 320, 80);
frame();

The canvas is 640 × 640. frame() presents a drawing step during animated runs.

Drawing & math

paper(color) · clear()Clear the canvas; paper also sets its background.
ink(color, opacity?)Set the color and optional opacity from 0 to 1.
circle(x, y, radius)Draw a filled circle.
line(x1, y1, x2, y2, width)Draw a line.
rect(x, y, width, height)Draw a filled rectangle.
hsl(hue, saturation, lightness)Create a color. Hue in degrees, other values in percent.
sin · cos · sqrt · abs · radiansOne numeric argument. Trigonometry uses radians.
floor · ceil · round · min · maxRounding takes one argument; min and max take two.
print(value)Send a value to the output log.

Precedence, strongest first

() → ** → ! + − unary → * / % → + − → < <= > >= → == != → && → ||

The debugger

Click a source line number to toggle a breakpoint. F9 executes one instruction; F10 advances to the next statement; ⌘ / Ctrl Enter runs or pauses. Shift F10 resets execution. The timeline restores exact retained states. Run after rewinding to create a new future.

Limits: 60,000 instructions · 32 call frames · 2,000 shapes · 300 printed values · 24,000 source characters. The editor and debugger remain usable after a limit is reached.

 Hosted byhere.now