Vortex Filament Drift

// 005 - Vortex Filament Drift (fluid)
// 1:1 Original algorithm engine source
function createVortexFilament() {
  const MAX_PARTICLES = 2e3;
  const px = new Float32Array(MAX_PARTICLES);
  const py = new Float32Array(MAX_PARTICLES);
  const vortexX = new Float32Array(4);
  const vortexY = new Float32Array(4);
  const vortexGamma = new Float32Array([120, -140, 100, -110]);
  return {
    setup(context) {
      for (let i = 0; i < MAX_PARTICLES; i++) {
        px[i] = Math.random() * context.width;
        py[i] = Math.random() * context.height;
      }
    },
    render(context, timeState, params) {
      const { ctx, width, height } = context;
      const count = Math.min(MAX_PARTICLES, Number(params.particleCount || 1600));
      const coreR = Number(params.coreRadius || 20);
      const coreRSq = coreR * coreR;
      const t = timeState.time * 0.8;
      ctx.fillStyle = "rgba(8, 9, 13, 0.18)";
      ctx.fillRect(0, 0, width, height);
      const cx = width * 0.5;
      const cy = height * 0.5;
      const rOrb = Math.min(width, height) * 0.25;
      vortexX[0] = cx + Math.cos(t) * rOrb;
      vortexY[0] = cy + Math.sin(t) * rOrb;
      vortexX[1] = cx + Math.cos(t + Math.PI) * rOrb;
      vortexY[1] = cy + Math.sin(t + Math.PI) * rOrb;
      vortexX[2] = cx + Math.cos(-t * 1.3 + 1.2) * (rOrb * 0.6);
      vortexY[2] = cy + Math.sin(-t * 1.3 + 1.2) * (rOrb * 0.6);
      vortexX[3] = cx + Math.cos(-t * 1.3 - 1.2) * (rOrb * 0.6);
      vortexY[3] = cy + Math.sin(-t * 1.3 - 1.2) * (rOrb * 0.6);
      ctx.lineWidth = 1.1;
      for (let i = 0; i < count; i++) {
        let vx = 0;
        let vy = 0;
        for (let v = 0; v < 4; v++) {
          const dx = px[i] - vortexX[v];
          const dy = py[i] - vortexY[v];
          const dSq = dx * dx + dy * dy;
          const factor = vortexGamma[v] / (2 * Math.PI * (dSq + coreRSq)) * 12;
          vx += -dy * factor;
          vy += dx * factor;
        }
        const oldX = px[i];
        const oldY = py[i];
        px[i] += vx;
        py[i] += vy;
        if (px[i] < 0) px[i] += width;
        if (px[i] > width) px[i] -= width;
        if (py[i] < 0) py[i] += height;
        if (py[i] > height) py[i] -= height;
        const speed = Math.sqrt(vx * vx + vy * vy);
        const hue = (180 + speed * 15 + t * 20) % 360;
        ctx.strokeStyle = hsla(hue, 90, 60, Math.min(0.85, speed * 0.3 + 0.2));
        ctx.beginPath();
        ctx.moveTo(oldX, oldY);
        ctx.lineTo(px[i], py[i]);
        ctx.stroke();
      }
    }
  };
}

// Default parameters from content metadata
const defaultParams = [
  {
    "key": "particleCount",
    "label": "Tracer Count",
    "type": "range",
    "min": 500,
    "max": 2000,
    "step": 100,
    "defaultValue": 1600,
    "description": "Number of fluid tracers"
  },
  {
    "key": "coreRadius",
    "label": "Vortex Core Radius (rc)",
    "type": "range",
    "min": 5,
    "max": 40,
    "step": 1,
    "defaultValue": 20,
    "description": "Vortex core smoothing width"
  }
];

if (!window.__art_instances) window.__art_instances = {};
if (!window.__art_instances['vortex-filament']) {
  const inst = typeof createVortexFilament === 'function' ? createVortexFilament() : null;
  if (inst && inst.setup) {
    inst.setup({ ctx, width, height, dpr: 1, aspectRatio: width / height }, defaultParams);
  }
  window.__art_instances['vortex-filament'] = inst;
}

const instance = window.__art_instances['vortex-filament'];
if (instance && instance.render) {
  instance.render(
    { ctx, width, height, dpr: 1, aspectRatio: width / height },
    { time, deltaTime: dt, frameCount: Math.floor(time * 60), fps: 60 },
    defaultParams
  );
}