Standing Wave Grid

// 018 - Standing Wave Grid (waves)
// 1:1 Original algorithm engine source
function createStandingWaveGrid() {
  const MAX_SAND = 3e3;
  const px = new Float32Array(MAX_SAND);
  const py = new Float32Array(MAX_SAND);
  return {
    setup() {
      for (let i = 0; i < MAX_SAND; i++) {
        px[i] = Math.random();
        py[i] = Math.random();
      }
    },
    render(context, timeState, params) {
      const { ctx, width, height } = context;
      const count = Math.min(MAX_SAND, Number(params.sandCount || 2400));
      const n = Number(params.modeN || 3) + Math.sin(timeState.time * 0.3) * 0.5;
      const m = Number(params.modeM || 5) + Math.cos(timeState.time * 0.25) * 0.5;
      const t = timeState.time;
      ctx.fillStyle = "rgba(8, 9, 13, 0.2)";
      ctx.fillRect(0, 0, width, height);
      for (let i = 0; i < count; i++) {
        const x = px[i];
        const y = py[i];
        const val = Math.sin(n * Math.PI * x) * Math.sin(m * Math.PI * y) - Math.sin(m * Math.PI * x) * Math.sin(n * Math.PI * y);
        const eps = 0.01;
        const valDx = Math.sin(n * Math.PI * (x + eps)) * Math.sin(m * Math.PI * y) - Math.sin(m * Math.PI * (x + eps)) * Math.sin(n * Math.PI * y);
        const valDy = Math.sin(n * Math.PI * x) * Math.sin(m * Math.PI * (y + eps)) - Math.sin(m * Math.PI * x) * Math.sin(n * Math.PI * (y + eps));
        const gradX = (Math.abs(valDx) - Math.abs(val)) / eps;
        const gradY = (Math.abs(valDy) - Math.abs(val)) / eps;
        px[i] -= gradX * 6e-4 + (Math.random() - 0.5) * 2e-3;
        py[i] -= gradY * 6e-4 + (Math.random() - 0.5) * 2e-3;
        if (px[i] < 0) px[i] = Math.random();
        if (px[i] > 1) px[i] = Math.random();
        if (py[i] < 0) py[i] = Math.random();
        if (py[i] > 1) py[i] = Math.random();
        const renderX = px[i] * width;
        const renderY = py[i] * height;
        const hue = (210 + Math.abs(val) * 120 + t * 10) % 360;
        ctx.fillStyle = hsla(hue, 90, 70, 0.8);
        ctx.fillRect(renderX, renderY, 1.6, 1.6);
      }
    }
  };
}

// Default parameters from content metadata
const defaultParams = [
  {
    "key": "modeN",
    "label": "Eigenmode N",
    "type": "range",
    "min": 1,
    "max": 8,
    "step": 1,
    "defaultValue": 3,
    "description": "Horizontal harmonic mode"
  },
  {
    "key": "modeM",
    "label": "Eigenmode M",
    "type": "range",
    "min": 1,
    "max": 8,
    "step": 1,
    "defaultValue": 5,
    "description": "Vertical harmonic mode"
  }
];

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

const instance = window.__art_instances['standing-wave-grid'];
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
  );
}