patchfields about
explore sign up open the editor

a modular synthesiser and a modular video rack, sharing one patchbay.

Drag bricks onto a canvas, run cables between them, and the sound plays the pictures or the pictures play the sound. It happens in a browser tab — no install, no account, and no server doing the work. A whole patch fits in a link.

one patch, end to end

SOURCES osc out LISTEN env in out GEOMETRY ripple mod out SCREEN a tone how loud it is, as a number rings, that hard

Three bricks and two cables: an oscillator, a brick that listens to it, and a picture that rings whenever the sound does. Soft shells with a black seam are sound; hard corners ringed white are video. They stand on the same canvas and take each other's cables, which is the whole idea.

how it works

  1. drop a brick. n opens the menu — an oscillator, a drum kit, a camera, a shader, a thing that counts. Its colour says what it is for, and that colour follows it everywhere.
  2. run a cable. Drag from an out to an in. A port only takes what it can carry, so a patch that connects is a patch that works.
  3. turn the knob. Every knob is also a target: drop a cable on it, draw it on the timeline with a, or right-click it and move a midi controller to hand it over.
audiosound itself, at full rate
ctlone number, changing — an envelope, a level, a knob being turned
vida frame, and it never leaves the gpu
evtsomething happening: a trigger, a note, a hit
txtwords — a feed, a ticker, something to put on screen

221 bricks, and 129 patches already built out of them

sound108
sources17
sequencing13
modulators20
filters & shaping15
dynamics9
listen (audio → ctl)14
effects18
output2
video99
generators24
geometry20
texture22
glitch14
color11
listen (video → ctl)7
output1
data7
feeds (data → ctl)2
measure3
read2
folding7
components, and the inlets and outlets on their walls7

Colour says what a brick is for, not what it is made of — so the video rack and the sound rack are read the same way, and the data bricks take no band of their own, because they belong to whichever side they are driving.

past the patch

components
shift-drag picks a group out, ctrl+g folds it into a single brick with its own face and its own knobs, and esc steps back out. A rack you built once becomes a brick you use.
the terminal
` opens undertone, a small pattern language for wherever you are standing — patterns typed instead of patched, running next to the cables rather than in place of them.
the timeline, and the field
a is every keyframe lane in the patch, and it will record a knob while you turn it. f draws every ctl signal against one axis, so one cursor reads all of them at the same moment.
the stage
Puts the patch away and leaves only what is worth playing — the macros, the pads, the xy surfaces — sized for a thumb. Join the same coop room from a phone, switch that phone to stage, and the phone is the remote.
two players
One patch, two people, over a peer-to-peer connection, with a relay behind it for when the direct route will not open.
takes
● rec writes the picture and the mix together as one video file; ● wav writes the mix on its own. Both run in real time, because a patch is driven by wall-clock time from end to end — there is no faster path to be had.
giving it away
A patch is a link. Or export it: a folder to put on a website, or a single .html that opens by being double-clicked, with the clips and the tracks carried inside it. The player is the same engine and the same renderer, with the editor left out.
pure data
A .pd patch will open here, and this will run alongside Pd over midi.

things to play it with

A midi keyboard and its controllers — right-click any knob and move a real one to bind it. The typing keyboard, two octaves of it. A camera, with hands, faces or objects arriving as numbers. An xy pad under one finger, four pads, the mouse, a gamepad, and the tilt of a phone. Midi goes back out as well, so a patch can play something else in the room.

where it runs

In the tab. Web Audio makes the sound, WebGL2 draws the pictures, and your clips and tracks sit in the browser's own storage on your own machine. Nothing is uploaded and nothing is rendered elsewhere — close the tab and it is all gone but the link.

The one place with an account is the patch board, where patches get posted and every member has a page at /@them. It is optional, and the editor has never asked who you are.

What you make with patchfields is yours. The app carries its own manual too — the ? button in the editor covers patching, groups, components, the terminal and the rest of it in far more detail than this page does.