The dream lab — Karel Barnoski

WGSL SYNTHwrite a WebGPU shader that responds to your playing← dream
// Audio uniforms — updated every frame from mic or demo oscillators.
// Edit the @fragment function below. Recompiles 400ms after each keystroke.
//
//  a.uBass   : f32  — bass energy  20-250 Hz  (0.0 – 1.0)
//  a.uMid    : f32  — mid energy  250-4kHz    (0.0 – 1.0)
//  a.uTreble : f32  — treble energy 4k-20kHz  (0.0 – 1.0)
//  a.uOnset  : f32  — beat strength (1=hit, decays to 0)
//  a.uTime   : f32  — elapsed seconds
//  a.uBPM    : f32  — tempo estimate
//  a.uResX   : f32  — canvas width  in pixels
//  a.uResY   : f32  — canvas height in pixels

struct Audio {
  uBass: f32, uMid: f32, uTreble: f32, uOnset: f32,
  uTime: f32, uBPM: f32, uResX: f32, uResY: f32,
}
@group(0) @binding(0) var<uniform> a: Audio;

@fragment
fn main(@builtin(position) pos: vec4f) -> @location(0) vec4f {
  let uv = (pos.xy - vec2f(a.uResX, a.uResY) * 0.5) / a.uResY;
  let r  = length(uv);
  let t  = a.uTime;

  // Rings that expand outward as bass energy rises
  let ring = sin(r * 18.0 - t * 1.5 - a.uBass * 5.0) * 0.5 + 0.5;

  // Orthogonal grid lines that shimmer with mid / treble
  let gx = abs(sin(uv.x * 26.0 + a.uMid    * 4.0)) * 0.35;
  let gy = abs(sin(uv.y * 26.0 + a.uTreble  * 4.0)) * 0.35;

  // Brightness: rings + grid + onset flash
  var bright = ring * (0.35 + a.uBass * 0.65) + max(gx, gy) * 0.5 + a.uOnset * 0.7;
  bright = clamp(bright, 0.0, 1.0);

  // Hue drifts slowly, pushed by mid and treble
  let hue = fract(a.uMid * 0.5 + a.uTreble * 0.3 + t * 0.03);
  let h6  = hue * 6.0;
  let fi  = floor(h6);
  let ff  = h6 - fi;
  let s   = 0.9;
  let v   = bright;
  let p0  = v * (1.0 - s);
  let p1  = v * (1.0 - s * ff);
  let p2  = v * (1.0 - s * (1.0 - ff));
  var col: vec3f;
  if      (fi < 1.0) { col = vec3f(v,  p2, p0); }
  else if (fi < 2.0) { col = vec3f(p1,  v, p0); }
  else if (fi < 3.0) { col = vec3f(p0,  v, p2); }
  else if (fi < 4.0) { col = vec3f(p0, p1,  v); }
  else if (fi < 5.0) { col = vec3f(p2, p0,  v); }
  else               { col = vec3f(v,  p0, p1); }

  // Vignette: dim toward edges
  col *= 1.0 - r * r * 0.8;
  return vec4f(col, 1.0);
}edit WGSL · recompiles 400ms after each keystroke · WGSL tour →
INITIALISING WEBGPU…