The other creative-coding tutorials on this site — p5.js, Hydra, Three.js — are all text-first: you write code, the code describes a scene. cables.gl takes a different route into the same territory. It’s a free, browser-based tool for building real-time generative and interactive WebGL content by connecting visual nodes, called ops, into a patch — closer in spirit to Max/MSP or TouchDesigner than to a JavaScript library, but purpose-built for the web and exportable as a standalone piece with no server required. First Steps in Cables.gl, from The Interactive & Immersive HQ, is a solid on-ramp for anyone who’s never opened a node editor before.
Ops and patches: the whole vocabulary
Everything in cables.gl is an op — a self-contained node with inputs and outputs, whether it’s generating a shape, applying a color, running math on a number, or reading mouse position. You build a piece by dragging ops onto a canvas and connecting their ports with cables (hence the name), chaining them into a patch. There’s no separate “code” layer hiding underneath that you’re expected to eventually graduate to — the patch is the program, and reading it left-to-right (or op-to-op) tells you exactly what’s happening, which makes other people’s patches genuinely readable in a way raw source code sometimes isn’t.
Two kinds of connections: value and trigger
The concept that trips up most newcomers is that cables has two distinct types of links between ops: value links, which continuously pass data like a number or a color, and trigger links, which fire an action once, in sequence, like a function call. A render loop, for instance, is a trigger chain — “draw this, then draw that, then flip the buffer” — while the color feeding into “draw this” is a value link, recalculated every frame. Once that distinction clicks, most confusing patches stop being confusing: you can trace whether a wire is carrying continuous data or firing an event.
From static patch to something alive
The payoff, same as any creative-coding environment, is introducing change over time and interaction. Time-based ops drive animation without a manual loop to write; mouse and pointer ops make a patch respond to the viewer directly. Because everything is visual and inspectable, experimenting is cheap — drop in a new op, wire it in, see the result immediately, no compile step. That immediacy is cables.gl’s real case for itself: it trades some of the raw flexibility of hand-written shader code for a much shorter path from idea to something moving on screen.