A dial turns. A line rises.
A tree leans into an imagined breeze.
One shared rhythm connects them.
Drag around the dial, or use the arrow keys.
Scrubbing pauses the clock so you can look closer.
s = 0.55 × sin(θ − 0°)+0.39Together: the tree follows the sine of the dial’s angle.
THE IDEA / MOTION WITH A COMMON CAUSE
A circular dial, a plotted line and a swaying tree can feel like one instrument. Their connection comes from sharing a single value: where we are in a repeating cycle.
Build a split-panel instrument: nature and fine curves on one side, a calibrated disc on the other. A shared phase connects both views.
The tree is a procedural illustration. Its wind signal is invented for this lesson, not extracted from a photograph or measured in nature.
Choose a cycle duration, T. Divide elapsed time by T to find our progress through a turn. The fractional part repeats from 0 up to 1. Multiply by 2π to turn that progress into an angle.
The dial makes this invisible value visible. At 0° the marker is at the top; at 90° it is on the right. A full turn returns every linked element to its starting point.
Our dial’s horizontal position is proportional to sin(θ). As the marker goes around, this coordinate moves smoothly between −1 and 1. Draw those values along a time axis and a sine wave appears.
The graph uses the same sine, with amplitude A. Its orange dot marks the current phase. The tree’s upper branches lean with that dot’s value; the trunk base stays anchored.
Amplitude controls the size of the response. Phase offset controls when it happens. Subtract an offset, φ, to delay the tree and its curve relative to the dial.
At 90° of delay, the response follows a quarter-cycle later. At 180°, its sign is reversed: when the undelayed signal leans right, the delayed one leans left. The thin dotted curve is the undelayed reference.
Set the sway amount to zero. The line flattens and the tree rests, while the clock keeps turning. Distance and timing are independent controls.
Read one animation timestamp and calculate one phase. Then update the dial, graph and tree from that phase in the same frame. Avoid giving each element a separate timer that can drift.
Use elapsed time rather than a fixed amount per frame, so a fast display does not make the animation run faster. This instrument freezes when paused, hidden or offscreen, and resumes from the same point. Reduced-motion preferences start it paused; the dial and sliders still work.
YOUR TURN / A RHYTHM YOU CAN EXPLAIN
Choose Together, a ten-second cycle and a small sway. Now introduce a 90° delay. The response is 2.5 seconds behind the clock.
Pause at 90°. With no delay, the tree leans furthest right. With a 90° delay, it is at rest. Can you predict its position before moving the slider?
Back to the instrument ↑// One shared phase, updated from elapsed seconds.
phase = (phase + deltaSeconds / cycleSeconds) % 1;
const theta = phase * 2 * Math.PI;
const phi = delayDegrees * Math.PI / 180;
const signal = amplitude * Math.sin(theta - phi);
// Dial position. Screen y increases downwards.
const x = cx + radius * Math.sin(theta);
const y = cy - radius * Math.cos(theta);
// The base stays fixed; the crown moves more.
const shift = maxSway * signal * heightFraction ** 2;This height-dependent bend is an illustration technique, not a physical simulation of branches or wind. A full turn uses radians internally; the controls display degrees.