← Back to Projects
Patchwork logo

Patchwork

Live

One canvas with no edge, painted by whoever turns up. Pick a colour, tap a pixel, and watch a small cursor from someone else drift across the ground you are working on. A map shows where the world is warm, and a compass button takes you there, or to the quiet frontier, or to a spot someone has named. Slow bots keep the middle alive. It works with a thumb or a mouse, and there is nothing to sign up for.

Screenshots

The Patchwork first screen over a live canvas: the quilt-block mark and wordmark, one line of how to start, a live count of painters and a Start painting button

First screen

Painting on a desktop: small pixel motifs on a dark ground, a short coral line just placed, and a dock with the colour ring, recent colours, a pen, Explore and the map

Painting

The world map: a cluster of painted chunks in their own colours with a warm edge and glow where pixels are landing, a few named flags, and a box showing where you are

The world map

What It Does

  • →Gives you an endless canvas: pan and zoom anywhere, with crisp pixels from a single pixel up to a whole neighbourhood
  • →Lets you paint with a tap, or draw a line with the pen, from a 32-colour palette, using a small bank of pixels that refills every quarter of a second
  • →Shows other painters as small coloured cursors and their pixels as they land, from many hundreds of people at once
  • →Opens a world map that glows where people are painting right now, with your own screen outlined, and takes you anywhere you tap
  • →Takes you somewhere on request: a busy place, the quiet frontier at the edge of what has been painted, or a place someone named with a flag
  • →Keeps the world between visits, shares a link that reopens the exact spot and zoom, and never asks you to sign up

What I Built

  • →The world is sparse 256 by 256 chunks of one byte per pixel on disk, saved lazily and atomically, loaded on demand and evicted when idle, with hard limits on the world radius, chunks on disk, chunks in memory and chunks one connection may watch
  • →A Node 22 server on the ws package alone: a binary protocol with 64-byte client frames, per-chunk pixel changes batched at 20 Hz and sent only to the people watching them, and chunks sent run-length coded
  • →An overview index of the known world rebuilt every ten seconds, with a warmth for every chunk that fades over a couple of minutes, behind the map, the busy-place button and the frontier button
  • →A vanilla JavaScript canvas client that draws each chunk once into its own small canvas, so panning is copying pictures, with whole-number zoom settling, touch gestures that never fight and a debug overlay
  • →A server that trusts no client number: a message budget, a cooldown it enforces itself, coalesced view changes, join and subscribe limits, validated flag names, an Origin check and a strict content security policy
  • →119 tests including a simulated crash mid-write and the 20,001st chunk, a headless-Chrome privacy walk, an axe-core run over every screen, a real front-door test, and a load run that held 20 ticks a second with 600 painters
Open PatchworkStart a Project