Draw My Canvas / studio

Differential Growth

One closed line, starting as a 22-point oval, that keeps inserting new points into itself. It can shove its neighbours aside but never cross them — so the extra length has nowhere to go but sideways, and the frame fills with folds.

Plate 23differential-growth

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

There is one object on this plate, and it is a list of points joined in a loop — last point back to first. That list is the state: on this page’s stage it settles at 4,468 x-and-y pairs and nothing else. No grid, no particles, no field, no image buffer, no second canvas. Every mark in the frame is that one closed line, stroked three times over.

Once a frame, each point is nudged by four things at once. It is pushed away from any other point within 2.2 spacings of it — except the two points either side of it along the line, which are exempted, because holding those at the right distance is a different rule’s job. It is pulled by a spring toward each of those two neighbours, rest length one spacing. It is smoothed a little toward the midpoint of the two, which is what stops the fold going hairy. And it is held off the edges by a soft wall inset 6% of the frame’s short side. Then everything moves at once, and the loop is resampled: an edge longer than 1.7 spacings gets a new point inserted in its middle, a point that has drifted within 0.38 spacings of the one behind it is deleted, and — this is the growth — every edge is given a 1.8% chance per frame of being split anyway, whether it needed it or not.

That last clause is the whole piece. The line gets longer every frame. The frame does not get bigger. The line cannot cross itself, because the repulsion will not let two strands close, and it cannot escape, because of the wall. So the extra length has exactly one place to go: sideways, into folds, and then into folds of folds.

You can put a number on how badly it has outgrown its frame, and it is an old one. For any simple closed curve, perimeter P and enclosed area A obey P² ≥ 4πA — the isoperimetric inequality — so the quotient P / 2√(πA) is at least 1, and equals 1 only for a circle. Measured on this page’s stage, the opening 22-point ellipse reads 1.07. By frame 340, the first frame the box actually paints, it reads 7.23. It settles at 15.26: a line fifteen times longer than the shortest one that could enclose the same region. Over the same run the perimeter grows from 1,993 px to 24,531 px — 12.3× — while the area it encloses falls from 60.0% of the frame to 44.2%, because the fingers of the fold interlock and each one eats the space beside it.

Four rules, and the one that decides between a fold and a knot

The gains are small and none of them is subtle: repulsion 1.8, spring 0.28, smoothing 0.18, wall 0.22, plus 0.05 spacings of per-point noise per frame to break the symmetry of a perfect ellipse. Only one of the four changes the kind of picture you get, and because the model’s step function takes the repulsion gain as an argument, it can be set to zero and the same seed re-run and measured rather than argued about.

With repulsion at its shipped 1.8, the line never touches itself. Counting every pair of non-adjacent edges that cross gives 0 at frame 340, 0 at frame 1,000, 0 at frame 3,000 and 0 at frame 6,000, and the closest any two non-neighbour points come is 1.05 spacings — about 9 px, which is why the strands read as separate at the width they are drawn at. Set the same gain to 0 and the identical seed crosses itself 988 times by frame 340 and more than 5,000 times by frame 1,200, with a minimum separation of exactly 0.00: points sitting on top of one another. It also runs all the way up to the 6,783-point ceiling and a perimeter of 46,182 px, nearly double the real run’s 24,505, because a line that is allowed to stack on itself never runs out of room. On screen that is the difference between a fold you can follow with your eye and a ball of wool.

The exemption matters as much as the force. Without it, repulsion and the spring would fight at every point on the line — the spring pulling each point to one spacing from its neighbours, the repulsion shoving it away from those same neighbours out to 2.2 — and the result is a ring that shivers and never resolves. Exempting the two points either side along the path leaves repulsion doing only the job it is for: keeping different parts of the curve apart.

The wall is gentler than it looks. There is a hard clamp behind the soft one, at 40% of the inset, and across every frame measured on every production size it never fires — 0.00% of points ever reach it. The soft push alone is enough, and the fold still ends up spanning 94.7% of the frame’s width and 90.5% of its height. Turn the repulsion off and that drops to 89.8% × 88.1%: a knot pulls in, because it can satisfy its own growth locally instead of having to go and find room.

Where this actually happens

This is not a metaphor borrowed from biology; it is the mechanism, with one dimension taken away. A sheet whose edge grows faster than its interior cannot stay flat. The margin acquires more length than the flat plane can hold, and the only way to store that length is to leave the plane — so it ripples, and then the ripples ripple. That is the frilled edge of a kale leaf, of lettuce, of a torn plastic bag, and of the mantle of a giant clam.

Eran Sharon, Michael Marder and Harry Swinney, working at the University of Texas at Austin, made the case physically rather than by analogy: reporting in Nature in 2002, they showed that a torn plastic sheet — which is left with a permanently stretched edge and nothing else unusual about it — develops a cascade of waves within waves, each generation roughly a fixed fraction of the size of the one above it, and that a long-leaved plant does the same thing for the same reason. The excess edge length forces the sheet into a shape with negative curvature everywhere, and a hyperbolic sheet cannot be laid flat, so it buckles at every scale it has material for.

The same accounting runs in the folding of the human cortex. In Nature Physics in 2016, Tuomas Tallinen, Jun Young Chung, L. Mahadevan and co-authors built a physical model of a smooth fetal brain out of gel, coated it in a thin outer layer, and let that layer swell: with no instructions about where any fold should be, it produced convolutions at close to the right wavelength and in close to the right places. The gyri are not addressed by genes one at a time; a surface layer growing faster than what is under it has to go somewhere.

The two-dimensional curve version this plate runs — points, springs, repulsion, resample — is the workhorse of the generative-art side of the idea. The clearest sustained use of it is Nervous System’s Floraform (Jessica Rosenkrantz and Jesse Louis-Rosenberg, 2014), a differential-growth simulation of an elastic surface that they run to make jewellery and sculpture, and whose printed pieces are the same buckling cascade frozen in nylon. The plate here is deliberately the flat, cheap cousin of that: one curve, four rules, no surface.

Reading the plate: what to watch for

The picture is never finished, but it does stop growing, and the two halves of that sentence are the most interesting thing on the frame.

  • You never see the oval. The box opens on frame 340, not frame 0. Frame 0 is a 22-point ellipse and four seconds of watching it thicken is not worth anyone’s time, so the warm-up is run before the first paint. The first thing on screen is already 2,058 points and a quotient of 7.23.
  • Coral is a reading, not a decoration. The coral pass overdraws only the points where the line turns through at least 0.55 radians — the tips of the folds, where the new length is being absorbed. At the frame the box opens on that is 20.8% of the points on this page’s stage, 19.6% on a gallery thumbnail and 21.4% on a phone-shaped embed; once the fold settles it falls to about 16.9%. Nobody chose those numbers; they are what the curve is doing.
  • Growth stops around frame 1,157. That is when the point count first reaches 99% of where it ends up. After that the line stops getting longer — 24,505 px at frame 1,200, 24,531 at 2,500, 24,517 at 8,000 — and what you are watching is a fold of fixed length rearranging itself under the same four forces. Split and merge keep trading places at roughly equal rates.
  • The saturation point is not the ceiling. There is a hard point ceiling of 6,783 on this stage, and the run stops at 4,468 — 65.9% of it. It is not running out of budget; it is running out of room. That is worth knowing because on a very large screen the reverse is true (see the limits below).
  • Pick one lobe and hold it. A finger of the fold that is being crowded on both sides will thin, buckle a second time inside itself, and reappear a few seconds later pointing the other way. Nothing in the code knows what a lobe is.

Three shipped plates are near relatives and none of them is doing this. Plate 14, Frost Dendrites, also grows a shape out of a rule about local crowding — but there a particle that touches the crystal freezes to it forever, so the figure only ever gains material and no branch can be un-drawn. Here every fold is provisional. Plate 22, Slime Mould Network, is also all reinforcement and forgetting, but it is drawn by eleven thousand agents that cannot see each other and are not connected to anything; this plate is one object, and the connectivity is the point. Plate 08, Fractal Dreams, branches because a rule says “branch”; nothing here mentions folding at all.

Colour, and how the picture is put together

Three strokes over one path, and the order is the picture. A wide soft pass first — 0.75 spacings across at 13% alpha, in the deeper cobalt — which gives a crowded region visual mass, so a dense patch of fold reads as a shaded body rather than as moiré. Then the line itself, 0.34 spacings at 92% alpha, in the family cobalt. Then the coral pass, 0.5 spacings at 95%, drawn only across the turning points described above. Three strokes; no fills, no gradients, no blend modes, no offscreen canvas.

The frame is cleared every frame, not faded. Every other plate on this site that leaves a trail does so because its state lives in the pixels; here the state is the point list and the whole line is redrawn from it, so a decay pass would only smear last frame’s line under this frame’s and blur the one thing worth seeing — the gap between two strands.

Not one colour is named in the drawing code. All three ink triplets are handed in by the caller — from the shared palette in the embed, from the same palette’s tile-side view on the gallery thumbnail — so the plate follows the light or dark setting of whatever page it is sitting in, and the thumbnail and the shareable box cannot drift into two different pictures.

It runs at 30 frames a second, not 60, and that is a measurement rather than a taste. The arithmetic is cheap — advancing the model costs 2.2 ms a frame on a 320×844 phone, of a 16.7 ms budget — but rasterising three full-path strokes over a four-thousand-point ring with round joins is not. Painted every frame, this was the only plate on the site for which Chromium never emitted its own networkIdle signal: measured on 2026-09-04 at 320×844, 390×844, 768×1024, 1280×720, 1280×900 and 1920×1080, it never fired at any of them, while every other embed here reached it in 0.7 to 2.4 seconds. Halved, it fires in 1.0 to 2.5 seconds everywhere. The fold moves over seconds, so the piece loses nothing and a phone gets half its battery back.

Point spacing is not a fixed number of pixels. It is calibrated at 9 px for a 512‑px short side and scales with the square root of the frame, floored at 4.6 px and capped at 18: 6.5 px on a gallery thumbnail, 9.0 px on this page’s stage, 15.1 px on a 2560×1440 screen. Scaling it linearly would make a fullscreen fold either a haze of hairlines or a handful of fat ropes; the square root keeps roughly the same number of visible folds at every size, which is what makes it the same artwork at both ends.

Honest limits

This is the flat version of a three-dimensional effect. A real leaf margin buckles out of the plane, which is why a kale edge ruffles instead of merely wiggling; this curve is locked to the plane and has to spend all its excess length on lateral meandering. The mechanism is faithful and the cascade of scales is real, but you are seeing a cross-section of the idea, not the thing itself.

On a large screen the ceiling binds, and the picture is coarser for it. The point count is capped at 9,000 so a 3840×2160 frame stays a 60 fps job. On this page’s stage that cap is slack — the run ends at 66% of it. On a 2560×1440 fullscreen embed the run ends flush against the cap at 100%, which means the fold there stopped because the budget ran out and not because the frame did. Spacing hits its own 18‑px ceiling by 3840×2160. Fullscreen on a large monitor is still a good picture; it is just a slightly emptier one than the same code would draw with an unlimited budget.

The thumbnail is not a miniature of this view. A gallery tile runs its own model at 6.5‑px spacing with a 2,644-point ceiling and settles at 1,734 points, against the stage’s 9.0 px and 4,468. Same seed, same four rules, genuinely different curve — a smaller frame supports fewer generations of fold. It is the same artwork, not the same picture.

No physics is claimed. The four gains are numbers picked because of what they look like, not fitted to any material. There is no elastic modulus, no bending stiffness, no time step with units, and no conservation of anything. Sharon and Marder’s sheets and Tallinen’s cortex model are quantitative; this is not, and it should not be read as a prediction about a leaf.

It settles, and it is meant to be watched for about a minute. The box opens on model frame 340 and the length stops changing near frame 1,157 — at 30 model steps a second that is about 27 seconds of visible growth, after which the plate becomes a slow rearrangement of a fold whose length is fixed. That is the honest shape of the thing: the arc worth watching is the half-minute after it opens, not the tenth minute.

Finally, motion. Under prefers-reduced-motion nothing animates — the model is warmed the same 340 frames and drawn once as a still, which is a formed fold rather than the bare oval the run actually starts from, so a visitor who has asked for stillness gets the artwork rather than a seed.

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

More from the gallery

All 32 animations in the gallery →