Draw My Canvas / studio

Strange Attractor

One point, iterated forever through two lines of arithmetic, until where it has been becomes a shape.

Plate 12de-jong

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

Everything on this canvas comes out of two lines that the Dutch physicist Peter de Jong contributed to A. K. Dewdney’s Scientific American column in the late 1980s:

x′ = sin(a·y) − cos(b·x)
y′ = sin(c·x) − cos(d·y)

Take one point, put it through that pair, put the answer back in, and keep going. There is no random number anywhere in this piece. The orbit never repeats, never leaves the square from −2 to 2, and never settles down — that combination is what the word strange is doing in the title.

The picture is not the path. At a couple of thousand iterates a frame the path is illegible dust. The picture is where the orbit spends its time: run it long enough and the visits pile up into folded sheets, bright along the creases where the map squeezes and faint across the sweeps where it stretches. So the canvas here is never cleared. Each frame adds its iterates to what is already there and decays the whole image by 3.5% first, which means roughly the last thirty frames — half a second of orbit, about 400,000 points at a desktop size — are visible at any moment.

What to look for

The bright hairlines are caustics: places where the map folds the plane back on itself, so points from two different regions land on top of each other. They are the same thing as the bright curves at the bottom of a swimming pool, and for the same reason.

Coral marks the long jumps. Every iterate is measured against a slowly-updated running mean of how far the orbit has been moving, and the top fifth or so — the sweeps between folds, never the folds themselves — is drawn in the warm ink. That ratio holds at about 21% whatever the parameters are doing, which is why the piece stays cobalt-with-accents instead of swinging between all-blue and all-orange.

a, b, c and d drift, so the figure breathes rather than sitting still. They ride four sine terms whose frequencies are in the ratio 1 : 2 : 3 : 5 off one base, which makes the whole parameter path exactly periodic — it closes after 151 seconds and repeats. That is a deliberate choice, not a stylistic one. Most of de Jong’s parameter space is not chaotic: wander into the wrong corner and the orbit falls into an attracting cycle, and the plate collapses to a handful of dots. A closed path is a path you can check, and this one was — sampled at 240 points around its full period, the sparsest frame still occupies 1,730 cells of a 160×160 grid.

Honest limits: the plot is stretched to whatever aspect your window is, so the figure is wider on a monitor than on a phone — an attractor has no canonical shape, but it does have a canonical aspect, and this is not it. And the accumulation makes this the most expensive piece in the gallery on an old machine; if you want it cheap, give the iframe a smaller box, because the iterate count scales with area. Reduced-motion visitors get a settled still instead of the loop.

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

More from the gallery

All 32 animations in the gallery →