Topics18
The 18 subjects that run through the projects, sketches and writing here — each one a page of its own.
Glossary — what 9 of the words used here mean.
- Iridescent 214 Rainbow is the default palette in this gallery rather than a special effect, which is why this is most of it: hue cycling along the length of a ribbon, spectrum sheets billowing on noise, depth layers each tinted a step further round the wheel. Read it as the house style, not as a filter — the sketches where colour is the whole idea are the shader series.
- 2D 206 Work that reads as flat, and flat here is a verdict on the picture rather than on how it was drawn — plenty of these run on a WEBGL canvas and still come out as a pattern on a plane. Ribbons, grids, pulses, signals and letterforms that stay on the surface, which is where most of the gallery lives.
- Noise 116 Perlin and simplex noise are the motor under most of these: a smooth random field sampled over time, so a grid breathes, a spectrum sheet billows like a flag in wind, or a lattice folds into symmetry. It is the cheapest way I know to make a thing move as though weather were happening to it.
- Typography 99 Letterforms treated as material rather than as language: outlines morphed between two glyphs, numerals slaloming through a labelled grid, an alphabet loose on paper that a tracked hand can shove aside. Most of it comes out of 36 Days of Type and the trace-vectors series, where the point is a word you end up reading twice.
- 3D 85 The sketches that read as objects in space — extruded letters casting letter-shaped shadows, spikes sprouting along the normals of a sphere, wire funnels tumbling as one rigid body. Same rule as 2D: it is a verdict on what the frame looks like, not on which drawing context produced it.
- Interactive 54 The sketches that answer back. A cursor that dents a mesh, a click that lifts a subject off a photograph, a webcam hand that ploughs through a crowd of balls — all of them run live in the browser, so these are pages you can play with rather than loops to watch.
- Shaders 48 Written in GLSL and rebuilt per pixel: rope woven over and under a ring, hundreds of discs fused into petals and lit like an oil slick, tens of thousands of points drawn in a single pass. This is where a sketch stops being a list of drawing instructions and becomes one formula evaluated everywhere at once.
- MediaPipe 28 MediaPipe is what gives these sketches a body to react to: hand landmarks, face mesh and person segmentation, all running on the webcam inside the browser with nothing leaving the machine. Everything filed under hand capture, face capture or segmentation is built on it.
- Hand capture 27 Sketches where a tracked hand is the input rather than the mouse: fingers that attract or repel a crowd of balls, a pinch that drags letters like taffy, a fist that snaps a scattered word back into place. Allow the camera on any of these pages and the sketch starts reading your hand instead.
- Audio 12 The sketches that make or answer to a sound. A wavetable voice drawn as its own display, a glyph grid thumping to a synth bass on the same clock, a ball whose every wall hit rings out as a pitched bip — picture and sound computed from one clock, rather than one of them chasing the other.
- Black and white 12 The handful that refuse the house palette. With rainbow as the default everywhere else, dropping to ink and paper changes what you actually look at — the grain of two hundred wobbling concentric rings, or a clip rebuilt from luminance alone as halftone dots and ASCII glyphs.
- Video 11 Footage used as material rather than as a recording: clips tiled into a wall of cells, a frame receding down a tunnel of its own ghosts, a webcam cutout fanned into finned ribbons. The tooling side is here too — the local-first browser tools I built to cull and grade my own captures.
- TypeScript 9 The projects I have to come back to months later are the ones written in TypeScript, and they are the engineering half of this site: a self-hosted photo and video pipeline, a Spotify collector that has to prove it never stopped, nine local-first browser tools, and this site itself. The types are load-bearing precisely because I am away from them for long stretches.
- Experiment 7 The one-offs. Nearly every sketch here belongs to a series that iterates on a single idea, and these are the ones that never got a second version: a neon graffiti whip, a provably seamless shader wallpaper, a monospace grid that thumps. Kept because they work, not because they went anywhere.
- Segmentation 7 A model that separates a subject from its background, used here as a cutting tool. The person is kept and rebuilt as a hovering cloud of coloured dots, or their patch of video is lifted out and stacked into tinted echoes trailing the gesture — the cut is the effect, not a step toward one.
- Next.js 6 Next.js was my default for years and these six are the record of it: a studio portfolio reading from Tumblr as a headless CMS, a Spotify collector, a media pipeline, a creative-coding workbench, and ten years of my previous personal site. The site you are on is not one of them — it is Astro — which is its own kind of answer.
- Docker 5 The self-hosted half. These four all run somewhere I own — a home-lab box or a small VPS — and Docker is what makes that survivable: the database, the queue, the worker and the web app come up together and move as one file. The trilingual static site is here for the same reason, a reproducible deploy meant to outlast its own tooling.
- Tailwind CSS 4 Four projects whose interface is Tailwind: a creative-coding workbench, a local-first photo and video toolbox, a Spotify collector, and this site. I use it the same way every time — one place to put the spacing and colour decisions, so the markup can stay about structure.