Karman Vortex Street

// Karman vortex street: alternating + and - point vortices shed downstream
// of a circular cylinder at Strouhal St = f*D/U ~ 0.21. Velocity at a point
// is freestream U plus Biot-Savart sum over vortices (with softening eps to
// avoid singularities). Tracers are advected by this field and colored by
// the sign of their nearest vortex.
const NV = 60;          // max alive vortices
const NT = 900;         // tracer particles
const ST = 0.21;        // Strouhal number
const D = 56;           // cylinder diameter (px)
const U = 90;           // freestream speed (px/s)
const EPS2 = 18 * 18;   // Biot-Savart softening^2
const GAMMA = 2400;     // circulation magnitude (px^2/s)
const LIFE = 8.5;       // vortex lifetime (s)

let cyl;                // {x,y,r}
let vorts;              // {x,y,s,age} or null
let nextSlot;
let shedTimer;
let sign;
let tracers;            // Float32Array [x,y,age,sgn] per tracer
let cw, ch;
let lastT;              // last spawn time at upstream edge for tracers

function spawnVortex(width, height) {
  const idx = nextSlot;
  nextSlot = (nextSlot + 1) % NV;
  // alternate sides of the cylinder wake
  const off = (sign > 0 ? -1 : 1) * cyl.r * 0.55;
  vorts[idx] = {
    x: cyl.x + cyl.r * 1.05,
    y: cyl.y + off,
    s: sign,
    age: 0,
  };
  sign = -sign;
}

function resetTracer(i, width, height) {
  tracers[i * 4 + 0] = -5 + Math.random() * 4;
  tracers[i * 4 + 1] = Math.random() * height;
  tracers[i * 4 + 2] = 0;
  tracers[i * 4 + 3] = 0;
}

function init({ width, height }) {
  cw = width; ch = height;
  cyl = { x: width * 0.28, y: height * 0.5, r: D * 0.5 };
  vorts = new Array(NV).fill(null);
  nextSlot = 0;
  sign = 1;
  shedTimer = 0;
  tracers = new Float32Array(NT * 4);
  for (let i = 0; i < NT; i++) {
    tracers[i * 4 + 0] = Math.random() * width;
    tracers[i * 4 + 1] = Math.random() * height;
    tracers[i * 4 + 2] = Math.random() * 4;
    tracers[i * 4 + 3] = 0;
  }
  lastT = 0;
}

// velocity at (x,y) = freestream + sum_i Gamma_i / (2 pi) * perp(r) / (|r|^2 + eps)
function fieldAt(x, y, blockX, blockY, blockR2) {
  let vx = U, vy = 0;
  // cylinder: doublet-like deflection so streamlines bend around it
  const dxc = x - blockX, dyc = y - blockY;
  const r2 = dxc * dxc + dyc * dyc;
  if (r2 < blockR2 * 4 && r2 > 1) {
    const k = (blockR2 / r2);
    // potential-flow doublet: u' = U*(R^2)*(dy^2 - dx^2)/r^4, etc. (approx)
    const inv = 1 / (r2 * r2);
    vx += U * blockR2 * (dyc * dyc - dxc * dxc) * inv;
    vy += -U * blockR2 * (2 * dxc * dyc) * inv;
  }
  for (let i = 0; i < NV; i++) {
    const v = vorts[i];
    if (!v) continue;
    const rx = x - v.x, ry = y - v.y;
    const d2 = rx * rx + ry * ry + EPS2;
    const k = (v.s * GAMMA) / (6.2831853 * d2);
    // perpendicular to r: rotate by +90 deg = (-ry, rx)
    vx += -ry * k;
    vy += rx * k;
  }
  return [vx, vy];
}

function nearestSign(x, y) {
  let best = 1e12, sgn = 0;
  for (let i = 0; i < NV; i++) {
    const v = vorts[i];
    if (!v) continue;
    const dx = x - v.x, dy = y - v.y;
    const d2 = dx * dx + dy * dy;
    if (d2 < best) { best = d2; sgn = v.s; }
  }
  return best < 80 * 80 ? sgn : 0;
}

function tick({ ctx, dt, width, height, input, time }) {
  if (width !== cw || height !== ch) { cw = width; ch = height; cyl.x = width * 0.28; cyl.y = height * 0.5; }
  if (dt > 0.05) dt = 0.05;

  // mouse drag relocates cylinder (treat any hover-with-press OR hover near as drag)
  if (input.mouseDown) {
    cyl.x = Math.max(cyl.r + 8, Math.min(width * 0.6, input.mouseX));
    cyl.y = Math.max(cyl.r + 8, Math.min(height - cyl.r - 8, input.mouseY));
  }

  // shedding period T = D / (St * U)
  const period = D / (ST * U);
  shedTimer += dt;
  while (shedTimer >= period) {
    shedTimer -= period;
    spawnVortex(width, height);
  }

  // age & cull vortices
  for (let i = 0; i < NV; i++) {
    const v = vorts[i];
    if (!v) continue;
    v.age += dt;
    // advect by freestream + other vortices (skip self)
    let vx = U, vy = 0;
    for (let j = 0; j < NV; j++) {
      if (j === i) continue;
      const o = vorts[j];
      if (!o) continue;
      const rx = v.x - o.x, ry = v.y - o.y;
      const d2 = rx * rx + ry * ry + EPS2;
      const k = (o.s * GAMMA) / (6.2831853 * d2);
      vx += -ry * k;
      vy += rx * k;
    }
    v.x += vx * dt * 0.85;
    v.y += vy * dt * 0.85;
    if (v.age > LIFE || v.x > width + 20 || v.y < -20 || v.y > height + 20) vorts[i] = null;
  }

  // fade trails
  ctx.fillStyle = "rgba(10,12,20,0.18)";
  ctx.fillRect(0, 0, width, height);

  // advect tracers
  const blockR2 = cyl.r * cyl.r;
  for (let i = 0; i < NT; i++) {
    const o = i * 4;
    let x = tracers[o], y = tracers[o + 1];
    // re-spawn off-screen or stuck-in-cylinder tracers at upstream edge
    const dxc = x - cyl.x, dyc = y - cyl.y;
    if (x > width + 4 || y < -4 || y > height + 4 || (dxc * dxc + dyc * dyc) < blockR2) {
      resetTracer(i, width, height);
      continue;
    }
    const [vx, vy] = fieldAt(x, y, cyl.x, cyl.y, blockR2);
    x += vx * dt;
    y += vy * dt;
    tracers[o] = x;
    tracers[o + 1] = y;
    tracers[o + 2] += dt;
    // re-evaluate color sign every few frames
    if ((i & 7) === ((time * 60) | 0) % 8) tracers[o + 3] = nearestSign(x, y);
    const s = tracers[o + 3];
    if (s > 0) ctx.fillStyle = "rgba(240,120,60,0.85)";
    else if (s < 0) ctx.fillStyle = "rgba(70,160,240,0.85)";
    else ctx.fillStyle = "rgba(210,210,220,0.55)";
    ctx.fillRect(x, y, 1.4, 1.4);
  }

  // draw vortex cores (small glow)
  for (let i = 0; i < NV; i++) {
    const v = vorts[i];
    if (!v) continue;
    const a = Math.max(0, 1 - v.age / LIFE);
    ctx.fillStyle = v.s > 0 ? `rgba(255,150,90,${0.35 * a})` : `rgba(110,180,255,${0.35 * a})`;
    ctx.beginPath();
    ctx.arc(v.x, v.y, 5, 0, 6.2831853);
    ctx.fill();
  }

  // cylinder
  ctx.fillStyle = "rgba(30,34,46,1)";
  ctx.beginPath();
  ctx.arc(cyl.x, cyl.y, cyl.r, 0, 6.2831853);
  ctx.fill();
  ctx.strokeStyle = "rgba(200,205,215,0.7)";
  ctx.lineWidth = 1.2;
  ctx.stroke();

  // HUD
  ctx.fillStyle = "rgba(220,225,235,0.85)";
  ctx.font = "12px system-ui, sans-serif";
  const f = (ST * U) / D;
  ctx.fillText(`St=${ST.toFixed(2)}  U=${U}  D=${D}  f=${f.toFixed(2)} Hz`, 10, 16);
  ctx.fillStyle = "rgba(180,185,195,0.7)";
  ctx.fillText("drag the cylinder", 10, height - 10);
}