web: mouse-driven FX mapping (saturation: clean↔fizz, delay: opposite corners) + inertial visual swirl (spring-damper); docs: README/TODO updates

Author: rgilks

Cargo.toml

@@ -39,6 +39,7 @@ web-sys = { version = "0.3", features = [
   "OscillatorNode",
   "OscillatorType",
   "GainNode",
+  "WaveShaperNode",
   "AudioNode",
   "AudioParam",
   "PannerNode",

README.md

@@ -7,6 +7,7 @@
 - Web front-end (WASM) is running with:
   - 3 voices, spatial audio (Web Audio + PannerNode)
   - Lush ambient effects: global Convolver reverb and dark feedback Delay bus with per-voice sends and a master bus
+  - Mouse-driven FX: corner-based saturation (clean ↔ fizz) and opposite-corner delay emphasis; visuals have inertial swirl motion
   - Start overlay to initialize audio (Click Start; canvas-click fallback)
   - Drag voices in XZ plane; click to mute, Shift+Click reseed, Alt+Click solo
   - Keyboard: R (reseed all), Space (pause), + / - (tempo), M (master mute), O (orbit on/off)
@@ -50,6 +51,7 @@ Controls in browser:
 - Drag a circle to move a voice in XZ plane (updates spatialization)
 - Click a voice: mute; Shift+Click: reseed; Alt+Click: solo
 - Keys: R (reseed all), Space (pause/resume), + / - (tempo), M (master mute), O (orbit on/off)
+ - Mouse position maps to master saturation and delay; moving the pointer leaves a “water-like” trailing swirl in visuals
 
 Headless test:
 

crates/app-core/shaders/post.wgsl

@@ -97,6 +97,19 @@ fn hash2(p: vec2<f32>) -> f32 {
     return fract(sin(h) * 43758.5453123);
 }
 
+// Simple FBM using sin/cos mixing for soft, wispy noise
+fn fbm(p: vec2<f32>) -> f32 {
+    var a = 0.0;
+    var b = 0.5;
+    var f = p;
+    for (var i = 0; i < 5; i = i + 1) {
+        a += b * sin(f.x) * cos(f.y);
+        f *= 2.17;
+        b *= 0.55;
+    }
+    return a;
+}
+
 // COMPOSITE: tone-map HDR + add bloom + color grading and grain
 @fragment
 fn fs_composite(inp: VsOut) -> @location(0) vec4<f32> {
@@ -110,16 +123,41 @@ fn fs_composite(inp: VsOut) -> @location(0) vec4<f32> {
     let hue = vec3<f32>(sin(t * 1.2) + 1.0, sin(t * 1.5 + 2.0) + 1.0, sin(t * 1.8 + 4.0) + 1.0) * 0.05 * ambient;
     base *= (vec3<f32>(1.0) + hue);
 
+    // Darken exposure slightly before tonemapping to give a deeper look
+    base *= 0.9;
+
     // Tonemap
     var mapped = aces_tonemap(base);
 
-    // Vignette
+    // Contrast and gamma to increase punch without blowing highlights
+    let contrast = 0.15; // positive increases contrast
+    mapped = clamp((mapped - vec3<f32>(0.5)) * (1.0 + contrast) + vec3<f32>(0.5), vec3<f32>(0.0), vec3<f32>(1.0));
+    mapped = pow(mapped, vec3<f32>(1.07));
+
+    // Stronger vignette for moodier edges
     let vig = vignette(inp.uv);
-    mapped *= mix(1.0, 0.85, vig);
+    mapped *= mix(1.0, 0.75, vig);
+
+    // Smoky darkening using low-frequency FBM modulated by radius
+    let uv = inp.uv;
+    let r = length(uv - 0.5);
+    let smokeField = 0.5 + 0.5 * fbm(uv * 2.6 + vec2<f32>(u_post.time * 0.05, -u_post.time * 0.04));
+    let smokeField2 = 0.5 + 0.5 * fbm((uv.yx + vec2<f32>(0.17, -0.09)) * 3.1 + vec2<f32>(-u_post.time * 0.035, u_post.time * 0.045));
+    let smoke = clamp(0.5 * smokeField + 0.5 * smokeField2, 0.0, 1.0);
+    let radial = smoothstep(0.2, 0.95, r);
+    let smokeStrength = 0.18; // overall intensity
+    let k = smokeStrength * radial * smoke;
+    // Darken multiplicatively; tiny bluish tint in the darkening
+    let smokeTint = vec3<f32>(0.03, 0.04, 0.06);
+    mapped = mapped * (1.0 - k) + smokeTint * (k * 0.25);
 
     // Film grain
     let noise = hash2(inp.uv * u_post.resolution + u_post.time);
-    mapped += (noise - 0.5) * 0.02;
+    mapped += (noise - 0.5) * 0.022;
+
+    // Slight desaturation for a smokier palette
+    let luma = luminance(mapped);
+    mapped = mix(vec3<f32>(luma), mapped, 0.9);
 
     return vec4<f32>(mapped, 1.0);
 }

crates/app-core/shaders/waves.wgsl

@@ -68,21 +68,69 @@ fn sd_segment(p: vec2<f32>, a: vec2<f32>, b: vec2<f32>) -> f32 {
     return length(pa - ba * h);
 }
 
-fn wireframe_bg(p: vec2<f32>) -> f32 {
-    var d = 1e9;
-    let centers = array<vec2<f32>, 3>(
+// Returns a stylized intensity (0..1) for animated rings and lines.
+// It adds subtle orbital drift, pulsing radii, and moving dash highlights.
+fn wireframe_styled(p: vec2<f32>, t: f32) -> f32 {
+    var m = 0.0;
+
+    // --- Animated concentric rings ---
+    let base_centers = array<vec2<f32>, 3>(
         vec2<f32>(0.62, 0.28),
         vec2<f32>(0.80, 0.44),
         vec2<f32>(0.70, 0.72),
     );
-    let radii = array<f32, 3>(0.28, 0.18, 0.12);
+    let base_radii = array<f32, 3>(0.28, 0.18, 0.12);
     for (var i = 0; i < 3; i = i + 1) {
-        d = min(d, abs(length(p - centers[i]) - radii[i]));
+        let w = 0.7 + 0.3 * f32(i);
+        let c = base_centers[i] + 0.01 * vec2<f32>(
+            sin(t * (0.8 + 0.1 * f32(i)) + 3.0 * f32(i)),
+            cos(t * (0.7 + 0.13 * f32(i)) + 1.7 * f32(i)),
+        );
+        let r = base_radii[i] + 0.03 * sin(t * (0.9 + 0.17 * f32(i)) + 2.1 * f32(i)) + 0.015 * sin(5.0 * t + 0.7 * f32(i));
+
+        let v = p - c;
+        let ed = abs(length(v) - r);
+        let ang = atan2(v.y, v.x);
+        // Angular dash pattern that orbits over time
+        let dash = 0.5 + 0.5 * sin(ang * 14.0 - t * (1.6 + 0.2 * f32(i)) + f32(i));
+        let thickness = mix(0.010, 0.004, 0.5 + 0.5 * sin(t * 1.2 + f32(i)));
+        let mask = smoothstep(thickness, 0.0, ed) * pow(dash, 1.1);
+        m = max(m, mask * w);
     }
-    d = min(d, sd_segment(p, vec2<f32>(0.55, 0.20), vec2<f32>(0.85, 0.50)));
-    d = min(d, sd_segment(p, vec2<f32>(0.62, 0.28), vec2<f32>(0.80, 0.44)));
-    d = min(d, sd_segment(p, vec2<f32>(0.72, 0.70), vec2<f32>(0.86, 0.52)));
-    return d;
+
+    // --- Elegant connecting lines with traveling glints ---
+    let segs_a = array<vec2<f32>, 3>(
+        vec2<f32>(0.55, 0.20),
+        vec2<f32>(0.62, 0.28),
+        vec2<f32>(0.72, 0.70),
+    );
+    let segs_b = array<vec2<f32>, 3>(
+        vec2<f32>(0.85, 0.50),
+        vec2<f32>(0.80, 0.44),
+        vec2<f32>(0.86, 0.52),
+    );
+    for (var i = 0; i < 3; i = i + 1) {
+        // slight endpoint drift
+        let a = segs_a[i] + 0.01 * vec2<f32>(sin(t * 0.6 + f32(i)), cos(t * 0.7 + 2.1 * f32(i)));
+        let b = segs_b[i] + 0.01 * vec2<f32>(cos(t * 0.5 + 1.3 * f32(i)), sin(t * 0.65 + f32(i)));
+
+        // Distance to the segment
+        let pa = p - a;
+        let ba = b - a;
+        let h = clamp(dot(pa, ba) / dot(ba, ba), 0.0, 1.0);
+        let q = a + ba * h;
+        let ed = length(p - q);
+
+        // Position along the segment for dash animation
+        let along = h; // 0..1 along the segment
+        let dash = 0.5 + 0.5 * sin(along * 30.0 - t * (2.3 + 0.2 * f32(i)));
+        let glint = smoothstep(0.96, 1.0, sin(along * 6.28318 - t * 1.8 + f32(i)));
+        let thickness = 0.006;
+        let mask = smoothstep(thickness, 0.0, ed) * (0.65 * dash + 0.35 * glint);
+        m = max(m, mask * (0.85 + 0.15 * f32(i)));
+    }
+
+    return clamp(m, 0.0, 1.0);
 }
 
 @fragment
@@ -92,13 +140,9 @@ fn fs_waves(inp: VsOut) -> @location(0) vec4<f32> {
     let cuv0 = (uv - 0.5) * vec2<f32>(aspect, 1.0);
     let t = u.time;
 
-    // Background wireframe
+    // Background base only (remove decorative rings/lines for clarity)
     let gold = vec3<f32>(1.00, 0.86, 0.46);
-    let d = wireframe_bg(uv);
     var col = vec3<f32>(0.04, 0.055, 0.10);
-    let line = smoothstep(0.012, 0.002, d);
-    // Make wireframe more visible; it will bloom subtly
-    col += gold * line * (0.30 + 0.60 * u.ambient);
 
     // Three layered waves with parallax
     for (var L = 0; L < 3; L = L + 1) {

crates/app-native/src/main.rs

@@ -752,7 +752,29 @@ fn mix_sample_stereo(oscillators: &mut Vec<ActiveOscillator>) -> (f32, f32) {
         }
         i += 1;
     }
-    (left.tanh(), right.tanh())
+    // Return linear mix; master saturation is applied downstream
+    (left, right)
+}
+
+fn saturate_sample_arctan(input: f32, drive: f32) -> f32 {
+    // Soft, analog-like symmetrical arctan curve
+    (2.0 / std::f32::consts::PI) * (drive * input).atan()
+}
+
+fn apply_master_saturation(left: f32, right: f32) -> (f32, f32) {
+    // Tuned for subtle warmth and gentle compression
+    let drive = 1.6f32; // input drive into shaper
+    let wet = 0.35f32; // wet mix amount
+    let pre_gain = 0.9f32; // headroom before shaping
+    let post_gain = 1.05f32; // slight makeup gain
+
+    let l_in = left * pre_gain;
+    let r_in = right * pre_gain;
+    let l_sat = saturate_sample_arctan(l_in, drive);
+    let r_sat = saturate_sample_arctan(r_in, drive);
+    let l_out = (wet * l_sat + (1.0 - wet) * l_in) * post_gain;
+    let r_out = (wet * r_sat + (1.0 - wet) * r_in) * post_gain;
+    (l_out.clamp(-1.0, 1.0), r_out.clamp(-1.0, 1.0))
 }
 
 fn build_stream_f32(
@@ -769,7 +791,8 @@ fn build_stream_f32(
             let oscillators = &mut guard.oscillators;
             let mut frame = 0usize;
             while frame < data.len() {
-                let (l, r) = mix_sample_stereo(oscillators);
+                let (l_raw, r_raw) = mix_sample_stereo(oscillators);
+                let (l, r) = apply_master_saturation(l_raw, r_raw);
                 if channels >= 2 {
                     if frame < data.len() {
                         data[frame] = l;
@@ -802,9 +825,10 @@ fn build_stream_i16(
             let oscillators = &mut guard.oscillators;
             let mut frame = 0usize;
             while frame < data.len() {
-                let (l, r) = mix_sample_stereo(oscillators);
-                let vl = (l * i16::MAX as f32) as i16;
-                let vr = (r * i16::MAX as f32) as i16;
+                let (l_raw, r_raw) = mix_sample_stereo(oscillators);
+                let (l, r) = apply_master_saturation(l_raw, r_raw);
+                let vl = (l.clamp(-1.0, 1.0) * i16::MAX as f32) as i16;
+                let vr = (r.clamp(-1.0, 1.0) * i16::MAX as f32) as i16;
                 if channels >= 2 {
                     if frame < data.len() {
                         data[frame] = vl;
@@ -837,7 +861,8 @@ fn build_stream_u16(
             let oscillators = &mut guard.oscillators;
             let mut frame = 0usize;
             while frame < data.len() {
-                let (l, r) = mix_sample_stereo(oscillators);
+                let (l_raw, r_raw) = mix_sample_stereo(oscillators);
+                let (l, r) = apply_master_saturation(l_raw, r_raw);
                 let vl = (((l * 0.5 + 0.5).clamp(0.0, 1.0)) * u16::MAX as f32) as u16;
                 let vr = (((r * 0.5 + 0.5).clamp(0.0, 1.0)) * u16::MAX as f32) as u16;
                 if channels >= 2 {