A phone-camera sensor reads one row at a time: propellers bend, strings ripple.
A CMOS sensor reads its rows in sequence, so row y is sampled at t0 + (y / height) x readout time. Here every subject is a function of position and time evaluated per pixel, and each sensor row is rendered at its own moment as the red readout line sweeps down, slowed by a factor of about 80 so you can watch it. A biplane's three-bladed propeller bends into curved bananas, the strings of a guitar seen along their length turn into waves because each row catches them at a different phase of their vibration, and a passing steam train leans backward while its spoked wheels curl. The inset shows the real motion at the same slow-motion rate, and the ruler gives each row its timestamp.
Try it. In the controls panel, which unfolds when you hover or tap, pick the propeller, the guitar or the train, and switch between a rolling and a global shutter. The sliders set the subject's speed (rpm, pitch or km/h) and the readout time. Drag sideways on the picture to change speed, click a string to pluck it. Keys: 1 to 3 choose the subject, G or Space toggles the shutter, left and right set speed, up and down set the readout time, P plucks every string.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Simulate a rolling-shutter camera sensor with JavaScript and the HTML canvas element. Put everything in a single index.html file with no libraries or build step, so I can open it directly in a browser.
Start simple:
- Make a canvas that fills the window and resizes with it. Do the per-pixel work in a small offscreen canvas (about 320 x 200) with an ImageData buffer, and draw it scaled up.
- Write a function shade(x, y, t) that returns a color for a scene at time t: a sky-blue background and a three-bladed propeller spinning around the center. A pixel is on a blade if its angle, minus the rotation angle at time t, is within a small width of one of three evenly spaced blade angles. Paint the blade tips yellow.
- The sensor reads one row at a time: row y is sampled at t0 + (y / height) * readoutTime. Each animation frame, render the next few rows at their own times and advance a red readout line down the image, so a full readout takes about two seconds of real time while representing a few hundredths of a second of scene time.
- Add sliders for propeller rpm and readout time, and a toggle for a global shutter where every row uses t0.
Once that works, make it beautiful:
- Shade the blades like brushed metal with a bright leading edge, and paint a simple airplane nose behind them.
- Show a small inset with the propeller at the current instant so the real motion and the captured image can be compared.
- Add a second subject: a vibrating string running vertically, whose sideways displacement is A sin(pi s) cos(2 pi f t), so the rolling shutter turns it into a wave.
Explain the key ideas in short code comments. When you're done, tell me how to open it and suggest three directions I could take it next, such as a passing train whose verticals lean, spoked wheels, or motion blur from a finite exposure time.
