Symbols effect

A short clip, a running cat, beetles, flowers, blocky letters spelling hi, plays rebuilt from little marks. The frame is split into a grid of square cells about 8 pixels wide on a 600 pixel card, and each cell shows one small symbol, a dot, a ring, a square, a triangle, a cross, tinted in one of four colours. Dark parts of the picture get one symbol and colour, the light parts another, so the image reads from a distance and dissolves into pattern up close. Every two seconds the card moves to a new clip with its own palette and symbols.

It is one fragment shader on one full-frame quad. Each pixel snaps to the centre of its cell and samples the source there, so a whole cell reads one colour, and the luminance of that sample picks a band from four ranges, 0 to 25%, to 50, to 75 and to 100 by default. The band's symbol, a 32 by 32 canvas drawn from paths, tiles once per cell and is multiplied by the band's colour over a white ground; the empty symbol leaves paper. The source is cover-cropped so the grid always fills the frame, and the cell size scales with the card's width so a phone sees the same density as a desktop.

A video is a three.js VideoTexture, preloaded for every preset so a switch never decodes from cold, and the new clip only replaces the old one after its first frame has really been decoded, which avoids a black flash. Switching looks inside the playground crossfades colours and symbols on a spring. The playground also takes an image or a clip of your own, entirely in the browser, and saves a PNG or records the canvas to WebM.

• Draw a full-frame quad with one ShaderMaterial; pass the source, the cell size, four band colours, four band ranges and four glyph textures as uniforms.
• In the fragment shader, snap the pixel to its cell centre, cover-crop and sample the source, and take its luminance.
• Find the band whose range holds that luminance, tile the band's glyph once per cell, and tint it with the band colour over white.
• Scale the cell with the card's width against a 600 pixel reference, so the number of cells across stays constant.
• Keep a pool of preloaded videos and swap the texture only after the new clip has presented a decoded frame.
• Pause the clip and the cycle off screen and on a hidden tab; stop on webglcontextlost; on destroy dispose the textures, the material and the geometry, then renderer.dispose() and renderer.forceContextLoss().
• Under reduced motion, hold the first look on a decoded frame of its clip.

• PRESETS (seven looks): Each clip with its four band colours, four symbols and zoom.
• GLYPHS (twenty-four symbols): The symbols a band can stamp, drawn as canvas paths.
• CELL (8): The cell size in pixels at a 600 pixel wide card.
• CYCLE_MS (2000): How long the card holds each look.
• bandStops (0, 0.25, 0.5, 0.75, 1): Where the four brightness bands split.