Doppler Effect

// Doppler effect.
// A point source emits a circular wavefront every T seconds at speed c.
// The source chases the cursor at speed v (capped below c, i.e. subsonic).
// Stationary observer at the right; the observed frequency is
//   f' = f * c / (c - v * cos(theta))
// where theta is the angle between source velocity and the
// source->observer direction.

const C = 180;            // wave speed (px/s)
const F = 1.6;            // emitter frequency (Hz)
const T = 1 / F;          // emission period (s)
const V_MAX = 150;        // max source speed (px/s) — always < C (subsonic)
const MAX_WAVES = 28;
const TRAIL_LEN = 60;

let W = 0, H = 0;
let src = { x: 0, y: 0, vx: 0, vy: 0, speed: 0 };
let obs = { x: 0, y: 0 };
let waves = [];           // ring of {x0, y0, t0}
let nextEmit = 0;
let trail = [];

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

function init({ width, height }) {
  W = width; H = height;
  src.x = W * 0.35; src.y = H * 0.55;
  src.vx = 0; src.vy = 0; src.speed = 0;
  obs.x = W * 0.82; obs.y = H * 0.55;
  waves = [];
  trail = [];
  nextEmit = 0;
}

function tick({ ctx, dt, time, width, height, input }) {
  // Resize handling — keep observer pinned to right midline.
  if (width !== W || height !== H) {
    W = width; H = height;
    obs.x = W * 0.82; obs.y = H * 0.55;
  }
  const mx = input.mouseX, my = input.mouseY;
  const haveCursor = mx > 0 && my > 0 && mx < W && my < H;

  // Steer source toward cursor at controlled speed.
  let tx = haveCursor ? mx : src.x;
  let ty = haveCursor ? my : src.y;
  // Don't let source overlap observer — push target away when too close.
  const dox = tx - obs.x, doy = ty - obs.y;
  const dod = Math.hypot(dox, doy);
  if (dod < 22) { tx = obs.x - 28 * (dox / (dod || 1)); ty = obs.y - 28 * (doy / (dod || 1)); }

  const dx = tx - src.x, dy = ty - src.y;
  const dist = Math.hypot(dx, dy);
  const targetSpeed = haveCursor ? clamp(dist * 1.6, 0, V_MAX) : 0;
  const dirX = dist > 0.5 ? dx / dist : 0;
  const dirY = dist > 0.5 ? dy / dist : 0;
  // Smoothly accelerate toward target velocity.
  const tvx = dirX * targetSpeed, tvy = dirY * targetSpeed;
  const ease = Math.min(1, dt * 4);
  src.vx += (tvx - src.vx) * ease;
  src.vy += (tvy - src.vy) * ease;
  src.x += src.vx * dt;
  src.y += src.vy * dt;
  src.x = clamp(src.x, 8, W - 8);
  src.y = clamp(src.y, 8, H - 8);
  src.speed = Math.hypot(src.vx, src.vy);

  // Trail of source positions.
  trail.push({ x: src.x, y: src.y });
  if (trail.length > TRAIL_LEN) trail.shift();

  // Emit a wavefront every T seconds.
  if (time >= nextEmit) {
    waves.push({ x0: src.x, y0: src.y, t0: time });
    if (waves.length > MAX_WAVES) waves.shift();
    nextEmit = time + T;
  }

  // --- Render ---
  // Fading background — leaves soft trails on wavefronts.
  ctx.fillStyle = "rgba(4,6,12,0.28)";
  ctx.fillRect(0, 0, W, H);

  // Source motion trail.
  ctx.lineWidth = 1;
  ctx.beginPath();
  for (let i = 0; i < trail.length; i++) {
    const p = trail[i];
    if (i === 0) ctx.moveTo(p.x, p.y); else ctx.lineTo(p.x, p.y);
  }
  ctx.strokeStyle = "rgba(180,200,255,0.25)";
  ctx.stroke();

  // Wavefronts — radius = c*(t - t0). Color by relative compression.
  for (const w of waves) {
    const age = time - w.t0;
    const r = C * age;
    const maxR = Math.hypot(W, H);
    if (r > maxR + 20) continue;
    const a = clamp(0.55 * (1 - r / maxR), 0.04, 0.55);
    // Hue: ahead of source = blue-shifted (cyan/blue), behind = red.
    // Use angle from emission point to current source position.
    let hue = 200;
    if (src.speed > 2) {
      const ex = src.x - w.x0, ey = src.y - w.y0;
      const edist = Math.hypot(ex, ey);
      if (edist > 1) {
        // Average hue per wavefront is just blue-ish; we'll draw the
        // bunched/spread structure visually via geometry, but tint the
        // newest 6 wavefronts by source-direction angle vs. observer.
      }
    }
    ctx.strokeStyle = `hsla(${hue},80%,65%,${a})`;
    ctx.lineWidth = 1.1;
    ctx.beginPath(); ctx.arc(w.x0, w.y0, r, 0, Math.PI * 2); ctx.stroke();
  }

  // Observer dot with pulse keyed to *observed* arrivals.
  // Compute f' = f * c / (c - v*cos(theta))
  const sox = obs.x - src.x, soy = obs.y - src.y;
  const sodist = Math.hypot(sox, soy);
  let cosTheta = 0;
  if (src.speed > 0.01 && sodist > 0.01) {
    cosTheta = (src.vx * sox + src.vy * soy) / (src.speed * sodist);
  }
  const denom = C - src.speed * cosTheta;
  const fObs = denom > 1 ? F * C / denom : F * 6; // cap on rare near-sonic
  // Pulse observer when a wavefront crosses it.
  let observerPulse = 0;
  for (const w of waves) {
    const r = C * (time - w.t0);
    const d = Math.hypot(obs.x - w.x0, obs.y - w.y0);
    const gap = Math.abs(r - d);
    if (gap < 6) observerPulse = Math.max(observerPulse, 1 - gap / 6);
  }
  const obsR = 6 + observerPulse * 6;
  const og = ctx.createRadialGradient(obs.x, obs.y, 0, obs.x, obs.y, obsR + 8);
  og.addColorStop(0, `rgba(255,230,140,${0.6 + observerPulse * 0.4})`);
  og.addColorStop(1, "rgba(255,230,140,0)");
  ctx.fillStyle = og;
  ctx.beginPath(); ctx.arc(obs.x, obs.y, obsR + 8, 0, Math.PI * 2); ctx.fill();
  ctx.fillStyle = "rgba(255,235,160,0.95)";
  ctx.beginPath(); ctx.arc(obs.x, obs.y, 3.5, 0, Math.PI * 2); ctx.fill();

  // Source dot — colored by approach/recession relative to observer.
  // Blue = approaching (cosTheta > 0), red = receding.
  const tint = clamp(cosTheta, -1, 1);
  const srcHue = 210 - tint * 200; // ~210 blue when approaching, ~10 red when receding
  const sg = ctx.createRadialGradient(src.x, src.y, 0, src.x, src.y, 16);
  sg.addColorStop(0, `hsla(${srcHue},95%,65%,0.95)`);
  sg.addColorStop(1, `hsla(${srcHue},95%,55%,0)`);
  ctx.fillStyle = sg;
  ctx.beginPath(); ctx.arc(src.x, src.y, 16, 0, Math.PI * 2); ctx.fill();
  ctx.fillStyle = `hsl(${srcHue},95%,70%)`;
  ctx.beginPath(); ctx.arc(src.x, src.y, 3, 0, Math.PI * 2); ctx.fill();

  // Velocity arrow.
  if (src.speed > 4) {
    const ux = src.vx / src.speed, uy = src.vy / src.speed;
    const L = 18 + (src.speed / V_MAX) * 22;
    const ax = src.x + ux * L, ay = src.y + uy * L;
    ctx.strokeStyle = `hsla(${srcHue},90%,75%,0.85)`;
    ctx.lineWidth = 2;
    ctx.beginPath(); ctx.moveTo(src.x, src.y); ctx.lineTo(ax, ay); ctx.stroke();
    // arrowhead
    const px = -uy, py = ux;
    ctx.beginPath();
    ctx.moveTo(ax, ay);
    ctx.lineTo(ax - ux * 6 + px * 4, ay - uy * 6 + py * 4);
    ctx.lineTo(ax - ux * 6 - px * 4, ay - uy * 6 - py * 4);
    ctx.closePath();
    ctx.fillStyle = `hsla(${srcHue},90%,75%,0.9)`;
    ctx.fill();
  }

  // HUD.
  ctx.fillStyle = "rgba(4,6,12,0.55)";
  ctx.fillRect(0, 0, W, 44);
  ctx.fillStyle = "rgba(220,230,255,0.95)";
  ctx.font = "12px monospace";
  const mach = src.speed / C;
  const shift = fObs / F;
  ctx.fillText(`f = ${F.toFixed(2)} Hz    c = ${C} px/s    v = ${src.speed.toFixed(0)} px/s   v/c = ${mach.toFixed(2)}`, 10, 16);
  ctx.fillStyle = tint > 0.05 ? "rgba(140,200,255,0.95)"
                : tint < -0.05 ? "rgba(255,170,150,0.95)"
                : "rgba(220,230,255,0.95)";
  const dir = tint > 0.05 ? "approaching" : tint < -0.05 ? "receding" : "transverse";
  ctx.fillText(`f' = ${fObs.toFixed(2)} Hz   (${shift.toFixed(2)}x, ${dir})   cos theta = ${cosTheta.toFixed(2)}`, 10, 34);

  // Footer hint.
  ctx.fillStyle = "rgba(160,180,210,0.7)";
  ctx.fillText("move cursor to drag the source · gold dot = observer", 10, H - 10);
}