Creative Coding Demos

cables.gl Patch Sync

TBD roadmap placeholder for driving browser-native cables.gl patches from Data Network channels.

PlannedLocal setup requiredPlannedMixed Control

What this demo proves

This reserves a strong WebGL and interactive-installation story where visual patch variables, triggers, and shader or scene parameters respond to shared realtime channels.

Platforms

cables.glBrowser JavaScriptWebGL

Payload types

BooleanFloatArrayJSON / object

Channel names

demo.cables.patchPlanned cables.gl patch channel for WebGL and browser-native visual patching demos.

demo.json.stateCanonical structured-state channel for browser and SDK parity demos.

Example payload

{
  "enabled": true,
  "brightness": 0.8,
  "scene": "night",
  "tags": [
    "entry",
    "north-wall"
  ]
}

Compatibility notes

Browser JavaScriptNative

Node.jsNative

PythonNative

p5.jsJSON wrapped

ProcessingJSON wrapped

ArduinoJSON wrapped

ESP32 / ESP8266JSON wrapped

Serial bridgeAdapter required

TouchDesignerNot yet supported

Run online

TBD: publish a cables.gl patch or embed after defining a browser-key origin and patch variable contract.

Run locally

TBD: add a cables.gl op or script block that subscribes to demo.cables.patch and maps channel fields into patch variables.

Expected output

A cables.gl visual reacts to live Data Network messages from browser, hardware, studio, or engine demos.

Troubleshooting

TBD: document patch embedding, custom JavaScript permissions, asset hosting, browser-key origin rules, and fallback local bridge options.

Source files

demos/cables/README.md

Reference only