Draw My Canvas / studio

Lorenz Attractor

In 1963 Edward Lorenz boiled a layer of heated air down to three numbers and three equations, and found that the smallest change in where they start eventually changes everything. Here a hundred copies of his model start within a millionth of one point. For about half a minute they ride the butterfly as one thread; then they unzip, and by the end of the minute they are scattered over both wings. Then a new hundred are seeded and it happens again.

Plate 34lorenz-63

Waiting for the animation above to load…

What lands in the file, and what the width does

One click writes whatever the animation is drawing at that moment to a PNG, with the drawmycanvas.com mark drawn into the picture rather than laid over it. Leave the width box empty and you get the stage exactly as your browser rasterised it — your window’s width times its device pixel ratio, which is about 1,600 px across from a 1280‑px window on a HiDPI laptop and about 353 px from a 390‑px phone.

Type a width instead, or take a preset, and the frame is redrawn into a canvas that wide: the height follows the stage’s own shape and the mark scales with it. The stage is 16:9 on a wide window and 4:3 below 560 px, so a width of 1200 saves 1200×675 on a laptop and 1200×900 on a phone. 1200 px is the width Open Graph and X link cards are cut from — the canonical card is 1200×630, and a card crops the extra height rather than letterboxing it.

Honest limits. Asking for more pixels than the stage was drawn at resamples pixels that were never drawn: a 1920‑px file exported from a 353‑px phone stage is bigger, not sharper. For a big file that is sharp, use Save as wallpaper: it draws the plate again from scratch at exactly 1179×2556 or 1290×2796 (phones), 1920×1080, 2560×1440 or 3840×2160 (4K), so every line is rasterised at that size and the shape is the screen’s, never stretched. Because the plate restarts, a wallpaper is a fresh run of it rather than the exact frame on screen; it is given as long as the stage has been running, up to 20 seconds, to develop. A very large width is a real memory allocation and a browser is allowed to refuse it; when that happens the line above says so plainly and nothing else on the page changes. Stills are PNG only — no JPEG, no WebP. On browsers that can record video, Record a clip saves 5, 10 or 20 seconds of the running animation as MP4 or WebM (whichever this browser can encode) at the same width, with the mark in every frame. A clip is not a seamless loop, it has no audio, and a width bigger than the stage is resampled rather than sharper — only the wallpaper is redrawn at its size. Where a browser cannot record video the button never appears and a PNG is the only export. And nothing is uploaded: the frame or clip is assembled in your own browser, so no frame of this plate ever reaches us.

Live on an HTML canvas · vanilla JavaScript · no dependencies Open fullscreen

About this piece

A hundred dots start within one millionth of a single point, each one a copy of the same three-equation weather model with a starting state a hair different from the others. They are colour-coded by number, cobalt through to coral, so you can tell them apart once there is something to tell apart. For roughly the first half-minute you cannot: all hundred ride round the butterfly as one bright thread. Then the thread frays, splits at the place where the two wings meet, and within a few seconds the hundred are scattered over both wings, each still obeying exactly the same rule. After 60 seconds the set fades, and a new hundred is seeded where dot number one had got to. The faint line underneath is one long trajectory, 40 time units of it, drawn so the butterfly’s shape is visible while the hundred are still a single dot. The whole thing turns slowly about its vertical axis, once every 150 seconds. A visitor with reduced motion switched on gets one still: the first cycle 40 seconds in, after the split.

Lorenz’s three equations

Edward N. Lorenz published the system in “Deterministic Nonperiodic Flow”, Journal of the Atmospheric Sciences 20(2), 130–141, March 1963 (doi:10.1175/1520-0469(1963)020<0130:DNF>2.0.CO;2; the details here are from its Crossref record). In the form the Wikipedia article on the Lorenz system gives, with its classic parameter values:

dx/dt = σ·(y − x)
dy/dt = x·(ρ − z) − y
dz/dt = x·y − β·z

σ = 10,  ρ = 28,  β = 8/3

The three numbers are a drastically cut-down model of a layer of fluid heated from below (Rayleigh–Bénard convection), reduced to one mode of the flow and two of the temperature. According to the same article, x is the intensity of the convection, y the temperature difference between the rising and the falling currents, and z how far the vertical temperature profile is distorted from a straight line. So the “weather models” in the title are meant literally, if very crudely: each dot is a whole, tiny atmosphere.

The two eyes of the wings

Besides the origin, the system has two points where nothing moves at all, one in the middle of each wing:

C± = (±√(β(ρ − 1)), ±√(β(ρ − 1)), ρ − 1)
   = (±6√2, ±6√2, 27)
   ≈ (±8.485, ±8.485, 27)

A worked check at C+: dx/dt = 10·(8.485 − 8.485) = 0; dy/dt = 8.485·(28 − 27) − 8.485 = 0; dz/dt = (6√2)² − (8/3)·27 = 72 − 72 = 0. The test suite evaluates the plate’s own derivative at both points and requires every component to be under 10−12. It also plants β = 3 and requires that check to fail, which it does: dz/dt becomes 72 − 81 = −9. At ρ = 28 both eyes are unstable, so a trajectory never settles into one: it spirals outward round one eye until it is thrown across to the other wing, and the number of loops it makes on each side before switching follows no regular pattern.

How fast a millionth becomes everything

Two nearby trajectories of a chaotic system separate, on average, exponentially. The rate is the largest Lyapunov exponent, and for these parameters J. C. Sprott’s Lorenz Lyapunov-exponent page gives the full set as (0.906, 0, −14.572) in base e. So a gap doubles roughly every ln 2 / 0.906 ≈ 0.77 time units and grows tenfold every 2.5. To go from 10−6 to about 10, the size of a wing, takes a factor of 107, or ln(107) / 0.906 ≈ 18 time units. The plate runs at 0.6 time units a second, so that is about 30 seconds of watching. Measured on the plate’s own code in the first cycle, the widest gap between any two of the hundred is 1.6 × 10−5 after 5 s, 1.6 × 10−4 after 10 s, 0.004 after 15 s, 0.04 after 20 s, 0.6 after 25 s and 32 after 30 s. The test suite estimates the exponent from the plate’s own step function over 2,000 time units and requires it to land within 0.03 of 0.906.

The three exponents add up to −13.666, which is −(σ + 1 + β): any small blob of starting states shrinks in volume by a factor of e13.67, about 860,000, every time unit. That is why there is an attractor at all. Whatever the hundred do along the wings, they are squeezed onto the same thin, nearly flat sheets, which is why they still trace the butterfly after they have lost all memory of each other.

Lorenz found this by accident. The Wikipedia article on the butterfly effect tells how, restarting a run of his weather model, he typed in the starting value 0.506 from a printout instead of the full 0.506127, “and the result was a completely different weather scenario”. The butterfly itself came later: Philip Merilees supplied the title “Does the flap of a butterfly’s wings in Brazil set off a tornado in Texas?” for a talk Lorenz gave in 1972 at the 139th meeting of the American Association for the Advancement of Science.

How it is computed

Each dot is advanced by classical fourth-order Runge–Kutta on a fixed step of 0.002 time units: 300 steps a second for each of the hundred, four evaluations of the equations per step. The step size is a deliberate choice, and the test suite checks it: over one time unit, the same start run with steps of 0.002 and of 0.001 ends less than 10−6 apart. A first seed of (1, 1, 1) is run 25 time units before anything is drawn, so the hundred start on the attractor rather than on the way to it. The hundred start positions fill a ball of radius 10−6 evenly: the radius grows as the cube root of the dot’s number and the direction walks a Fibonacci spiral over the sphere.

The clock and the physics are separate. The number of steps taken is the cycle’s age in wall-clock seconds times 300, rounded down, so the frame rate only decides how many steps fall between two pictures, never which steps are taken. A 30-frames-per-second phone and a 144 Hz monitor show the identical state at the same moment, and the test suite checks that bit for bit. Two dots started 10−9 apart are still within 10−6 of each other after one time unit and more than 1 apart by forty; the suite checks that too.

The two plates it sits nearest

  • Strange Attractor is a map, not a flow: Peter de Jong’s two lines of arithmetic jump one point from place to place in a flat plane, and the picture is where those jumps pile up. There is no time between the jumps and no neighbour to compare with. The Lorenz system is three differential equations in three dimensions, solved in tiny continuous steps, and the subject here is not the shape but what happens to a hundred neighbours inside it.
  • Double Pendulum tells the same story of sensitivity with twenty-four pendulums a billionth of a radian apart. But an ideal pendulum keeps its energy, so its spread of states never shrinks; it just fans out over everything its energy allows. Lorenz’s system loses volume at 860,000 times per time unit, so every start, near or far, ends up on the same butterfly. Chaos on the pendulum plate fills space; chaos here stays on a thin shape.

Honest limits

Late in each cycle the paths are not exact. The computer carries about sixteen significant digits, so every step is rounded by around 10−16. The same growth that turns a 10−6 gap into a wing-width turns rounding into a visible error after roughly ln(1016) / 0.906 ≈ 40 time units, and a cycle lasts 36. By the end of a cycle each dot is still following the Lorenz equations, but not provably the exact path its starting point would give with infinite precision. The shape and the statistics are unaffected.

A 3-D object drawn flat. Where two trails cross on screen they are usually at different depths. In space, two trajectories of this system never cross at all, because a state determines its own future uniquely.

A hundred is a small crowd. It is enough to see a single thread come apart, but it says nothing reliable about the odds of ending on one wing or the other.

One model, one parameter set. σ, ρ and β are fixed at Lorenz’s values; at other values the system can settle down or behave quite differently, and this plate does not explore them. It is a finished composition, not a simulator.

Curious how the loop and canvas fit together? Read how it works →

More from the gallery

All 34 animations in the gallery →