Engine demos: the shader demo and the Classic Composer

Open the shader demo | Open the Classic Composer

noisemaker.app has two engine demos. They use different engines and different program formats:

  • The shader demo is an effect browser and DSL editor. It compiles DSL programs and renders them on the GPU.

  • The Classic Composer renders the classic Noisemaker presets on the CPU, with the JavaScript port of the Python Composer.

Shader programs use the Polymorphic DSL. Classic presets come from presets.dsl, which the Python and JavaScript Composers share. A program for one demo does not run in the other. [D1] [D2] [D3]

The shader demo

The demo uses CanvasRenderer to compile and render programs. Its UIController uses ProgramState to connect the parsed program to the controls. [D2]

The demo makes the controls from each effect’s parameter definitions, so no effect needs a hand-written control panel. When a control changes, the demo sends all step values to the renderer with applyStepParameterValues(programState.getAllStepValues()). [D2]

Some parameters are compile-time defines, which the engine writes into the shader source. When one of them changes, ProgramState emits recompileNeeded. The demo then updates the DSL and compiles again, at most once for each user action. [D2]

The demo starts on WebGL2. The glsl and wgsl tabs switch between the WebGL2 and WebGPU backends. An FPS counter shows the frame rate. [D4]

The Classic Composer

The Composer imports Preset and render from the JavaScript Composer. [D3] For each render, it builds a Preset from the selected name and seed. It calls render() with the preset and the seed. The options give the canvas size, a drawing context, a time value, a frame index, and a progress callback. [D3]

If the selected preset is an effect and not a generator, the Composer adds it to the basic generator preset. This gives the effect an image to change. [D3]

After each render, the page shows:

  • the preset’s source text from presets.dsl, in the Formula tab,

  • the evaluated preset, in the Evaluated tab,

  • the mode, the preset evaluation time, the render time, and the seed, in the status line. [D3]

Other CPU options

The demo index also lists Noisemaker for CPU. That port runs shader programs without a GPU, in JavaScript, Python, Ruby, or Rust. It is a different engine from the Classic Composer. [D1]

Limits

  • The Composer renders into a 1024 × 1024 canvas. Its script reads size, frame-rate, duration, and animation inputs that the page does not contain. [D3]

  • The Composer hides presets whose names start with maybe-. [D3]

  • Neither demo exports images or video. [D2] [D3] [D4]

Sources

D2 and D3 point to noisemaker revision 135688f.