Rolling Shutter

What it is

A rolling shutter is how a CMOS image sensor takes a picture: it does not expose the whole frame at once, it reads the rows in order, so row y is captured at t + y·tau — a fraction of a second later than the row above it. This page is that camera, written as a plain 2D canvas simulation with no WebGL and no shader, and pointed at four subjects that move too fast for it. Every frame is composited band by band, a pixel or two at a time, from the scene re-evaluated at each band's own instant, which is exactly the arithmetic the sensor does; the bands widen only when the stage is too slow to hold the frame rate.

The frame it opens on is the photograph everybody has seen: a three-blade propeller turning at 2,400 rpm, read out over a fifteenth of a second, its blades bent into scimitars and cut into free-floating crescents with the spinner cone still dead centre. The readout panel prints the arithmetic instead of a caption — how many turns the propeller makes while the scan crosses the disc, and the crescent count that follows from it, blades times angular velocity times readout time over two pi. A picture-in-picture labelled “what the eye sees” draws the same scene the way an eye integrates it, a few ghost copies across a sixtieth of a second, so the still carries its own punchline: same propeller, two pictures.

Four subjects, each a different famous artefact of the same mechanism. Spokes is a bicycle wheel whose 32 spokes curve into a fan. Strings is a guitar fretboard with six strings at the open frequencies of standard tuning, 82.41 Hz up to 329.63 Hz — tap to pluck one, drag across to strum — and each string is drawn analytically rather than animated, so the number of wobbles down the frame is its frequency times the readout time. Racecar is a Grand Prix car crossing the frame at 140 km/h with the camera panning at 60 per cent of its speed, which leans the wheels forward and the trackside fence back: the focal-plane distortion of Lartigue's photograph.

Everything here is a dial you can move. The Readout slider steps through nine stops, from a global shutter — every row at the same instant, an ordinary photograph — through 1/1000, 1/250 and 1/60 to 1/8 of a second, where several turns pass under the scan and the blades tear into a spiral of separate pieces. Scan flips the sensor's read direction from top-to-bottom to left-to-right, which changes the whole shape of the lie. Dragging the propeller reads the tangential speed of your hand as angular velocity and then lets a flywheel run it down; Snap freezes the current frame behind a white photo border, and Reset spins it back up to 2,400 rpm. The sky is painted from the site's accent colour — a blue day, a warm sunset, a night of ninety stars — rather than left as the page, so the off-white blades read in either theme; with reduce-motion on, the piece holds one baked frame and re-renders only when a control changes.

How to use it

• Drag the propeller to spin it — fling it hard and the crescents multiply.
• Slide Readout from Global to 1/8 s to watch an ordinary photo tear apart.
• Switch subject: Spokes, Strings, Racecar. Tap or drag the strings to pluck.
• Press Scan to read the sensor left to right instead of top to bottom.
• Snap freezes the frame as a photo; Reset spins it back up to 2,400 rpm.

More experiments

• Foam — Canvas, Computational Geometry, Physics
• Chladni Plate — canvas, physics, simulation
• Photoelastic — WebGL, GLSL, Physics

See every experiment