Spaces:

flausch
/

fluffy-landing

Running

File size: 55,286 Bytes

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
<title>Visual Synth — Psychedelic One-File App</title>
<style>
  :root{
    --bg:#0a0d12; --panel:#0f1420; --acc:#69f; --acc2:#f0f; --text:#dfe7ff;
    --muted:#7d8aad; --glow:0 0 12px rgba(102,153,255,.5);
  }
  html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,Segoe UI,Arial,sans-serif;height:100%;}
  #wrap{position:fixed;inset:0;display:flex;overflow:hidden;}
  canvas{position:absolute;inset:0;width:100%;height:100%;display:block;background:#000;}
  #ui{
    position:relative;z-index:10;width:360px;max-width:80vw;height:100%;
    background:linear-gradient(180deg,rgba(10,13,18,.96),rgba(10,13,18,.92));
    border-right:1px solid #1c2333; box-shadow:var(--glow); overflow:auto; padding:14px 14px 100px 14px;
  }
  #title{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
  #title h1{font-size:16px;margin:0;letter-spacing:.4px;font-weight:700;}
  #status{font-size:11px;color:var(--muted); margin-left:auto}
  .btnrow{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 14px}
  button,select{
    background:#141a2a;color:#dfe7ff;border:1px solid #25304a;border-radius:8px;padding:8px 10px;cursor:pointer;
    transition:.2s; box-shadow:0 0 0 0 rgba(0,0,0,0);
  }
  button:hover{border-color:#3b4f7a;box-shadow:0 0 0 2px rgba(59,79,122,.15)}
  button.primary{background:linear-gradient(180deg,#1a2442,#12192c);border-color:#2a3960}
  .section{background:#0f1420;border:1px solid #1b2233;border-radius:12px;margin:8px 0;padding:10px}
  .section h3{margin:0 0 8px;font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:#9bb1ff}
  .grid{display:grid;grid-template-columns:1fr 64px;gap:6px 10px;align-items:center}
  .row{display:flex;gap:8px;align-items:center}
  label{font-size:12px;color:#b9c6ff}
  .val{font-size:11px;color:#9fb2ff;text-align:right}
  input[type=range]{
    width:100%; height:26px; background:transparent; -webkit-appearance:none; appearance:none;
  }
  input[type=range]::-webkit-slider-runnable-track{
    height:6px;border-radius:99px;background:linear-gradient(90deg,#263357,#1d2745);border:1px solid #2b3b61;
  }
  input[type=range]::-webkit-slider-thumb{
    -webkit-appearance:none; width:16px;height:16px;border-radius:50%;
    background:radial-gradient(circle at 30% 30%,#9cf,#58f);border:1px solid #2b3b61;margin-top:-5px;box-shadow:0 0 0 2px rgba(102,153,255,.15);
  }
  .small{font-size:11px;color:#8ea0cf}
  .split{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .muted{color:#8ea0cf}
  .sticky{position:sticky;top:0;background:linear-gradient(180deg,rgba(10,13,18,1),rgba(10,13,18,.9));padding-bottom:8px;margin-bottom:8px;z-index:5}
  #footer{position:fixed;left:0;right:0;bottom:0;padding:6px 12px;background:linear-gradient(180deg,rgba(10,13,18,.1),rgba(10,13,18,.7));display:flex;gap:10px;align-items:center;justify-content:space-between;z-index:9;border-top:1px solid #1b2233}
  #footer .hint{font-size:11px;color:#8ea0cf}
  .kbd{background:#111728;border:1px solid #2b3b61;border-radius:6px;padding:2px 6px;color:#9fb2ff;margin:0 2px}
  .badge{background:rgba(108,80,255,.12);border:1px solid rgba(108,80,255,.45);padding:2px 6px;border-radius:6px;color:#c7b9ff;font-size:11px}
  .two-col{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .hr{height:1px;background:#1b2233;margin:8px 0}
</style>
</head>
<body>
<div id="wrap">
  <canvas id="c"></canvas>
  <div id="ui">
    <div class="sticky">
      <div id="title">
        <h1>Visual Synth</h1>
        <span class="badge">psychedelic</span>
        <div id="status">FPS: <span id="fps">–</span></div>
      </div>
      <div class="btnrow">
        <button id="btnFull" title="Fullscreen (F)">Fullscreen</button>
        <button id="btnRandom" class="primary" title="Randomize (R)">Randomize</button>
        <select id="presetSel" title="Presets (1–6)"></select>
        <button id="btnSave">Preset speichern</button>
        <button id="btnLoad">Preset laden</button>
        <button id="btnRecord" title="Canvas aufnehmen">Aufnahme</button>
      </div>
      <div class="row">
        <button id="btnMic" title="Mikrofon (M)">Mic: Aus</button>
        <div class="small muted" id="audioInfo">Audio: –</div>
      </div>
    </div>

    <div class="section">
      <h3>Global & Timing</h3>
      <div class="grid">
        <label for="bpm">BPM</label><div><input id="bpm" type="range" min="40" max="200" step="1"><div class="val" id="bpmVal"></div></div>
        <label for="timeScale">Zeit-Skala</label><div><input id="timeScale" type="range" min="0.1" max="3" step="0.01"><div class="val" id="timeScaleVal"></div></div>
        <label for="seed">Seed</label><div><input id="seed" type="range" min="0" max="999" step="1"><div class="val" id="seedVal"></div></div>
      </div>
    </div>

    <div class="section">
      <h3>Pattern & Warp</h3>
      <div class="two-col">
        <div>
          <label>Pattern A</label>
          <select id="p1Type">
            <option value="0">Rings</option>
            <option value="1">Stripes</option>
            <option value="2">Checker</option>
            <option value="3">Swirl</option>
            <option value="4">FBM</option>
          </select>
        </div>
        <div>
          <label>Pattern B</label>
          <select id="p2Type">
            <option value="0">Rings</option>
            <option value="1">Stripes</option>
            <option value="2">Checker</option>
            <option value="3">Swirl</option>
            <option value="4">FBM</option>
          </select>
        </div>
      </div>
      <div class="grid">
        <label for="p1Scale">A Scale</label><div><input id="p1Scale" type="range" min="0.2" max="8" step="0.01"><div class="val" id="p1ScaleVal"></div></div>
        <label for="p2Scale">B Scale</label><div><input id="p2Scale" type="range" min="0.2" max="8" step="0.01"><div class="val" id="p2ScaleVal"></div></div>

        <label for="p1Speed">A Speed</label><div><input id="p1Speed" type="range" min="-4" max="4" step="0.01"><div class="val" id="p1SpeedVal"></div></div>
        <label for="p2Speed">B Speed</label><div><input id="p2Speed" type="range" min="-4" max="4" step="0.01"><div class="val" id="p2SpeedVal"></div></div>

        <label for="mix">Mix</label><div><input id="mix" type="range" min="0" max="1" step="0.001"><div class="val" id="mixVal"></div></div>
        <label for="blend">Blend Mode</label>
        <div>
          <select id="blend">
            <option value="0">Linear</option>
            <option value="1">Add</option>
            <option value="2">Multiply</option>
            <option value="3">Screen</option>
            <option value="4">Difference</option>
          </select>
        </div>

        <label for="noiseScale">Noise Scale</label><div><input id="noiseScale" type="range" min="0.1" max="8" step="0.01"><div class="val" id="noiseScaleVal"></div></div>
        <label for="warpAmount">Warp Amount</label><div><input id="warpAmount" type="range" min="0" max="2" step="0.001"><div class="val" id="warpAmountVal"></div></div>
        <label for="warpSpeed">Warp Speed</label><div><input id="warpSpeed" type="range" min="-4" max="4" step="0.01"><div class="val" id="warpSpeedVal"></div></div>
      </div>
    </div>

    <div class="section">
      <h3>Kaleidoskop & Transform</h3>
      <div class="grid">
        <label for="slices">Slices</label><div><input id="slices" type="range" min="1" max="16" step="1"><div class="val" id="slicesVal"></div></div>
        <label for="kAngle">Angle</label><div><input id="kAngle" type="range" min="-3.1416" max="3.1416" step="0.001"><div class="val" id="kAngleVal"></div></div>
        <label for="mirror">Mirror</label><div><input id="mirror" type="range" min="0" max="1" step="1"><div class="val" id="mirrorVal"></div></div>

        <label for="zoom">Zoom</label><div><input id="zoom" type="range" min="0.2" max="3" step="0.001"><div class="val" id="zoomVal"></div></div>
        <label for="rotSpeed">Rotate Speed</label><div><input id="rotSpeed" type="range" min="-4" max="4" step="0.01"><div class="val" id="rotSpeedVal"></div></div>
        <label for="panX">Pan X</label><div><input id="panX" type="range" min="-1" max="1" step="0.001"><div class="val" id="panXVal"></div></div>
        <label for="panY">Pan Y</label><div><input id="panY" type="range" min="-1" max="1" step="0.001"><div class="val" id="panYVal"></div></div>
      </div>
    </div>

    <div class="section">
      <h3>Feedback & Post FX</h3>
      <div class="grid">
        <label for="fbAmt">Feedback Amount</label><div><input id="fbAmt" type="range" min="0" max="1" step="0.001"><div class="val" id="fbAmtVal"></div></div>
        <label for="fbZoom">Feedback Zoom</label><div><input id="fbZoom" type="range" min="-0.2" max="0.2" step="0.001"><div class="val" id="fbZoomVal"></div></div>
        <label for="fbRot">Feedback Rotate</label><div><input id="fbRot" type="range" min="-2" max="2" step="0.001"><div class="val" id="fbRotVal"></div></div>
        <label for="fbBlend">Feedback Blend</label>
        <div>
          <select id="fbBlend">
            <option value="0">Linear</option>
            <option value="1">Add</option>
            <option value="2">Multiply</option>
            <option value="3">Screen</option>
            <option value="4">Difference</option>
          </select>
        </div>
        <label for="blur">Blur</label><div><input id="blur" type="range" min="0" max="1" step="0.001"><div class="val" id="blurVal"></div></div>
        <label for="chroma">Chromatic Aberration</label><div><input id="chroma" type="range" min="0" max="1" step="0.001"><div class="val" id="chromaVal"></div></div>
        <label for="pixel">Pixelation</label><div><input id="pixel" type="range" min="0" max="1" step="0.001"><div class="val" id="pixelVal"></div></div>
        <label for="vign">Vignette</label><div><input id="vign" type="range" min="0" max="1" step="0.001"><div class="val" id="vignVal"></div></div>
        <label for="strobe">Strobe Speed</label><div><input id="strobe" type="range" min="0" max="20" step="0.01"><div class="val" id="strobeVal"></div></div>
        <label for="strobeDuty">Strobe Duty</label><div><input id="strobeDuty" type="range" min="0.02" max="0.98" step="0.01"><div class="val" id="strobeDutyVal"></div></div>
      </div>
    </div>

    <div class="section">
      <h3>Farbe</h3>
      <div class="grid">
        <label>Palette</label>
        <div><select id="palette">
          <option value="0">Rainbow</option>
          <option value="1">Neon</option>
          <option value="2">Cyberpunk</option>
          <option value="3">Heat</option>
          <option value="4">Cool</option>
        </select></div>

        <label for="hueShift">Hue Shift</label><div><input id="hueShift" type="range" min="0" max="1" step="0.001"><div class="val" id="hueShiftVal"></div></div>
        <label for="hueSpeed">Hue Speed</label><div><input id="hueSpeed" type="range" min="-1" max="1" step="0.001"><div class="val" id="hueSpeedVal"></div></div>
        <label for="saturation">Saturation</label><div><input id="saturation" type="range" min="0" max="2" step="0.001"><div class="val" id="saturationVal"></div></div>
        <label for="contrast">Contrast</label><div><input id="contrast" type="range" min="0.2" max="3" step="0.001"><div class="val" id="contrastVal"></div></div>
        <label for="brightness">Brightness</label><div><input id="brightness" type="range" min="0" max="3" step="0.001"><div class="val" id="brightnessVal"></div></div>
        <label for="gamma">Gamma</label><div><input id="gamma" type="range" min="0.2" max="3" step="0.001"><div class="val" id="gammaVal"></div></div>
      </div>
    </div>

    <div class="section">
      <h3>LFOs (Modulation)</h3>
      <div class="small muted">Jeder LFO kann 2 Ziele modulieren. Depth ist bipolar (−/+).</div>
      <div id="lfos"></div>
    </div>

    <div class="section">
      <h3>Audio-Reaktiv</h3>
      <div class="grid">
        <label for="audioAmt">Global Amount</label><div><input id="audioAmt" type="range" min="0" max="2" step="0.001"><div class="val" id="audioAmtVal"></div></div>
        <label for="audioHue">→ Hue</label><div><input id="audioHue" type="range" min="0" max="1" step="0.001"><div class="val" id="audioHueVal"></div></div>
        <label for="audioZoom">→ Zoom</label><div><input id="audioZoom" type="range" min="0" max="1" step="0.001"><div class="val" id="audioZoomVal"></div></div>
        <label for="audioWarp">→ Warp</label><div><input id="audioWarp" type="range" min="0" max="1" step="0.001"><div class="val" id="audioWarpVal"></div></div>
        <label for="audioSlices">→ Slices</label><div><input id="audioSlices" type="range" min="0" max="1" step="0.001"><div class="val" id="audioSlicesVal"></div></div>
        <label for="audioSmooth">Smoothing</label><div><input id="audioSmooth" type="range" min="0" max="0.99" step="0.001"><div class="val" id="audioSmoothVal"></div></div>
      </div>
    </div>

    <div class="section">
      <h3>Presets & JSON</h3>
      <div class="small muted">Du kannst die aktuellen Einstellungen als JSON speichern/laden.</div>
      <textarea id="json" rows="6" style="width:100%;background:#0b1020;color:#dfe7ff;border:1px solid #1b2233;border-radius:8px;padding:8px"></textarea>
      <div class="btnrow">
        <button id="btnToJSON">→ JSON</button>
        <button id="btnFromJSON">← Aus JSON</button>
      </div>
    </div>

  </div>
</div>

<div id="footer">
  <div class="hint">Shortcuts: <span class="kbd">F</span> Fullscreen • <span class="kbd">R</span> Random • <span class="kbd">1–6</span> Presets • <span class="kbd">M</span> Mic</div>
  <div class="hint">Made for trippy visuals 🎨🔮</div>
</div>

<script>
;(() => {
  "use strict";

  const canvas = document.getElementById('c');
  const gl = canvas.getContext('webgl', {antialias:false, depth:false, stencil:false, premultipliedAlpha:false, preserveDrawingBuffer:true});
  if(!gl){ alert('WebGL wird benötigt.'); return; }

  // Shaders
  const vertSrc = `
  attribute vec2 a_pos;
  varying vec2 v_uv;
  void main(){
    v_uv = a_pos*0.5 + 0.5;
    gl_Position = vec4(a_pos,0.0,1.0);
  }`;

  const fragSrc = `
  precision mediump float;
  varying vec2 v_uv;
  uniform vec2 u_res;
  uniform float u_time;
  uniform float u_bpm;
  uniform float u_seed;

  uniform sampler2D u_prev;

  // Pattern uniforms
  uniform float u_p1Type;
  uniform float u_p2Type;
  uniform float u_p1Scale;
  uniform float u_p2Scale;
  uniform float u_p1Speed;
  uniform float u_p2Speed;
  uniform float u_mix;
  uniform float u_blend;

  // Warp
  uniform float u_noiseScale;
  uniform float u_warpAmt;
  uniform float u_warpSpeed;

  // Kaleidoscope & Transform
  uniform float u_slices;
  uniform float u_kAngle;
  uniform float u_mirror;
  uniform float u_zoom;
  uniform float u_rotSpeed;
  uniform float u_panX;
  uniform float u_panY;

  // Feedback & FX
  uniform float u_fbAmt;
  uniform float u_fbZoom;
  uniform float u_fbRot;
  uniform float u_fbBlend;
  uniform float u_blur;
  uniform float u_chroma;
  uniform float u_pixel; // pixel size in px
  uniform float u_vign;
  uniform float u_strobe;
  uniform float u_strobeDuty;

  // Color
  uniform float u_palette;
  uniform float u_hueShift;
  uniform float u_hueSpeed;
  uniform float u_saturation;
  uniform float u_contrast;
  uniform float u_brightness;
  uniform float u_gamma;

  // Audio (preprocessed)
  uniform float u_audioLevel; // 0..1
  uniform float u_audioBass;
  uniform float u_audioMid;
  uniform float u_audioHigh;

  // Helpers
  float hash21(vec2 p){
    p = fract(p*vec2(123.34, 456.21));
    p += dot(p, p+45.32);
    return fract(p.x * p.y);
  }
  vec2 hash22(vec2 p){
    float n = sin(dot(p, vec2(41.0,289.0)));
    return fract(vec2(262144.0,32768.0)*n);
  }
  float noise(vec2 p){
    vec2 i = floor(p);
    vec2 f = fract(p);
    vec2 u = f*f*(3.0-2.0*f);
    float a = hash21(i+vec2(0,0));
    float b = hash21(i+vec2(1,0));
    float c = hash21(i+vec2(0,1));
    float d = hash21(i+vec2(1,1));
    return mix(mix(a,b,u.x), mix(c,d,u.x), u.y);
  }
  float fbm(vec2 p){
    float a = 0.0;
    float amp = 0.5;
    float f = 1.0;
    for(int i=0;i<5;i++){
      a += amp * noise(p*f);
      f *= 2.0;
      amp *= 0.5;
    }
    return a;
  }
  mat2 rot(float a){ float c=cos(a), s=sin(a); return mat2(c,-s,s,c); }

  // Patterns return 0..1
  float patRings(vec2 p, float t){
    float r = length(p);
    return 0.5 + 0.5*sin(10.0*r + t);
  }
  float patStripes(vec2 p, float t){
    return 0.5 + 0.5*sin(10.0*p.x + t);
  }
  float patChecker(vec2 p, float t){
    float s = sin(6.0*p.x + t)*sin(6.0*p.y - t);
    return 0.5 + 0.5*sign(s);
  }
  float patSwirl(vec2 p, float t){
    float a = atan(p.y, p.x);
    float r = length(p);
    return 0.5 + 0.5*sin(8.0*a + 12.0*r + t*0.7);
  }
  float patFBM(vec2 p, float t){
    return fbm(p*1.2 + vec2(0.0, t*0.1));
  }
  float getPattern(float typeId, vec2 p, float scale, float speed, float t){
    p *= scale;
    float tt = t * speed;
    if(typeId < 0.5) return patRings(p, tt);
    if(typeId < 1.5) return patStripes(p, tt);
    if(typeId < 2.5) return patChecker(p, tt);
    if(typeId < 3.5) return patSwirl(p, tt);
    return patFBM(p, tt);
  }

  vec3 hsv2rgb(vec3 c){
    vec3 p = abs(fract(c.xxx + vec3(0.0, 2.0/3.0, 1.0/3.0))*6.0-3.0);
    return c.z * mix(vec3(1.0), clamp(p-1.0,0.0,1.0), c.y);
  }

  vec3 paletteCosine(float t, int pal){
    // a + b*cos(2pi*(c*t + d))
    vec3 a,b,c,d;
    if(pal==0){ // Rainbow
      a=vec3(0.5,0.5,0.5); b=vec3(0.5,0.5,0.5); c=vec3(1.0,1.0,1.0); d=vec3(0.0,0.33,0.67);
    } else if(pal==1){ // Neon
      a=vec3(0.2,0.1,0.3); b=vec3(0.8,0.3,0.9); c=vec3(1.0,1.0,1.0); d=vec3(0.0,0.2,0.4);
    } else if(pal==2){ // Cyberpunk
      a=vec3(0.08,0.05,0.12); b=vec3(0.9,0.2,0.6); c=vec3(1.0,1.0,1.0); d=vec3(0.0,0.5,0.25);
    } else if(pal==3){ // Heat
      a=vec3(0.1,0.0,0.0); b=vec3(1.0,0.5,0.0); c=vec3(1.0,1.0,1.0); d=vec3(0.0,0.15,0.25);
    } else { // Cool
      a=vec3(0.05,0.08,0.15); b=vec3(0.4,0.7,1.0); c=vec3(1.0,1.0,1.0); d=vec3(0.1,0.3,0.5);
    }
    return a + b*cos(6.28318*(c*t + d));
  }

  vec3 applyPalette(float v, float hueShift, float hueSpeed, float t, int pal){
    // Mix between cosine palette and HSV cycle
    float h = fract(hueShift + v + t * hueSpeed);
    vec3 rainbow = hsv2rgb(vec3(h, 1.0, 1.0));
    vec3 cosPal = paletteCosine(fract(v + t*0.05), pal);
    return mix(cosPal, rainbow, 0.35);
  }

  vec3 blendOp(vec3 a, vec3 b, float mode){
    if(mode<0.5) return mix(a,b,0.5);
    if(mode<1.5) return a + b;
    if(mode<2.5) return a * b;
    if(mode<3.5) return 1.0 - (1.0-a)*(1.0-b); // screen
    return abs(a-b);
  }

  void main(){
    vec2 uv = v_uv;
    vec2 res = u_res;
    vec2 p = (uv*2.0-1.0);
    p.x *= res.x/res.y;

    // Pixelation
    if(u_pixel > 1.0){
      vec2 pix = vec2(u_pixel);
      vec2 q = (floor(gl_FragCoord.xy / pix) * pix + 0.5*pix)/res;
      p = (q*2.0-1.0);
      p.x *= res.x/res.y;
      uv = q;
    }

    float t = u_time;

    // Transform: pan, rotate, zoom
    p -= vec2(u_panX, u_panY);
    float rotA = t*u_rotSpeed;
    p = rot(rotA) * p;
    p /= u_zoom;

    // Kaleidoscope
    float slices = max(1.0, floor(u_slices + 0.5));
    float seg = 6.2831853 / slices;
    float ang = atan(p.y,p.x) + u_kAngle;
    float rad = length(p);
    ang = mod(ang, seg);
    if(u_mirror > 0.5){
      ang = abs(ang - seg*0.5);
    }
    p = vec2(cos(ang), sin(ang)) * rad;

    // Domain warp
    vec2 wp = p * u_noiseScale + vec2(u_seed*0.123, u_seed*0.917);
    float n1 = fbm(wp + vec2(0.0, t*u_warpSpeed*0.3));
    float n2 = fbm(wp.yx + vec2(t*u_warpSpeed*0.25, 0.0));
    vec2 wv = vec2(n1, n2) - 0.5;
    p += wv * u_warpAmt;

    // Patterns
    float a = getPattern(u_p1Type, p, u_p1Scale, u_p1Speed, t);
    float b = getPattern(u_p2Type, p, u_p2Scale, u_p2Speed, t);
    float mixLin = mix(a,b,u_mix);
    float mixBlend;
    {
      vec3 ca = vec3(a);
      vec3 cb = vec3(b);
      vec3 cm = blendOp(ca, cb, u_blend);
      mixBlend = cm.r; // use r channel equivalently
    }
    float v = mix(mixLin, mixBlend, 0.5);

    // Color
    int pal = int(floor(u_palette+0.5));
    vec3 col = applyPalette(v, u_hueShift, u_hueSpeed, t, pal);

    // Basic tonemapping-like shaping by v
    col *= 0.7 + 0.6*v;

    // Feedback sample
    vec2 uvf = uv;
    // Feedback zoom
    uvf -= 0.5;
    float fbz = 1.0 + u_fbZoom;
    uvf = rot(u_fbRot) * (uvf / fbz);
    uvf += 0.5;

    // Blur sample from previous
    vec2 px = 1.0 / res;
    vec3 prev = texture2D(u_prev, uvf).rgb;
    if(u_blur > 0.001){
      float r = u_blur*3.0;
      vec3 acc = vec3(0.0);
      acc += texture2D(u_prev, uvf + vec2(-r, -r)*px).rgb;
      acc += texture2D(u_prev, uvf + vec2( 0., -r)*px).rgb;
      acc += texture2D(u_prev, uvf + vec2( r, -r)*px).rgb;
      acc += texture2D(u_prev, uvf + vec2(-r,  0.)*px).rgb;
      acc += texture2D(u_prev, uvf).rgb;
      acc += texture2D(u_prev, uvf + vec2( r,  0.)*px).rgb;
      acc += texture2D(u_prev, uvf + vec2(-r, r)*px).rgb;
      acc += texture2D(u_prev, uvf + vec2( 0., r)*px).rgb;
      acc += texture2D(u_prev, uvf + vec2( r, r)*px).rgb;
      prev = mix(prev, acc/9.0, clamp(u_blur,0.0,1.0));
    }

    // Chromatic aberration
    if(u_chroma > 0.001){
      vec2 off = px * (1.0 + 20.0*u_chroma);
      float rr = texture2D(u_prev, uvf + off).r;
      float gg = texture2D(u_prev, uvf - off).g;
      float bb = texture2D(u_prev, uvf + off.yx).b;
      prev = mix(prev, vec3(rr,gg,bb), u_chroma);
    }

    // Combine new color and feedback
    vec3 comb = blendOp(col, prev, u_fbBlend);
    vec3 outc = mix(col, comb, u_fbAmt);

    // Post: strobe
    if(u_strobe > 0.001){
      float ph = fract(t * u_strobe);
      float gate = step(ph, u_strobeDuty);
      outc = mix(outc, vec3(1.0), gate*0.9);
    }

    // Vignette
    if(u_vign > 0.001){
      float d = length((uv-0.5)*vec2(res.x/res.y,1.0));
      float vig = smoothstep(0.9, 0.2, d);
      outc *= mix(1.0, vig, u_vign);
    }

    // Color correction
    // Saturation
    float luma = dot(outc, vec3(0.299,0.587,0.114));
    outc = mix(vec3(luma), outc, u_saturation);
    // Contrast
    outc = (outc - 0.5)*u_contrast + 0.5;
    // Brightness
    outc *= u_brightness;
    // Gamma
    outc = pow(max(outc,0.0), vec3(max(u_gamma, 0.0001)));

    gl_FragColor = vec4(outc, 1.0);
  }`;

  const blitSrc = `
  precision mediump float;
  varying vec2 v_uv;
  uniform sampler2D u_tex;
  void main(){
    gl_FragColor = texture2D(u_tex, v_uv);
  }`;

  function compile(type, src){
    const s = gl.createShader(type);
    gl.shaderSource(s, src);
    gl.compileShader(s);
    if(!gl.getShaderParameter(s, gl.COMPILE_STATUS)){
      console.error(gl.getShaderInfoLog(s));
      throw new Error('Shader compile error');
    }
    return s;
  }
  function program(vs, fs){
    const p = gl.createProgram();
    gl.attachShader(p, compile(gl.VERTEX_SHADER, vs));
    gl.attachShader(p, compile(gl.FRAGMENT_SHADER, fs));
    gl.bindAttribLocation(p, 0, 'a_pos');
    gl.linkProgram(p);
    if(!gl.getProgramParameter(p, gl.LINK_STATUS)){
      console.error(gl.getProgramInfoLog(p));
      throw new Error('Program link error');
    }
    return p;
  }

  const prog = program(vertSrc, fragSrc);
  const blit = program(vertSrc, blitSrc);

  const quad = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, quad);
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
    -1,-1,  1,-1,  -1,1,
     1,-1,  1, 1,  -1,1,
  ]), gl.STATIC_DRAW);
  gl.enableVertexAttribArray(0);
  gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);

  function makeTex(w,h){
    const tex = gl.createTexture();
    gl.bindTexture(gl.TEXTURE_2D, tex);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, w, h, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
    return tex;
  }
  function makeFBO(tex){
    const fb = gl.createFramebuffer();
    gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
    gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, tex, 0);
    gl.bindFramebuffer(gl.FRAMEBUFFER, null);
    return fb;
  }

  let W=0, H=0, DPR=1;
  let tex = [null,null], fbo=[null,null], src=0, dst=1;

  function resize(){
    const dpr = Math.min(2, window.devicePixelRatio || 1);
    const w = Math.floor(gl.canvas.clientWidth * dpr);
    const h = Math.floor(gl.canvas.clientHeight * dpr);
    if(w===W && h===H && dpr===DPR) return;
    DPR=dpr; W=w; H=h;
    gl.canvas.width = W; gl.canvas.height = H;
    for(let i=0;i<2;i++){
      if(tex[i]) gl.deleteTexture(tex[i]);
      if(fbo[i]) gl.deleteFramebuffer(fbo[i]);
      tex[i] = makeTex(W,H);
      fbo[i] = makeFBO(tex[i]);
    }
    // Clear initial
    gl.bindFramebuffer(gl.FRAMEBUFFER, fbo[0]);
    gl.viewport(0,0,W,H);
    gl.clearColor(0,0,0,1); gl.clear(gl.COLOR_BUFFER_BIT);
    gl.bindFramebuffer(gl.FRAMEBUFFER, fbo[1]);
    gl.clear(gl.COLOR_BUFFER_BIT);
    gl.bindFramebuffer(gl.FRAMEBUFFER, null);
    src=0; dst=1;
  }

  // Params
  const params = {
    bpm:120, timeScale:1.0, seed:133,

    p1Type:0, p2Type:4, p1Scale:3.0, p2Scale:2.2, p1Speed:0.3, p2Speed:-0.2, mix:0.5, blend:3,
    noiseScale:2.0, warpAmount:0.35, warpSpeed:0.6,

    slices:6, kAngle:0.0, mirror:1, zoom:1.0, rotSpeed:0.25, panX:0, panY:0,

    fbAmt:0.22, fbZoom:-0.02, fbRot:0.02, fbBlend:4, blur:0.0, chroma:0.2, pixel:0.0, vign:0.2, strobe:0.0, strobeDuty:0.5,

    palette:0, hueShift:0.0, hueSpeed:0.05, saturation:1.0, contrast:1.15, brightness:1.05, gamma:1.0,

    audioAmt:0.5, audioHue:0.3, audioZoom:0.1, audioWarp:0.2, audioSlices:0.2, audioSmooth:0.5,
  };

  const ranges = [
    ['bpm','BPM',40,200,1,''],
    ['timeScale','Zeit-Skala',0.1,3,0.01,'x'],
    ['seed','Seed',0,999,1,''],

    ['p1Scale','A Scale',0.2,8,0.01,'x'],
    ['p2Scale','B Scale',0.2,8,0.01,'x'],
    ['p1Speed','A Speed',-4,4,0.01,''],
    ['p2Speed','B Speed',-4,4,0.01,''],
    ['mix','Mix',0,1,0.001,''],
    ['noiseScale','Noise Scale',0.1,8,0.01,'x'],
    ['warpAmount','Warp',0,2,0.001,''],
    ['warpSpeed','Warp Speed',-4,4,0.01,''],

    ['slices','Slices',1,16,1,''],
    ['kAngle','Angle',-Math.PI,Math.PI,0.001,'rad'],
    ['mirror','Mirror',0,1,1,''],
    ['zoom','Zoom',0.2,3,0.001,'x'],
    ['rotSpeed','Rotate Speed',-4,4,0.01,''],
    ['panX','Pan X',-1,1,0.001,''],
    ['panY','Pan Y',-1,1,0.001,''],

    ['fbAmt','FB Amount',0,1,0.001,''],
    ['fbZoom','FB Zoom',-0.2,0.2,0.001,''],
    ['fbRot','FB Rotate',-2,2,0.001,''],
    ['blur','Blur',0,1,0.001,''],
    ['chroma','Chroma',0,1,0.001,''],
    ['pixel','Pixelation',0,1,0.001,''],
    ['vign','Vignette',0,1,0.001,''],
    ['strobe','Strobe',0,20,0.01,'Hz'],
    ['strobeDuty','Duty',0.02,0.98,0.01,''],

    ['hueShift','Hue Shift',0,1,0.001,''],
    ['hueSpeed','Hue Speed',-1,1,0.001,''],
    ['saturation','Saturation',0,2,0.001,''],
    ['contrast','Contrast',0.2,3,0.001,''],
    ['brightness','Brightness',0,3,0.001,''],
    ['gamma','Gamma',0.2,3,0.001,''],

    ['audioAmt','Audio Amount',0,2,0.001,''],
    ['audioHue','Audio→Hue',0,1,0.001,''],
    ['audioZoom','Audio→Zoom',0,1,0.001,''],
    ['audioWarp','Audio→Warp',0,1,0.001,''],
    ['audioSlices','Audio→Slices',0,1,0.001,''],
    ['audioSmooth','Audio Smooth',0,0.99,0.001,''],
  ];

  // LFOs
  const lfoTargets = [
    ['none','–'],
    ['hueShift','Hue'],
    ['zoom','Zoom'],
    ['rotSpeed','Rotate'],
    ['warpAmount','Warp'],
    ['slices','Slices'],
    ['fbAmt','FB Amount'],
    ['blur','Blur'],
    ['chroma','Chroma'],
    ['pixel','Pixelation'],
    ['brightness','Brightness'],
    ['contrast','Contrast'],
    ['saturation','Saturation'],
    ['mix','Mix'],
  ];
  const lfos = [
    {type:'sine', rate:0.30, depth:0.40, phase:0, tgt1:'hueShift', amt1:0.35, tgt2:'warpAmount', amt2:0.25},
    {type:'sine', rate:0.12, depth:0.30, phase:0.2, tgt1:'zoom', amt1:0.15, tgt2:'rotSpeed', amt2:0.5},
    {type:'triangle', rate:0.07, depth:0.5, phase:0.5, tgt1:'slices', amt1:2.5, tgt2:'saturation', amt2:0.3},
  ];

  // UI hookup
  function byId(id){ return document.getElementById(id); }
  function setRange(id, value){
    const el = byId(id);
    if(!el) return;
    el.value = value;
    const valEl = byId(id+'Val');
    if(valEl) valEl.textContent = Number(value).toFixed(el.step && Number(el.step)<1 ? (String(el.step).split('.')[1]?.length||0) : 0);
  }
  function linkRange(id, key){
    const el = byId(id); const valEl = byId(id+'Val');
    if(!el) return;
    el.addEventListener('input', () => {
      params[key] = parseFloat(el.value);
      if(valEl) valEl.textContent = el.value;
      saveLocal();
    });
    setRange(id, params[key]);
  }
  // Attach ranges
  linkRange('bpm','bpm'); linkRange('timeScale','timeScale'); linkRange('seed','seed');
  // Pattern selects
  const p1TypeSel = byId('p1Type');
  const p2TypeSel = byId('p2Type');
  p1TypeSel.value = params.p1Type; p2TypeSel.value = params.p2Type;
  p1TypeSel.onchange = () => { params.p1Type = parseInt(p1TypeSel.value); saveLocal(); };
  p2TypeSel.onchange = () => { params.p2Type = parseInt(p2TypeSel.value); saveLocal(); };
  // Pattern ranges
  linkRange('p1Scale','p1Scale'); linkRange('p2Scale','p2Scale');
  linkRange('p1Speed','p1Speed'); linkRange('p2Speed','p2Speed');
  linkRange('mix','mix'); 
  const blendSel = byId('blend'); blendSel.value = params.blend; blendSel.onchange = () => { params.blend = parseInt(blendSel.value); saveLocal(); };
  linkRange('noiseScale','noiseScale'); linkRange('warpAmount','warpAmount'); linkRange('warpSpeed','warpSpeed');

  // Kalei & Transform
  linkRange('slices','slices'); linkRange('kAngle','kAngle'); linkRange('mirror','mirror');
  linkRange('zoom','zoom'); linkRange('rotSpeed','rotSpeed'); linkRange('panX','panX'); linkRange('panY','panY');

  // Feedback
  linkRange('fbAmt','fbAmt'); linkRange('fbZoom','fbZoom'); linkRange('fbRot','fbRot');
  const fbBlendSel = byId('fbBlend'); fbBlendSel.value = params.fbBlend; fbBlendSel.onchange = () => { params.fbBlend = parseInt(fbBlendSel.value); saveLocal(); };
  linkRange('blur','blur'); linkRange('chroma','chroma'); linkRange('pixel','pixel'); linkRange('vign','vign'); linkRange('strobe','strobe'); linkRange('strobeDuty','strobeDuty');

  // Color
  const paletteSel = byId('palette'); paletteSel.value = params.palette; paletteSel.onchange = () => { params.palette = parseInt(paletteSel.value); saveLocal(); };
  linkRange('hueShift','hueShift'); linkRange('hueSpeed','hueSpeed'); linkRange('saturation','saturation'); linkRange('contrast','contrast'); linkRange('brightness','brightness'); linkRange('gamma','gamma');

  // Audio
  linkRange('audioAmt','audioAmt'); linkRange('audioHue','audioHue'); linkRange('audioZoom','audioZoom'); linkRange('audioWarp','audioWarp'); linkRange('audioSlices','audioSlices'); linkRange('audioSmooth','audioSmooth');

  // LFO UI
  const lfoWrap = byId('lfos');
  function lfoRow(i){
    const l = lfos[i];
    const wrap = document.createElement('div'); wrap.className='section'; wrap.style.margin='8px 0'; wrap.style.padding='8px';
    wrap.innerHTML = `
      <div class="grid">
        <label>Type</label>
        <div>
          <select id="l${i}type">
            <option value="sine">Sine</option>
            <option value="triangle">Triangle</option>
            <option value="saw">Saw</option>
            <option value="square">Square</option>
          </select>
        </div>
        <label>Rate (Hz)</label><div><input id="l${i}rate" type="range" min="0.01" max="4" step="0.01"><div class="val" id="l${i}rateVal"></div></div>
        <label>Depth</label><div><input id="l${i}depth" type="range" min="-1" max="1" step="0.001"><div class="val" id="l${i}depthVal"></div></div>
        <label>Phase</label><div><input id="l${i}phase" type="range" min="0" max="1" step="0.001"><div class="val" id="l${i}phaseVal"></div></div>

        <label>Target A</label>
        <div class="row">
          <select id="l${i}t1"></select>
          <input id="l${i}a1" type="range" min="-2" max="2" step="0.001" style="width:110px">
        </div>
        <label>Target B</label>
        <div class="row">
          <select id="l${i}t2"></select>
          <input id="l${i}a2" type="range" min="-2" max="2" step="0.001" style="width:110px">
        </div>
      </div>
    `;
    lfoWrap.appendChild(wrap);
    const tsel1 = wrap.querySelector(`#l${i}t1`);
    const tsel2 = wrap.querySelector(`#l${i}t2`);
    lfoTargets.forEach(([v,lab])=>{
      const o1=document.createElement('option');o1.value=v;o1.textContent=lab; tsel1.appendChild(o1);
      const o2=document.createElement('option');o2.value=v;o2.textContent=lab; tsel2.appendChild(o2.cloneNode(true));
    });
    wrap.querySelector(`#l${i}type`).value=l.type;
    wrap.querySelector(`#l${i}rate`).value=l.rate; wrap.querySelector(`#l${i}rateVal`).textContent=l.rate;
    wrap.querySelector(`#l${i}depth`).value=l.depth; wrap.querySelector(`#l${i}depthVal`).textContent=l.depth;
    wrap.querySelector(`#l${i}phase`).value=l.phase; wrap.querySelector(`#l${i}phaseVal`).textContent=l.phase;
    tsel1.value = l.tgt1; tsel2.value = l.tgt2;
    wrap.querySelector(`#l${i}a1`).value = l.amt1;
    wrap.querySelector(`#l${i}a2`).value = l.amt2;

    wrap.querySelector(`#l${i}type`).onchange = e=>{ l.type = e.target.value; saveLocal(); };
    wrap.querySelector(`#l${i}rate`).oninput = e=>{ l.rate = parseFloat(e.target.value); wrap.querySelector(`#l${i}rateVal`).textContent=e.target.value; saveLocal(); };
    wrap.querySelector(`#l${i}depth`).oninput = e=>{ l.depth = parseFloat(e.target.value); wrap.querySelector(`#l${i}depthVal`).textContent=e.target.value; saveLocal(); };
    wrap.querySelector(`#l${i}phase`).oninput = e=>{ l.phase = parseFloat(e.target.value); wrap.querySelector(`#l${i}phaseVal`).textContent=e.target.value; saveLocal(); };
    tsel1.onchange = e=>{ l.tgt1=e.target.value; saveLocal(); };
    tsel2.onchange = e=>{ l.tgt2=e.target.value; saveLocal(); };
    wrap.querySelector(`#l${i}a1`).oninput = e=>{ l.amt1 = parseFloat(e.target.value); saveLocal(); };
    wrap.querySelector(`#l${i}a2`).oninput = e=>{ l.amt2 = parseFloat(e.target.value); saveLocal(); };
  }
  for(let i=0;i<lfos.length;i++) lfoRow(i);

  // Presets
  const presets = {
    "Kaleido Trip": {
      bpm:120,timeScale:1.0,seed:133,
      p1Type:0,p2Type:4,p1Scale:3.2,p2Scale:2.0,p1Speed:0.42,p2Speed:-0.18,mix:0.52,blend:3,
      noiseScale:2.0,warpAmount:0.45,warpSpeed:0.7,
      slices:8,kAngle:0.0,mirror:1,zoom:1.05,rotSpeed:0.35,panX:0,panY:0,
      fbAmt:0.28,fbZoom:-0.015,fbRot:0.015,fbBlend:4,blur:0.06,chroma:0.22,pixel:0.0,vign:0.25,strobe:0.0,strobeDuty:0.5,
      palette:0,hueShift:0.0,hueSpeed:0.07,saturation:1.2,contrast:1.1,brightness:1.05,gamma:1.0,
      audioAmt:0.6,audioHue:0.35,audioZoom:0.12,audioWarp:0.22,audioSlices:0.25,audioSmooth:0.6,
      lfos:[
        {type:'sine',rate:0.32,depth:0.45,phase:0.0,tgt1:'hueShift',amt1:0.35,tgt2:'warpAmount',amt2:0.25},
        {type:'sine',rate:0.11,depth:0.34,phase:0.4,tgt1:'zoom',amt1:0.18,tgt2:'rotSpeed',amt2:0.6},
        {type:'triangle',rate:0.09,depth:0.55,phase:0.2,tgt1:'slices',amt1:2.6,tgt2:'saturation',amt2:0.35},
      ],
    },
    "Neon Rings": {
      bpm:128,timeScale:1.0,seed:77,
      p1Type:0,p2Type:1,p1Scale:4.0,p2Scale:3.0,p1Speed:0.9,p2Speed:0.2,mix:0.4,blend:1,
      noiseScale:1.2,warpAmount:0.2,warpSpeed:0.3,
      slices:6,kAngle:0.2,mirror:1,zoom:1.15,rotSpeed:0.2,panX:0,panY:0,
      fbAmt:0.2,fbZoom:-0.01,fbRot:0.01,fbBlend:3,blur:0.03,chroma:0.35,pixel:0.0,vign:0.2,strobe:0,strobeDuty:0.5,
      palette:1,hueShift:0.1,hueSpeed:0.03,saturation:1.6,contrast:1.2,brightness:1.1,gamma:1.0,
      audioAmt:0.5,audioHue:0.2,audioZoom:0.08,audioWarp:0.1,audioSlices:0.1,audioSmooth:0.5,
      lfos:[
        {type:'sine',rate:0.5,depth:0.5,phase:0.0,tgt1:'hueShift',amt1:0.25,tgt2:'zoom',amt2:0.12},
        {type:'triangle',rate:0.22,depth:0.4,phase:0.2,tgt1:'rotSpeed',amt1:0.6,tgt2:'warpAmount',amt2:0.2},
        {type:'sine',rate:0.08,depth:0.3,phase:0.8,tgt1:'saturation',amt1:0.4,tgt2:'contrast',amt2:0.2},
      ],
    },
    "Liquid Warp": {
      bpm:110,timeScale:1.0,seed:311,
      p1Type:4,p2Type:4,p1Scale:2.0,p2Scale:1.5,p1Speed:0.3,p2Speed:-0.25,mix:0.5,blend:0,
      noiseScale:2.8,warpAmount:0.85,warpSpeed:0.9,
      slices:4,kAngle:0.0,mirror:0,zoom:1.0,rotSpeed:0.05,panX:0,panY:0,
      fbAmt:0.35,fbZoom:-0.03,fbRot:0.02,fbBlend:3,blur:0.15,chroma:0.25,pixel:0.05,vign:0.3,strobe:0,strobeDuty:0.5,
      palette:4,hueShift:0.0,hueSpeed:0.02,saturation:1.1,contrast:1.05,brightness:1.1,gamma:1.1,
      audioAmt:0.8,audioHue:0.25,audioZoom:0.15,audioWarp:0.3,audioSlices:0.1,audioSmooth:0.7,
      lfos:[
        {type:'sine',rate:0.18,depth:0.5,phase:0.3,tgt1:'warpAmount',amt1:0.5,tgt2:'zoom',amt2:-0.12},
        {type:'triangle',rate:0.09,depth:0.4,phase:0.5,tgt1:'slices',amt1:1.5,tgt2:'saturation',amt2:0.2},
        {type:'sine',rate:0.06,depth:0.3,phase:0.1,tgt1:'hueShift',amt1:0.2,tgt2:'contrast',amt2:-0.1},
      ],
    },
    "Data Checker": {
      bpm:140,timeScale:1.0,seed:500,
      p1Type:2,p2Type:1,p1Scale:3.5,p2Scale:4.0,p1Speed:0.5,p2Speed:-0.5,mix:0.5,blend:4,
      noiseScale:1.5,warpAmount:0.25,warpSpeed:0.4,
      slices:12,kAngle:0.0,mirror:1,zoom:1.1,rotSpeed:0.4,panX:0,panY:0,
      fbAmt:0.18,fbZoom:-0.005,fbRot:0.02,fbBlend:4,blur:0.0,chroma:0.4,pixel:0.0,vign:0.1,strobe:6,strobeDuty:0.25,
      palette:0,hueShift:0.2,hueSpeed:0.1,saturation:1.3,contrast:1.4,brightness:1.0,gamma:1.0,
      audioAmt:0.9,audioHue:0.35,audioZoom:0.2,audioWarp:0.2,audioSlices:0.4,audioSmooth:0.5,
      lfos:[
        {type:'square',rate:0.5,depth:1,phase:0,tgt1:'mix',amt1:0.6,tgt2:'contrast',amt2:0.25},
        {type:'saw',rate:0.25,depth:0.6,phase:0.3,tgt1:'slices',amt1:-3.0,tgt2:'rotSpeed',amt2:0.8},
        {type:'sine',rate:0.12,depth:0.3,phase:0.5,tgt1:'hueShift',amt1:0.4,tgt2:'brightness',amt2:-0.2},
      ],
    },
    "Cosmic Swirl": {
      bpm:100,timeScale:1.0,seed:42,
      p1Type:3,p2Type:4,p1Scale:2.5,p2Scale:2.0,p1Speed:0.2,p2Speed:0.1,mix:0.6,blend:3,
      noiseScale:2.0,warpAmount:0.5,warpSpeed:0.5,
      slices:7,kAngle:0.3,mirror:1,zoom:0.9,rotSpeed:0.18,panX:0,panY:0,
      fbAmt:0.26,fbZoom:-0.02,fbRot:0.03,fbBlend:3,blur:0.05,chroma:0.2,pixel:0.0,vign:0.25,strobe:0,strobeDuty:0.5,
      palette:2,hueShift:0.05,hueSpeed:0.04,saturation:1.4,contrast:1.15,brightness:1.05,gamma:1.0,
      audioAmt:0.5,audioHue:0.25,audioZoom:0.1,audioWarp:0.2,audioSlices:0.15,audioSmooth:0.6,
      lfos:[
        {type:'sine',rate:0.2,depth:0.5,phase:0.1,tgt1:'hueShift',amt1:0.3,tgt2:'warpAmount',amt2:0.3},
        {type:'triangle',rate:0.1,depth:0.4,phase:0.6,tgt1:'zoom',amt1:0.1,tgt2:'rotSpeed',amt2:0.45},
        {type:'sine',rate:0.08,depth:0.4,phase:0.8,tgt1:'slices',amt1:2.0,tgt2:'saturation',amt2:0.25},
      ],
    },
    "Heat Bloom": {
      bpm:90,timeScale:1.0,seed:888,
      p1Type:4,p2Type:0,p1Scale:1.6,p2Scale:2.8,p1Speed:-0.15,p2Speed:0.6,mix:0.55,blend:1,
      noiseScale:2.6,warpAmount:0.75,warpSpeed:0.6,
      slices:5,kAngle:0.0,mirror:0,zoom:1.0,rotSpeed:0.08,panX:0,panY:0,
      fbAmt:0.32,fbZoom:-0.025,fbRot:0.015,fbBlend:3,blur:0.08,chroma:0.18,pixel:0.03,vign:0.3,strobe:0,strobeDuty:0.5,
      palette:3,hueShift:0.0,hueSpeed:0.03,saturation:1.2,contrast:1.2,brightness:1.1,gamma:1.0,
      audioAmt:0.7,audioHue:0.2,audioZoom:0.15,audioWarp:0.3,audioSlices:0.2,audioSmooth:0.7,
      lfos:[
        {type:'saw',rate:0.15,depth:0.5,phase:0.0,tgt1:'warpAmount',amt1:0.4,tgt2:'brightness',amt2:0.2},
        {type:'sine',rate:0.11,depth:0.35,phase:0.2,tgt1:'hueShift',amt1:0.25,tgt2:'contrast',amt2:0.15},
        {type:'triangle',rate:0.07,depth:0.4,phase:0.6,tgt1:'slices',amt1:1.8,tgt2:'zoom',amt2:-0.08},
      ],
    },
  };
  const presetSel = byId('presetSel');
  Object.keys(presets).forEach((name,i)=>{
    const opt = document.createElement('option');
    opt.value=name; opt.textContent = `${i+1}. ${name}`;
    presetSel.appendChild(opt);
  });
  presetSel.onchange = ()=>{ loadPreset(presets[presetSel.value]); };

  function applyObj(obj, dst){
    for(const k in obj){
      if(k==='lfos' && Array.isArray(obj.lfos)){
        for(let i=0;i<lfos.length;i++){
          Object.assign(lfos[i], obj.lfos[i] || {});
        }
      } else {
        dst[k] = obj[k];
      }
    }
  }
  function loadPreset(p){
    applyObj(p, params);
    // Update UI
    p1TypeSel.value = params.p1Type; p2TypeSel.value = params.p2Type;
    blendSel.value = params.blend; fbBlendSel.value = params.fbBlend; paletteSel.value = params.palette;
    ranges.forEach(([keyLabel])=>{
      const id = keyLabel; if(byId(id)) setRange(id, params[id]);
    });
    // Update LFO UI
    const selects = lfoWrap.querySelectorAll('select, input[type=range]');
    // Re-render lfo rows by resetting values
    lfoWrap.innerHTML=''; for(let i=0;i<lfos.length;i++) lfoRow(i);
    saveLocal();
  }
  // Set default preset 1
  presetSel.selectedIndex = 0; loadPreset(presets[presetSel.value]);

  // JSON
  byId('btnToJSON').onclick = ()=>{
    const obj = {...params, lfos: lfos.map(x=>({...x}))};
    byId('json').value = JSON.stringify(obj, null, 2);
  };
  byId('btnFromJSON').onclick = ()=>{
    try{
      const obj = JSON.parse(byId('json').value);
      loadPreset(obj);
    }catch(e){ alert('Ungültiges JSON'); }
  };
  byId('btnSave').onclick = ()=>{
    const obj = {...params, lfos: lfos.map(x=>({...x}))};
    const blob = new Blob([JSON.stringify(obj, null, 2)], {type:'application/json'});
    const a = document.createElement('a');
    a.href = URL.createObjectURL(blob); a.download = 'visual-synth-preset.json'; a.click();
    URL.revokeObjectURL(a.href);
  };
  byId('btnLoad').onclick = ()=>{
    const inp = document.createElement('input');
    inp.type = 'file'; inp.accept = 'application/json';
    inp.onchange = ()=>{
      const f = inp.files[0]; if(!f) return;
      const r = new FileReader();
      r.onload = ()=>{ try{ const obj = JSON.parse(r.result); loadPreset(obj);}catch(e){ alert('Fehler beim Laden'); } };
      r.readAsText(f);
    };
    inp.click();
  };

  // Randomize
  function rand(min,max){ return Math.random()*(max-min)+min; }
  function randInt(min,max){ return Math.floor(rand(min,max+1)); }
  function randomize(){
    params.seed = randInt(0,999);
    params.p1Type = randInt(0,4);
    params.p2Type = randInt(0,4);
    params.p1Scale = rand(0.5,5);
    params.p2Scale = rand(0.5,5);
    params.p1Speed = rand(-1.5, 1.5);
    params.p2Speed = rand(-1.5, 1.5);
    params.mix = Math.random();
    params.blend = randInt(0,4);
    params.noiseScale = rand(0.8,3.5);
    params.warpAmount = rand(0.1,1.2);
    params.warpSpeed = rand(-1,1);
    params.slices = randInt(3,14);
    params.kAngle = rand(-Math.PI, Math.PI);
    params.mirror = randInt(0,1);
    params.zoom = rand(0.7,1.5);
    params.rotSpeed = rand(-0.6,0.6);
    params.panX = rand(-0.2,0.2);
    params.panY = rand(-0.2,0.2);
    params.fbAmt = rand(0.05,0.4);
    params.fbZoom = rand(-0.03,0.03);
    params.fbRot = rand(-0.05,0.05);
    params.fbBlend = randInt(0,4);
    params.blur = Math.pow(Math.random(),2)*0.2;
    params.chroma = Math.random()*0.4;
    params.pixel = Math.random()<0.3 ? Math.random()*0.15 : 0.0;
    params.vign = rand(0.05,0.35);
    params.strobe = Math.random()<0.2 ? rand(2,10) : 0;
    params.strobeDuty = rand(0.1,0.6);
    params.palette = randInt(0,4);
    params.hueShift = Math.random();
    params.hueSpeed = rand(-0.1,0.1);
    params.saturation = rand(0.8,1.8);
    params.contrast = rand(0.9,1.6);
    params.brightness = rand(0.9,1.2);
    params.gamma = rand(0.8,1.4);
    // LFOs
    const types = ['sine','triangle','saw','square'];
    lfos.forEach(l=>{
      l.type = types[randInt(0,types.length-1)];
      l.rate = rand(0.05, 0.8);
      l.depth = rand(-0.8, 0.8);
      l.phase = Math.random();
      const tkeys = lfoTargets.map(t=>t[0]).filter(x=>x!=='none');
      l.tgt1 = tkeys[randInt(0,tkeys.length-1)];
      l.tgt2 = tkeys[randInt(0,tkeys.length-1)];
      l.amt1 = rand(-0.6, 0.6) * (l.tgt1==='slices'?4:1);
      l.amt2 = rand(-0.6, 0.6) * (l.tgt2==='slices'?4:1);
    });
    // Reflect UI
    p1TypeSel.value=params.p1Type; p2TypeSel.value=params.p2Type; blendSel.value=params.blend; fbBlendSel.value=params.fbBlend; paletteSel.value=params.palette;
    ranges.forEach(([id])=>{ if(byId(id)) setRange(id, params[id]); });
    lfoWrap.innerHTML=''; for(let i=0;i<lfos.length;i++) lfoRow(i);
    saveLocal();
  }
  byId('btnRandom').onclick = randomize;

  // Local storage
  const LSKEY = 'visual-synth-state-v1';
  function saveLocal(){
    try{
      localStorage.setItem(LSKEY, JSON.stringify({params, lfos}));
    }catch(e){}
  }
  function loadLocal(){
    try{
      const s = localStorage.getItem(LSKEY);
      if(!s) return;
      const obj = JSON.parse(s);
      if(obj.params) applyObj(obj.params, params);
      if(obj.lfos) for(let i=0;i<Math.min(lfos.length, obj.lfos.length);i++) Object.assign(lfos[i], obj.lfos[i]);
      // reflect UI quickly:
      p1TypeSel.value=params.p1Type; p2TypeSel.value=params.p2Type; blendSel.value=params.blend; fbBlendSel.value=params.fbBlend; paletteSel.value=params.palette;
      ranges.forEach(([id])=>{ if(byId(id)) setRange(id, params[id]); });
      lfoWrap.innerHTML=''; for(let i=0;i<lfos.length;i++) lfoRow(i);
    }catch(e){}
  }
  loadLocal();

  // Keyboard
  window.addEventListener('keydown', (e)=>{
    if(e.repeat) return;
    if(e.key==='f' || e.key==='F'){ toggleFullscreen(); }
    if(e.key==='r' || e.key==='R'){ randomize(); }
    if(e.key==='m' || e.key==='M'){ toggleMic(); }
    if('123456'.includes(e.key)){
      const idx = Number(e.key)-1;
      const name = Object.keys(presets)[idx];
      if(name){ presetSel.value = name; loadPreset(presets[name]); }
    }
  });

  // Fullscreen
  function toggleFullscreen(){
    if(!document.fullscreenElement) document.documentElement.requestFullscreen().catch(()=>{});
    else document.exitFullscreen();
  }
  byId('btnFull').onclick = toggleFullscreen;

  // Recording
  let recorder=null, chunks=[];
  byId('btnRecord').onclick = ()=>{
    if(!recorder){
      const stream = canvas.captureStream(60);
      recorder = new MediaRecorder(stream, {mimeType:'video/webm;codecs=vp9'});
      recorder.ondataavailable = e=>{ if(e.data.size>0) chunks.push(e.data); };
      recorder.onstop = ()=>{
        const blob = new Blob(chunks, {type:'video/webm'});
        chunks = [];
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url; a.download = 'visual-synth.webm'; a.click();
        URL.revokeObjectURL(url);
        recorder = null;
        byId('btnRecord').textContent = 'Aufnahme';
      };
      recorder.start();
      byId('btnRecord').textContent = 'Aufnahme läuft...';
    } else {
      recorder.stop();
    }
  };

  // Audio input
  let audioCtx=null, analyser=null, micSource=null;
  let audioOn=false;
  const audioInfo = byId('audioInfo');
  function setupAudio(){
    if(audioCtx) return;
    audioCtx = new (window.AudioContext || window.webkitAudioContext)();
    analyser = audioCtx.createAnalyser();
    analyser.fftSize = 1024;
    analyser.smoothingTimeConstant = 0.5;
  }
  async function toggleMic(){
    try{
      if(!audioOn){
        setupAudio();
        const stream = await navigator.mediaDevices.getUserMedia({audio:true});
        micSource = audioCtx.createMediaStreamSource(stream);
        micSource.connect(analyser);
        audioOn = true; byId('btnMic').textContent = 'Mic: An';
      }else{
        if(micSource) micSource.disconnect();
        audioOn=false; byId('btnMic').textContent = 'Mic: Aus';
      }
    }catch(e){
      alert('Mikrofonzugriff fehlgeschlagen.');
    }
  }
  byId('btnMic').onclick = toggleMic;

  // FPS
  const fpsEl = byId('fps'); let lastFpsT=performance.now(), frames=0;
  function updateFPS(){
    frames++;
    const now=performance.now();
    if(now-lastFpsT>500){
      const fps = Math.round(frames*1000/(now-lastFpsT));
      fpsEl.textContent = String(fps);
      frames=0; lastFpsT=now;
    }
  }

  // Uniform locations
  const U = {};
  function getUniforms(p){
    const names = [
      'u_res','u_time','u_bpm','u_seed','u_prev',
      'u_p1Type','u_p2Type','u_p1Scale','u_p2Scale','u_p1Speed','u_p2Speed','u_mix','u_blend',
      'u_noiseScale','u_warpAmt','u_warpSpeed',
      'u_slices','u_kAngle','u_mirror','u_zoom','u_rotSpeed','u_panX','u_panY',
      'u_fbAmt','u_fbZoom','u_fbRot','u_fbBlend','u_blur','u_chroma','u_pixel','u_vign','u_strobe','u_strobeDuty',
      'u_palette','u_hueShift','u_hueSpeed','u_saturation','u_contrast','u_brightness','u_gamma',
      'u_audioLevel','u_audioBass','u_audioMid','u_audioHigh'
    ];
    gl.useProgram(p);
    for(const n of names) U[n] = gl.getUniformLocation(p, n);
  }
  getUniforms(prog);

  // Time
  let startT = performance.now() / 1000;
  let lastT = startT;

  // Audio data buffers
  let fft=null, wave=null; let audioLevel=0, audioBass=0, audioMid=0, audioHigh=0;

  function sampleAudio(dt){
    if(!analyser || !audioOn) { audioLevel*=0.95; audioBass*=0.95; audioMid*=0.95; audioHigh*=0.95; audioInfo.textContent='Audio: –'; return; }
    if(!fft){ fft = new Uint8Array(analyser.frequencyBinCount); wave = new Uint8Array(analyser.fftSize); }
    analyser.getByteFrequencyData(fft);
    analyser.getByteTimeDomainData(wave);
    const N = fft.length;
    // Bands: 0-200Hz, 200-1500Hz, 1.5k-8k (roughly)
    const sr = audioCtx.sampleRate || 48000;
    const hzPerBin = sr/2/N;
    let sum=0, bsum=0, msum=0, hsum=0, bc=0, mc=0, hc=0;
    for(let i=0;i<N;i++){
      const hz = i*hzPerBin;
      const v = fft[i]/255;
      sum += v;
      if(hz<200){ bsum+=v; bc++; }
      else if(hz<1500){ msum+=v; mc++; }
      else if(hz<8000){ hsum+=v; hc++; }
    }
    const smooth = params.audioSmooth;
    audioLevel = audioLevel*(smooth) + (1-smooth)*(sum/N);
    audioBass = audioBass*(smooth) + (1-smooth)*(bc?bsum/bc:0);
    audioMid  = audioMid*(smooth) + (1-smooth)*(mc?msum/mc:0);
    audioHigh = audioHigh*(smooth) + (1-smooth)*(hc?hsum/hc:0);
    audioInfo.textContent = `Audio: L ${audioLevel.toFixed(2)} B ${audioBass.toFixed(2)} M ${audioMid.toFixed(2)} H ${audioHigh.toFixed(2)}`;
  }

  function lfoValue(lfo, t){
    const ph = (t * lfo.rate + lfo.phase) % 1;
    const x = ph*2-1; // -1..1
    switch(lfo.type){
      case 'sine': return Math.sin(ph*2*Math.PI);
      case 'triangle': return 1-2*Math.abs(ph*2-1);
      case 'saw': return (ph*2-1);
      case 'square': return ph<0.5 ? 1 : -1;
      default: return 0;
    }
  }

  function applyMods(base, t){
    const out = {...base};
    // LFOs
    for(const L of lfos){
      const val = lfoValue(L, t) * L.depth;
      if(L.tgt1 && L.tgt1!=='none') out[L.tgt1] = (out[L.tgt1] ?? 0) + val * L.amt1;
      if(L.tgt2 && L.tgt2!=='none') out[L.tgt2] = (out[L.tgt2] ?? 0) + val * L.amt2;
    }
    // Audio
    const A = params.audioAmt;
    out.hueShift = (out.hueShift ?? base.hueShift) + A * params.audioHue * audioLevel * 0.5;
    out.zoom     = clamp((out.zoom ?? base.zoom) + A * params.audioZoom * (audioBass-0.4) * 0.6, 0.2, 3);
    out.warpAmount = clamp((out.warpAmount ?? base.warpAmount) + A * params.audioWarp * (audioMid-0.4) * 1.2, 0, 2);
    out.slices = clamp((out.slices ?? base.slices) + A * params.audioSlices * (audioHigh-0.5) * 6.0, 1, 16);
    return out;
  }

  function clamp(x,min,max){ return x<min?min:x>max?max:x; }

  // Render loop
  function draw(){
    resize();
    const now = performance.now()/1000;
    const dt = Math.max(0.001, now-lastT); lastT=now;
    sampleAudio(dt);

    const t = (now - startT) * params.timeScale;

    // Prepare final param set including mods
    const P = applyMods(params, t);

    // Upload uniforms & render to FBO[dst]
    gl.useProgram(prog);
    gl.bindFramebuffer(gl.FRAMEBUFFER, fbo[dst]);
    gl.viewport(0,0,W,H);

    gl.activeTexture(gl.TEXTURE0);
    gl.bindTexture(gl.TEXTURE_2D, tex[src]);
    gl.uniform1i(U['u_prev'], 0);

    gl.uniform2f(U['u_res'], W, H);
    gl.uniform1f(U['u_time'], t);
    gl.uniform1f(U['u_bpm'], params.bpm);
    gl.uniform1f(U['u_seed'], P.seed);

    gl.uniform1f(U['u_p1Type'], P.p1Type);
    gl.uniform1f(U['u_p2Type'], P.p2Type);
    gl.uniform1f(U['u_p1Scale'], P.p1Scale);
    gl.uniform1f(U['u_p2Scale'], P.p2Scale);
    gl.uniform1f(U['u_p1Speed'], P.p1Speed);
    gl.uniform1f(U['u_p2Speed'], P.p2Speed);
    gl.uniform1f(U['u_mix'], P.mix);
    gl.uniform1f(U['u_blend'], P.blend);

    gl.uniform1f(U['u_noiseScale'], P.noiseScale);
    gl.uniform1f(U['u_warpAmt'], P.warpAmount);
    gl.uniform1f(U['u_warpSpeed'], P.warpSpeed);

    gl.uniform1f(U['u_slices'], P.slices);
    gl.uniform1f(U['u_kAngle'], P.kAngle);
    gl.uniform1f(U['u_mirror'], P.mirror);
    gl.uniform1f(U['u_zoom'], P.zoom);
    gl.uniform1f(U['u_rotSpeed'], P.rotSpeed);
    gl.uniform1f(U['u_panX'], P.panX);
    gl.uniform1f(U['u_panY'], P.panY);

    gl.uniform1f(U['u_fbAmt'], P.fbAmt);
    gl.uniform1f(U['u_fbZoom'], P.fbZoom);
    gl.uniform1f(U['u_fbRot'], P.fbRot);
    gl.uniform1f(U['u_fbBlend'], P.fbBlend);
    gl.uniform1f(U['u_blur'], P.blur);
    gl.uniform1f(U['u_chroma'], P.chroma);
    const pixPx = P.pixel<=0 ? 0.0 : (1.0 + P.pixel*60.0);
    gl.uniform1f(U['u_pixel'], pixPx);
    gl.uniform1f(U['u_vign'], P.vign);
    gl.uniform1f(U['u_strobe'], P.strobe);
    gl.uniform1f(U['u_strobeDuty'], P.strobeDuty);

    gl.uniform1f(U['u_palette'], P.palette);
    gl.uniform1f(U['u_hueShift'], P.hueShift%1);
    gl.uniform1f(U['u_hueSpeed'], P.hueSpeed);
    gl.uniform1f(U['u_saturation'], P.saturation);
    gl.uniform1f(U['u_contrast'], P.contrast);
    gl.uniform1f(U['u_brightness'], P.brightness);
    gl.uniform1f(U['u_gamma'], P.gamma);

    gl.uniform1f(U['u_audioLevel'], audioLevel);
    gl.uniform1f(U['u_audioBass'], audioBass);
    gl.uniform1f(U['u_audioMid'], audioMid);
    gl.uniform1f(U['u_audioHigh'], audioHigh);

    gl.drawArrays(gl.TRIANGLES, 0, 6);

    // Blit to screen
    gl.useProgram(blit);
    const loc = gl.getUniformLocation(blit,'u_tex');
    gl.uniform1i(loc, 0);
    gl.bindTexture(gl.TEXTURE_2D, tex[dst]);
    gl.bindFramebuffer(gl.FRAMEBUFFER, null);
    gl.viewport(0,0,W,H);
    gl.drawArrays(gl.TRIANGLES, 0, 6);

    // swap
    const tmp=src; src=dst; dst=tmp;

    updateFPS();
    requestAnimationFrame(draw);
  }
  requestAnimationFrame(draw);

  // Buttons and init
  window.addEventListener('resize', resize);

  // Init UI values for ranges
  ranges.forEach(([id, label, min,max,step,unit])=>{
    setRange(id, params[id]);
  });

})();
</script>
</body>
</html>