Lissajous Web

// 010 - Lissajous Web (particles)
// 1:1 Original algorithm engine source
function createLissajousWeb() {
  return {
    setup() {
    },
    render(context, timeState, params) {
      const { ctx, width, height } = context;
      const t = timeState.time * Number(params.speed || 0.6);
      const a = Number(params.freqA || 3);
      const b = Number(params.freqB || 4);
      const c = Number(params.freqC || 5);
      const delta = Number(params.phaseDelta || Math.PI / 2) + t * 0.4;
      const points = 1200;
      ctx.fillStyle = "rgba(8, 9, 13, 0.15)";
      ctx.fillRect(0, 0, width, height);
      const cx = width * 0.5;
      const cy = height * 0.5;
      const rx = width * 0.38;
      const ry = height * 0.38;
      ctx.beginPath();
      for (let i = 0; i <= points; i++) {
        const phi = i / points * Math.PI * 2;
        const lx = Math.sin(a * phi + delta);
        const ly = Math.sin(b * phi);
        const lz = Math.cos(c * phi + t);
        const rotY = lx * Math.cos(t * 0.3) - lz * Math.sin(t * 0.3);
        const rotZ = lx * Math.sin(t * 0.3) + lz * Math.cos(t * 0.3);
        const depth = (rotZ + 2) / 3;
        const px = cx + rotY * rx * depth;
        const py = cy + ly * ry * depth;
        if (i === 0) ctx.moveTo(px, py);
        else ctx.lineTo(px, py);
      }
      ctx.strokeStyle = hsla((280 + t * 30) % 360, 85, 65, 0.8);
      ctx.lineWidth = 1.8;
      ctx.stroke();
      ctx.beginPath();
      for (let i = 0; i <= points; i += 4) {
        const phi = i / points * Math.PI * 2;
        const px = cx + Math.sin(a * phi + delta) * (rx * 0.75) * Math.cos(t * 0.5);
        const py = cy + Math.sin(b * phi + t) * (ry * 0.75);
        ctx.fillStyle = hsla((i * 0.5 + t * 50) % 360, 95, 70, 0.8);
        ctx.fillRect(px - 1.5, py - 1.5, 3, 3);
      }
    }
  };
}

// Default parameters from content metadata
const defaultParams = [
  {
    "key": "freqA",
    "label": "Frequency A",
    "type": "range",
    "min": 1,
    "max": 8,
    "step": 1,
    "defaultValue": 3,
    "description": "Harmonic X ratio"
  },
  {
    "key": "freqB",
    "label": "Frequency B",
    "type": "range",
    "min": 1,
    "max": 8,
    "step": 1,
    "defaultValue": 4,
    "description": "Harmonic Y ratio"
  },
  {
    "key": "speed",
    "label": "Rotation Speed",
    "type": "range",
    "min": 0.2,
    "max": 2,
    "step": 0.1,
    "defaultValue": 0.6,
    "description": "3D perspective rotation rate"
  }
];

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

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