jz.
Let’s talk ↗
↖ THE NOTEBOOK

BUILD NOTE 03 / INTERACTION & CRAFT

Motion that knows
when to rest.

A small canvas study, a folding surface, and the decision to stop drawing when nothing is changing.

JIAHANG ZHANG2 MIN READRSS ↗

The small experiment

The surface on this site is a small experiment in turning a mathematical structure into something you can feel. Pointer movement changes the view. Arrow keys provide another way to explore it. The Unfold button reveals the flat grid behind the shape.

The geometry is a polynomial surface projected onto a two-dimensional canvas. A single fold value moves it between the curved form and the plane. Rotation, a little perspective, and depth-sensitive lines give the drawing its spatial character.

Keep the work bounded

The vertices and their surface offsets are prepared once. Each interaction projects that existing data into reusable screen buffers. Rotation coefficients are calculated once per draw, and lines are sorted by depth before they are painted.

This keeps the work inside a frame focused on what actually changed: the fold and the view. The shape stays the same; there is no reason to rebuild its source geometry every time the pointer moves.

// A frame moves the current state toward its target.
fold += (targetFold - fold) * 0.085;
yaw += (targetYaw - yaw) * 0.075;
pitch += (targetPitch - pitch) * 0.075;

Stop when the state settles

The animation loop runs while the current state is approaching a target. When the difference becomes small enough, it stops requesting frames. Another interaction can wake it again.

Drawing also pauses when the canvas is offscreen or the document is hidden. With reduced motion, changes apply immediately. These decisions make animation a response to attention rather than a continuous background task.

THE INTERACTION CONTRACT

Respond when invited. Settle into place. Leave the reader room to continue.

Give the experiment a place

A decorative object benefits from a little context. Here it is a visible example of code becoming an interface: structure in the grid, movement in the interaction, and a clear way to see how the two relate.

The lab page gives the study more room, with the same keyboard controls and motion preferences as the rest of the site. It is a small piece of the website, but it follows the same expectation as the larger tools: an interaction should feel considered from the first input through the moment it comes to rest.

Follow the thread

Surface and projection implementation ↗
KEEP EXPLORINGOpen the interactive study