← All projects

Patchlight

A small browser workshop for connecting input, process, and output blocks and exploring their effects through light, sound, and color.

  • HTML
  • CSS
  • JavaScript
  • Web Audio
  • Node.js
  • Playwright
Code available

The project

The workshop starts with connecting a button to a light and pressing it to illuminate a room. Conditions, delays, and counters can be inserted between them to explore how a different connection changes the same input's effect.

The editor supports adding blocks, changing connections, undo, and redo. Recipes can be retained through browser autosave, JSON, or a shareable link. Paintings can be exported separately as SVG images.

How it works

Follow the processWatch the diagram or scroll to follow each step.Motion is off. You can still choose each step.

Turn an action into a signal

In the workshop, pressing a button or changing brightness sends a signal along the connected wires.

Control when it passes

Condition, delay and counter blocks determine whether and when the signal passes through.

Become light, sound or colour

The signal becomes light, sound or painted colour, revealing the effect of changing the connections.

Plain HTML, CSS, and JavaScript surround an event engine separated from the interface. The engine processes signals, while the interface responds by drawing light, synthesizing sound, and adding color. Ports are buttons that work with touch and keyboard input.

Editing connections resets pending work and counters so that old signals cannot reach a new recipe. The brightness slider acts as an input instead, preserving running state. Import validation rejects invalid settings and cyclic connections.

What the records show

Engine tests cover signal order, condition boundaries, counting, delays, and cancellation. Automated browser tests cover connecting blocks, lighting the scene, saving, and loading, including behavior after edits and preserving counters when brightness changes.

The result is a static learning tool that runs in the browser, with link and hash checks for its distributable files. A learner can explore an example, change its connections, and take the resulting recipe away without preparing hardware or an account.

What this covers

This is an independent implementation, not an official Sony MESH product, and it cites public specifications as primary sources. It teaches through its own event model; device communication and official recipe compatibility are outside its scope. Understanding by first-time users remains to be evaluated.