A can on a string, and glass between two mirrors
Two browser toys, one HTML file each, no engine. Both do the boring thing properly: they simulate the physical object rather than draw the picture it would make. These are the notes on what is inside.
Part onePaint Pendulum
The real thing is a paint can with a hole in the bottom, hung on a string over a board. You pull it out, let go, and the paint lays down a line that spirals inward as the swing dies. Schools make them; a certain kind of Etsy shop sells the results. I wanted the thing itself, on a screen, with nothing faked.
The pendulum is a pendulum
The easy way to draw these patterns is a harmonograph formula: two damped sines, one per axis, plotted against time. It looks right for small swings and wrong for big ones, because a real pendulum on a wide swing does something a sine cannot: the ellipse it traces slowly turns. That precession is most of the beauty of a rosette, so the toy integrates the actual motion.
The can is a point on a sphere of radius L, the string length. Each step, at 240 steps per second, the position is advanced by its velocity plus gravity plus a linear air drag, then pulled straight back onto the sphere by rescaling the vector from the pivot. The velocity is recovered from the two positions. That is position Verlet with a constraint, about six lines, and it gives you the whole family: the straight swing, the ellipse that precesses, the slow spiral inward as drag takes the energy out.
The board hangs too. It is a second pendulum with its own string length, and the paint is recorded in the board's frame, so what ends up on the board is the difference of two motions. Two pendulums with periods a few percent apart give the classic harmonograph, where the ellipse folds into crossed lobes as the swings drift in and out of step. Set the board's string to four ninths of the can's and the periods are 2:3, which draws a Lissajous figure. Release the can as the board passes through the middle of its swing and you get the figure of eight; release at the end of the board's swing and you get a fish. The toy times the release for you in the examples, but the timing is real.
Where the paint lands
Paint does not land under the can. It leaves the can with the can's velocity and falls 8 cm to the board, so it lands ahead of the can by velocity times fall time. That small lead is what makes the lines lean the way real ones do.
The width of the line is paint per metre of travel: flow divided by speed. A fast can draws thin, a slow can pools. Taken literally that stamps a fat disc at every turning point, where the speed passes through zero, and real pendulum paintings do not have discs. Real paint spreads at a finite rate. So the width chases its target and cannot widen faster than a fixed rate per second, and the turning points come out as bulges instead. The can also empties: the flow tapers with the level, and the last few loops are thin.
The nozzles are variations on the same dab. A ribbon is two dabs offset either side of the line, on a bar that turns at the twist rate, so the two colours wind round each other. A rake is several holes in a line on that same bar, which bunch when the swing runs along the bar and fan when it runs across. Splatter throws extra droplets, more of them and further the faster the can moves, with occasional blobs where it dawdles.
The board remembers everything as dabs
Every swing is stored as a list of dabs in board metres: position, radius, colour index. The bitmap you see is just a cache. That is why a swing can be removed or recoloured afterwards, why undo is cheap, why you can move the board under the pendulum with the paint riding along, and why resizing the window redraws at full resolution instead of scaling pixels.
The turntable, from a shop print
The three-colour pendulum prints you see for sale have a look the two-pendulum figures never produce: loops walking round in a ring, leaving a clean hole, in bands of red then green then blue. I tried to make one by hand for a while and could not. Two pendulums give concentric rings or a precessing ellipse, never loops on a ring.
The answer is a turntable, and not a centred one. The board turns slowly about its own centre, and that centre sits off to one side of the pendulum's rest point. Each loop of a near-circular swing then lands a little further round the axle than the last, so the loops march in a ring and the axle leaves the hole. One launch per colour, with the table turning on between them, gives the bands. Three measurements off the print pin the recipe:
The Turntable example in the toy uses a shorter string and a faster table so the whole thing fits in 100 seconds: three colours, a third of a turn each, changed on the fly. The theatre composes its own turntable patterns from the same rule with random colours and offsets.
The theatre writes its own recipes
Theatre mode composes a pattern from one of ten families, picks periods, amplitudes and the release phase at random within ranges that work, launches it, and writes a recipe card from the numbers it actually used, so anything you see can be repeated by hand. Each pattern that runs to its end is kept in a gallery on the device. On a television or a second monitor it makes a decent screensaver, which is how I use it.
Part twoBrass Kaleidoscope
Most kaleidoscope apps are a symmetry filter: take a picture, mirror it six ways. The instrument Brewster patented in 1817 is something else. Two front-surface mirrors meet at an angle down the tube; at the far end is a cell of loose coloured glass with frosted glass behind it. You turn the tube and the glass falls. The pattern is whatever is lying in the wedge between the mirrors, reflected round the apex. This toy builds that.
The mirrors cost almost nothing
With N mirrors-worth of angle, the mirrors meet at π/N and the view has 2N-fold symmetry. The cell is drawn once to an offscreen canvas. A wedge of angle π/N is clipped out of it, once. Then that wedge is stamped 2N times round the circle, rotated each time, and mirrored on every other copy, because a reflection of a reflection is a rotation. Each bounce between real mirrors loses a little light, so the copies further from the original are drawn 3% dimmer per bounce, and the seams get a faint line. That is the whole optical model: one clip and a dozen drawImage calls, cheap enough for a phone at 60 frames a second.
The glass has to stop
The cell holds about forty pieces: discs, triangles, shards, rods, tiny seeds, sized so they cover about 58% of the floor, which is how densely a real cell is packed. Gravity points down the tube's current angle, and on a phone it follows the phone's orientation sensors, so turning the phone is turning the tube. The pieces fall, collide with impulses, rub with friction, and roll when they slide against something.
That part is standard. The hard part was making glass lie still. Left to itself, a pile of circles in a physics loop jitters forever; every frame gravity pulls, every frame the contacts push back, and the pile hums. Real glass settles because static friction holds it once nothing is moving. So each substep records, for every piece, the direction of each contact normal. A piece is held if every direction it could move in without pushing into a neighbour is too shallow for gravity to beat friction, at a friction angle of about 9°, glass on glass being slippery. Held and slow for two substeps in a row, the piece is frozen: its drift for that step is undone and it becomes a wall to its neighbours. A fast neighbour hitting it wakes it up again. With that test, a shaken cell rattles for a second and then goes silent, the way the real one does, and the oil-filled cell just replaces the air drag with a heavy one and takes away the bounce.
Light
Coloured glass does not paint on top of the backlight; it takes light away from it. So the pieces are drawn with the multiply blend, which is why two overlapping pieces go darker and richer instead of one covering the other. Canvas filters are slow on phones, so saturation is baked into the colours each frame from the light level instead: dim light drains the colour, strong light makes it sing. When the light goes over 95%, the bright ground blooms into the glass. The bloom is a cheap trick: draw the finished frame into a 24 by 24 pixel canvas, stretch it back up, and add it. Shrink and stretch is a free blur.
On a phone, the light can come from the back camera. It reads a 32 by 24 pixel frame every 120 ms, takes the mean brightness and the fraction of pixels that are blown out, and sets the backlight from that. Where the browser allows it, the exposure is locked, because auto-exposure flattens every scene to the same grey and a lamp would never read as bright. A touch of the scene's colour tints the backlight, so a red lampshade warms the glass.
Teleidoscope
Switch the object from glass to camera and the same wedge-and-stamp draws the live camera frame instead of the cell. That is a teleidoscope, the Victorian variant where the far end is a lens and the world is the object. Pinch to change the lens. The camera is shared with the light meter, and the exposure lock is released while it is the object, because that is when you want a good picture.
Keeping it at 60
No canvas filters. Opaque canvases where possible. The physics runs in fixed 1/240 s substeps, up to 24 a frame, so a slow frame does not tunnel. The device pixel ratio is capped at 1.5, and if the phone cannot hold 40 fps for three seconds, it drops to 1. Snapshots render the same code at the phone's own screen size, so the wallpaper button gives you a picture that fits.
Both toys are free, carry no adverts, need no account, and are MIT licensed. Each is a single HTML file you can read in an afternoon. They count visits with GoatCounter, without cookies. Saved pictures carry a small signature in the corner, the way a painting does; there is a box to turn it off.
If you find a pattern the theatre never makes, or the glass does something glass would not, I would like to hear about it.