Shutters | Jesper GB Henriksen

Shutters

A grid of lenses laid over a picture, each one sampling from a slightly different place. A wave runs through the grid and the whole sheet tilts. Turn the knobs until you like what you see, then export a still or a seamless loop. It runs in the browser with no backend, so nothing is uploaded.

Open Shutters Free · no account · nothing to install

The stage on the left, the panel on the right. The header reports the shape count, the frame size and which renderer drew the last frame.

Three steps.

Pick a picture

Twenty-two source plates, generated rather than shipped. Or drop your own image on the stage.

Lay lenses over it

Each cell is a mask that samples the picture from a displaced position. An animated wave field decides the displacement.

Take it away

A PNG at up to four times the preview, or a folder of numbered frames that loops seamlessly.

Bands of yellow, orange and deep red running across the frame, broken into rows of overlapping soft-edged lenses so the horizon reads as a torn edge. — A broad-stroke plate. Large fields read as poster shapes through the array.

A dense field of red, orange and dark plum arch-shaped lenses, each shaded across its width, stacked like roof tiles. — Arch shapes at a tighter grid, with the arrangement staggered.

Seven groups, most of them off.

Everything past the first two sections has a master switch and starts off, so the thing you open is simple and gets complicated only where you ask it to.

Source image22 plates

Arrangement and colour are separate rolls. New pattern re-seeds the structure and leaves the palette alone; Palette steps the colours and leaves the structure alone. Neither can disturb the other.

Shapessix outlines

Circle, triangle, diamond, hexagon, octagon or arch. Two to ninety-six columns and rows, a size that can leave them apart or overlapping, and a feather so they fade into each other instead of butting.

Arrangement

Stagger for a brick bond, scatter to knock each lens off its cell, plus rotation and row shear for the whole lattice.

Distortion

The wave that displaces what each lens samples: frequency per axis, amplitude in pixels, and speed.

Image movement

Pan and drift the picture behind the glass. Drift is what makes the subject move behind the lenses rather than sit in them.

Glass

Refraction that shrinks or magnifies, a dome gradient that makes a lens read as thick, rim diffusion, and a variance so no two lenses are quite alike.

Light and colour

A sheet of light crossing each lens at an angle, an edge highlight, and per-lens desaturation, composited normal, screen, soft light or overlay.

Film and print

Grain over the finished frame, boiling on its own clock at 12 or 24 fps, and a printed dot screen.

A still, or a loop that closes.

A PNG comes out at one, two or four times the preview, and it is the preview enlarged rather than a different composition — the wave field is defined in fractions of the frame, not in pixels.

A loop is harder. Every animated quantity has to come back to where it started, and the displacement field originally could not: its time frequencies only realigned after about ten thousand cycles. Space and time are separated now, so the field looks the same and repeats exactly. Everything else — drift, orbit, the field itself — is rounded to a whole number of cycles across the loop, and that rounding is the loop.

Which leaves a choice: bend the speed to fit the length, or the length to fit the speed. Bending the speed is the wrong answer, and it was the first one — at the default a two-second loop ran at nearly twice the preview. So the panel reports the ratio, and Fit picks the length that needs no rounding at all.

PNG1× · 2× · 4×

Auto frame shape, or 16:9, 1:1, 4:5, 9:16.

Loop8–240 frames

A numbered PNG stack in a ZIP, written in store mode — PNG data is already compressed, so compressing it again would spend time for nothing, and it beats several hundred save prompts.

The ffmpeg line

A page cannot make an MP4 and cannot write into a folder you point at. So the last panel writes the command instead, for the stack you actually exported: the right frame rate, the right zero padding, and a crop when the frame size is odd.

Two renderers, one interface.

Drawing each lens on the CPU costs a fixed amount per shape, so it scales with how many there are. A fragment shader inverts that: it is handed a pixel and works out for itself which lens covers it, so the cost is per pixel and flat. Neither wins everywhere — at the default grid the CPU is fifteen times faster, and at twenty-five thousand shapes the GPU is twenty times faster.

So the default picks. Dense grids and anything feathered go to the GPU, everything else stays on the CPU, and the header says which one actually drew the last frame rather than which one was asked for.

Getting the two to agree needed one shared change. The per-shape random draw used the usual sine-and-fract hash, which is precision-dependent: JavaScript computes it in double and a GPU in single, and past a few thousand shapes the two produce entirely different numbers. Both look random, which is what makes it hard to catch — it stayed invisible while the hash only picked colours and appeared the moment it started deciding geometry. Both now run the same integer hash.