creative coding with embedded javascript: running p5-style algorithmic art inside a native c++ daw

naman — Sat, 17 Oct 2026 07:34:50 +0000

creative coding with embedded javascript: running p5-style algorithmic art inside a native c++ daw

how infinite embeds a native javascript engine to execute procedural sketches, strange attractors, and cellular automata alongside synchronized audio.

creative coders generally face a difficult compromise:

in the browser (p5.js, three.js, canvas2d): rapid iteration, clean drawing apis, but limited audio precision, browser sandbox limits, and no native vst3/au plugin support.
in native c++ (openframeworks, cinder): high performance, but long compilation cycles that break creative flow on every small aesthetic tweak.

with infinite, we bridged these worlds by embedding a high-performance javascript runtime directly into a native c++ modular daw.

1. the p5-style draw loop

inside any sketch node, you write clean, declarative javascript that hot-reloads on every keystroke without compiling or restarting:

// declare wireable parameters exposed on the node canvas
param("points", 8000, 1000, 20000);
param("drift", 0.15, 0, 1);
param("size", 1.5, 0.5, 4);

function draw(t) {
  background(0.04, 0.04, 0.07);
  const a = -1.4 + 0.25 * sin(t * drift);
  const b = 1.6 + 0.2 * cos(t * drift * 0.8);
  const c = 1.0 + 0.2 * sin(t * drift * 0.6);
  const d = 0.7;

  let x = 0.1, y = 0.1;
  const k = min(width, height) * 0.22;
  noStroke();

  for (let i = 0; i < points; i++) {
    const nx = sin(a * y) + c * cos(a * x);
    const ny = sin(b * x) + d * cos(b * y);
    x = nx; y = ny;
    if (i > 20) {
      fill(hsl(0.55 + 0.3 * (i / points), 0.7, 0.65, 0.4));
      circle(width / 2 + x * k, height / 2 + y * k, size);
    }
  }
}

2. wireable parameters: code meets modular graph

the param(...) calls do something unique: they dynamically create real, visual input pins on the node canvas. you can connect:

a midi knob to modulate drift.
an 8-band audio fft peak to pulse size.
a low-frequency oscillator (lfo) to rotate the attractor phase.

3. native rendering performance

unlike web wrappers, the generated vector drawing commands stream directly into hardware-accelerated opengl framebuffers. you can render tens of thousands of points per frame with steady 60fps pacing while multi-track 48khz audio synths run in parallel.

download infinite free (macos, windows, linux): https://infinitedevices.org
source code on github: https://github.com/n1m21n/infinite

building a dual synchronized dag engine: audio dsp and gpu shaders in lockstep

naman — Sat, 17 Oct 2026 07:31:07 +0000

building a dual synchronized dag engine: audio dsp and gpu shaders in lockstep

how infinite synchronizes a sample-accurate, pull-based audio graph with a real-time opengl texture pipeline in c++.

in real-time multimedia systems, video and audio are typically managed in separate universes. visual tools like touchdesigner or hydra excel at high-throughput gpu textures, while digital audio workstations like ableton live or bitwig focus on deterministic, sample-accurate audio buffers. when artists connect them via osc, midi clock, or syphon, latency and jitter inevitably creep in.

with infinite, we built a dual synchronized dag (directed acyclic graph) engine in modern c++ that runs audio and visuals in true lockstep on one infinite canvas.

1. the architectural challenge: pull vs. push

audio and video operate under fundamentally conflicting constraints:

audio dsp is pull-based, real-time, and strictly deadline-driven. if a 128-sample buffer at 48khz is not ready in 2.6ms, the dac underflows and creates audible clicks.
gpu texture pipelines are frame-based (typically 60 to 120 fps) and throughput-driven. a dropped frame is barely noticed, but high memory bandwidth and low shader compilation stalls are essential.

2. lockstep synchronization via universal modulation

to bridge these two domains without latency penalties:

the master transport clock coordinates tick-accurate time across both sub-graphs.
audio buffers produce real-time 8-band fft analysis and onset peaks that write into atomic double-buffered modulation arrays.
shader uniforms (glsl) read directly from these modulation arrays during the render pass, eliminating frame-delay buffering.
hosted au and vst3 plugin parameters can be modulated directly by 3d scene coordinates, javascript sketches, or lfo generators.

3. open source and cross-platform

infinite is open source (mit/gplv3) and runs cross-platform on macos, windows, and linux.

website: https://infinitedevices.org
source code: https://github.com/n1m21n/infinite

DEV Community: naman

creative coding with embedded javascript: running p5-style algorithmic art inside a native c++ daw

creative coding with embedded javascript: running p5-style algorithmic art inside a native c++ daw

1. the p5-style draw loop

2. wireable parameters: code meets modular graph

3. native rendering performance

building a dual synchronized dag engine: audio dsp and gpu shaders in lockstep

building a dual synchronized dag engine: audio dsp and gpu shaders in lockstep

1. the architectural challenge: pull vs. push

2. lockstep synchronization via universal modulation

3. open source and cross-platform