↩

Shapes

Shapes

Life getting you down? Calm your nerves with the soothing power of shapes.

Controls

hold W A S D or dragsteer
hold Q Eroll counterclockwise or clockwise
wheel, pinch, + −zoom
[ ]previous or next shape
, .previous or next effect
Rreroll
Spacepause
Llights
Ithis panel

Effects

A canvas has no sense of depth. It paints each new shape over what is already there. Showing which face is in front is up to the program.

Seven ops need a destination to act on: source-in, source-out, source-atop, destination-in, destination-out, destination-atop, copy. On empty canvas they draw nothing or plain shape. These draw onto gray transparency grid filled inside shape's outline. Faces are inset so grid shows between them.

Math

Glossary

Composite operation
The rule for mixing a new drawing with what the canvas already holds. The canvas has 26.
Source
What is being drawn now. Here a face or the whole shape.
Destination
What the canvas holds before the source lands.
Alpha
How opaque a pixel is. 0 is clear. 1 is solid.
Porter-Duff ops
The source and destination ops plus xor, copy, and lighter. They decide which pixels survive by alpha alone. Named for the 1984 paper by Porter and Duff that set them out: Compositing Digital Images.
Blend modes
Multiply through luminosity. They mix the colors where source and destination overlap.
Vertex, edge, face
A corner, the line between two corners, and a flat polygon bounded by edges.
Culling
Skipping faces that point away from the eye.
Painter's algorithm
Drawing far faces first so near ones cover them.
Perspective
Dividing by depth so far points crowd toward the middle.
Quaternion
Four numbers that hold a rotation without drift or gimbal lock.

Credits

Original rotation adapted from a gist by Thomas Darimont.

Source. Public domain (CC0-1.0).

AI disclosure

Original experiment written 2022. Reworked on October 21st 2026 with Claude Code (Opus 5.5).