ADSR Envelope Editor

// ADSR synthesizer envelope editor with live carrier waveform.
// Drag four knee points to set attack time, decay time, sustain level, release time.
const HIT = 14;
let W = 0, H = 0;
// Envelope params (seconds, level 0..1)
let A = 0.25, D = 0.35, S = 0.55, R = 0.65;
let PEAK = 1.0;
// Note cycle (3 s loop)
let cycle = 3.0;
let phase = 0;     // seconds within current cycle
let noteOn = true; // gate flag for current cycle
let gateLen = 1.6; // how long the note is held within the cycle
let releaseStartLevel = 0; // env value at moment of release (for accurate release ramp)
let drag = -1;     // 0=attackPeak, 1=decayKnee, 2=sustainEnd, 3=releaseEnd; -1 none
let prevDown = false;
// Envelope display rect
let envBox = { x: 0, y: 0, w: 0, h: 0 };
// Waveform history (post-amplitude, for animated rendering)
let wave, waveIdx = 0;

function init({ width, height }) {
  W = width; H = height;
  wave = new Float32Array(512);
}

function layout() {
  const pad = 14;
  const hudH = 64;
  const top = pad + hudH + 6;
  // Envelope occupies upper ~55%
  const envH = Math.max(120, (H - top - pad) * 0.55 | 0);
  envBox = { x: pad, y: top, w: W - pad * 2, h: envH };
}

// Total envelope timeline in seconds (so knee points have an x position).
function totalT() { return A + D + Math.max(0.4, gateLen - A - D) + R; }

function envValueAt(t) {
  // t is seconds since note-on; release starts at gateLen.
  if (t < 0) return 0;
  if (t < A) return PEAK * (t / Math.max(0.0001, A));
  if (t < A + D) {
    const u = (t - A) / Math.max(0.0001, D);
    return PEAK + (S - PEAK) * u;
  }
  if (t < gateLen) return S;
  const rt = t - gateLen;
  if (rt >= R) return 0;
  return releaseStartLevel * (1 - rt / Math.max(0.0001, R));
}

function kneePoints() {
  // Map seconds-time to envelope-box x; level to envelope-box y (inverted).
  const T = totalT();
  const b = envBox;
  const sx = (s) => b.x + (s / T) * b.w;
  const sy = (lvl) => b.y + b.h - lvl * b.h;
  return [
    { x: sx(A), y: sy(PEAK), label: "A" },           // attack-peak knee (drags A & PEAK loosely; we lock peak)
    { x: sx(A + D), y: sy(S), label: "D/S" },         // decay end / sustain start
    { x: sx(gateLen), y: sy(S), label: "gate off" },  // sustain hold end (drag = gateLen)
    { x: sx(gateLen + R), y: sy(0), label: "R" },     // release end
  ];
}

function clamp(v, lo, hi) { return v < lo ? lo : v > hi ? hi : v; }

function handleDrag(input) {
  const down = input.mouseDown;
  const px = input.mouseX, py = input.mouseY;
  if (down && !prevDown) {
    const pts = kneePoints();
    let best = -1, bd = HIT * HIT;
    for (let i = 0; i < pts.length; i++) {
      const dx = pts[i].x - px, dy = pts[i].y - py;
      const d = dx * dx + dy * dy;
      if (d < bd) { bd = d; best = i; }
    }
    drag = best;
  }
  if (!down) drag = -1;
  prevDown = down;

  if (drag >= 0 && down) {
    const b = envBox;
    const T = totalT();
    const tAt = clamp((px - b.x) / b.w, 0, 1) * T;
    const lvAt = clamp(1 - (py - b.y) / b.h, 0, 1);
    if (drag === 0) {            // attack length
      A = clamp(tAt, 0.02, 1.6);
    } else if (drag === 1) {     // decay end + sustain level
      D = clamp(tAt - A, 0.02, 1.6);
      S = clamp(lvAt, 0.0, 1.0);
    } else if (drag === 2) {     // gate length (sustain hold)
      gateLen = clamp(tAt, A + D + 0.05, cycle - 0.2);
      S = clamp(lvAt, 0.0, 1.0);
    } else if (drag === 3) {     // release length
      R = clamp(tAt - gateLen, 0.02, 1.8);
    }
  }
}

function drawEnvelope(ctx) {
  const b = envBox;
  ctx.fillStyle = "rgba(0,0,0,0.55)";
  ctx.fillRect(b.x, b.y, b.w, b.h);
  // grid
  ctx.strokeStyle = "rgba(255,255,255,0.08)";
  ctx.lineWidth = 1;
  for (let i = 1; i < 4; i++) {
    const y = b.y + (b.h * i) / 4;
    ctx.beginPath(); ctx.moveTo(b.x, y); ctx.lineTo(b.x + b.w, y); ctx.stroke();
  }
  // envelope polyline
  const T = totalT();
  const sx = (s) => b.x + (s / T) * b.w;
  const sy = (lv) => b.y + b.h - lv * b.h;
  ctx.strokeStyle = "#7ad8ff";
  ctx.lineWidth = 2;
  ctx.beginPath();
  ctx.moveTo(sx(0), sy(0));
  ctx.lineTo(sx(A), sy(PEAK));
  ctx.lineTo(sx(A + D), sy(S));
  ctx.lineTo(sx(gateLen), sy(S));
  ctx.lineTo(sx(gateLen + R), sy(0));
  ctx.stroke();
  // shaded fill
  ctx.fillStyle = "rgba(122,216,255,0.13)";
  ctx.beginPath();
  ctx.moveTo(sx(0), sy(0));
  ctx.lineTo(sx(A), sy(PEAK));
  ctx.lineTo(sx(A + D), sy(S));
  ctx.lineTo(sx(gateLen), sy(S));
  ctx.lineTo(sx(gateLen + R), sy(0));
  ctx.closePath();
  ctx.fill();
  // playhead
  const t = (phase / cycle) * T;
  const lvNow = envValueAt(phase);
  ctx.strokeStyle = "rgba(255,200,80,0.7)";
  ctx.beginPath(); ctx.moveTo(sx(t), b.y); ctx.lineTo(sx(t), b.y + b.h); ctx.stroke();
  ctx.fillStyle = "#ffc850";
  ctx.beginPath(); ctx.arc(sx(t), sy(lvNow), 4, 0, Math.PI * 2); ctx.fill();
  // knees
  const pts = kneePoints();
  for (let i = 0; i < pts.length; i++) {
    const hot = drag === i;
    ctx.fillStyle = hot ? "#ffd17a" : "#7ad8ff";
    ctx.strokeStyle = "rgba(0,0,0,0.6)";
    ctx.lineWidth = 2;
    ctx.beginPath(); ctx.arc(pts[i].x, pts[i].y, hot ? 9 : 7, 0, Math.PI * 2);
    ctx.fill(); ctx.stroke();
  }
}

function drawWave(ctx) {
  const pad = 14;
  const y0 = envBox.y + envBox.h + 10;
  const wh = Math.max(60, H - y0 - pad);
  const wx = pad, ww = W - pad * 2;
  ctx.fillStyle = "rgba(0,0,0,0.55)";
  ctx.fillRect(wx, y0, ww, wh);
  ctx.strokeStyle = "rgba(255,255,255,0.08)";
  ctx.beginPath(); ctx.moveTo(wx, y0 + wh / 2); ctx.lineTo(wx + ww, y0 + wh / 2); ctx.stroke();
  ctx.strokeStyle = "#ff8acc";
  ctx.lineWidth = 1.5;
  ctx.beginPath();
  for (let i = 0; i < wave.length; i++) {
    const idx = (waveIdx + i) % wave.length;
    const px = wx + (i / (wave.length - 1)) * ww;
    const py = y0 + wh / 2 - wave[idx] * (wh / 2 - 3);
    if (i === 0) ctx.moveTo(px, py); else ctx.lineTo(px, py);
  }
  ctx.stroke();
}

function drawHUD(ctx) {
  const pad = 14;
  ctx.fillStyle = "rgba(0,0,0,0.55)";
  ctx.fillRect(pad, pad, W - pad * 2, 56);
  ctx.fillStyle = "#fff";
  ctx.font = "13px monospace";
  ctx.textBaseline = "alphabetic";
  ctx.textAlign = "left";
  const row1 = `A ${(A * 1000) | 0}ms   D ${(D * 1000) | 0}ms   S ${S.toFixed(2)}   R ${(R * 1000) | 0}ms`;
  ctx.fillText(row1, pad + 10, pad + 22);
  const gate = phase < gateLen ? "GATE ON " : "GATE OFF";
  const lv = envValueAt(phase);
  ctx.fillText(`${gate}   env=${lv.toFixed(3)}   cycle ${phase.toFixed(2)}/${cycle.toFixed(1)}s`, pad + 10, pad + 42);
}

function tick({ ctx, dt, width, height, input }) {
  if (width !== W || height !== H) { W = width; H = height; }
  layout();
  // background
  ctx.fillStyle = "#0a0e1a";
  ctx.fillRect(0, 0, W, H);

  // Click anywhere outside knees triggers an early note-on.
  for (const c of input.consumeClicks()) {
    let onKnee = false;
    const pts = kneePoints();
    for (const p of pts) {
      const dx = p.x - c.x, dy = p.y - c.y;
      if (dx * dx + dy * dy < HIT * HIT) { onKnee = true; break; }
    }
    if (!onKnee) { phase = 0; noteOn = true; releaseStartLevel = 0; }
  }
  handleDrag(input);

  // Advance cycle
  const wasOn = phase < gateLen;
  phase += dt;
  if (phase >= cycle) { phase = 0; noteOn = true; releaseStartLevel = 0; }
  // Capture env at release transition for an accurate release ramp.
  if (wasOn && phase >= gateLen) releaseStartLevel = envValueAt(gateLen - 0.0001);

  // Build a sliding waveform: carrier modulated by envelope.
  // Each frame, push ~dt*sampleRate samples. Keep cheap (cap by buffer size).
  const samplesPerSec = 4000;
  const n = Math.min(wave.length, Math.max(1, (dt * samplesPerSec) | 0));
  const freq = 220; // Hz visualisation
  for (let i = 0; i < n; i++) {
    const localT = phase - (n - i) / samplesPerSec;
    const e = envValueAt(localT);
    const carrier = Math.sin(2 * Math.PI * freq * localT);
    wave[waveIdx] = e * carrier;
    waveIdx = (waveIdx + 1) % wave.length;
  }

  drawEnvelope(ctx);
  drawWave(ctx);
  drawHUD(ctx);
}