← Work / Darkroom

35

Darkroom

28 canvas-based image filters — halftone, dither, glitch, ASCII, and more.

Topiccreative tools
TypeTools
Year2026

Context

Creative filter tools either live behind paywalls (Photoshop, Lightroom) or upload your image to a server. The goal was to build the full richness of destructive image effects — halftone families, generative noise fields, glitch warps, retro effects, sticker cutout — in a purely client-side canvas pipeline with real customization, at zero cost and zero upload.

Approach

All 28 filter functions are pure ImageData transforms running in OffscreenCanvas. A registry drives both the interactive studio (upload → render previews → tweak parameters → download) and a catalog page that renders each filter live using a sprout reference image. Techniques include Floyd-Steinberg dithering, Sobel edge detection, BFS flood-fill for sticker background removal, seeded Voronoi, fractal value noise, and custom AABB pixel-sorting. The catalog uses a DARKROOM_CATALOG flag to reuse the filter engine without wiring studio UI.

Results
  • 28 filters rendering progressively in-browser on upload — halftone, dither, ASCII, glitch, sticker, noise, VHS, and more
  • Per-filter parameter controls with live re-render
  • A catalog page with live previews on each filter for discovery
  • Local PNG export, no upload, no login
Takeaways

Canvas API is deep enough to rebuild Photoshop destructive effects

Every filter in here — Floyd-Steinberg dithering, Sobel-based edge detection, BFS sticker cutout, seeded Voronoi cells, fractal noise fields — runs entirely on ImageData manipulations in the browser. No WebGL, no server, no libraries. The constraint forced legible, composable pixel math.