Newton's Filigree

let W=0,H=0,SW=0,SH=0,SCALE=2;
let img=null,buf=null;
let t0=0;
let offCanvas=null,offCtx=null;
let paused=false;
let phaseAcc=0;
let lastRaw=0;

function init({canvas,ctx,width,height}){
  W=width;H=height;
  SCALE=2;
  SW=Math.max(2,Math.floor(W/SCALE));
  SH=Math.max(2,Math.floor(H/SCALE));
  img=ctx.createImageData(SW,SH);
  buf=new Uint32Array(img.data.buffer);
  t0=performance.now();
  offCanvas=null;
  offCtx=null;
  paused=false;
  phaseAcc=0;
  lastRaw=0;
}

function tick({ctx,time,width,height,input}){
  if(width!==W||height!==H){
    W=width;H=height;
    SW=Math.max(2,Math.floor(W/SCALE));
    SH=Math.max(2,Math.floor(H/SCALE));
    img=ctx.createImageData(SW,SH);
    buf=new Uint32Array(img.data.buffer);
    offCanvas=null;
    offCtx=null;
  }
  const raw=(time!=null?time:(performance.now()-t0));
  const dRaw=lastRaw===0?0:Math.max(0,raw-lastRaw);
  lastRaw=raw;
  if(input && typeof input.consumeClicks==='function' && input.consumeClicks()>0){
    paused=!paused;
  }
  if(!paused) phaseAcc += dRaw;
  const phase=phaseAcc*0.0003;
  const r1x=Math.cos(phase),         r1y=Math.sin(phase);
  const r2x=Math.cos(phase+2.0943951),r2y=Math.sin(phase+2.0943951);
  const r3x=Math.cos(phase+4.1887902),r3y=Math.sin(phase+4.1887902);
  const cReal=Math.cos(3*phase), cImag=Math.sin(3*phase);

  const aspect=SW/SH;
  const zoom=1.6;
  const invW=1/SW, invH=1/SH;

  const maxIter=28;
  const eps2=1e-4;

  const c1=[255,70,160], c2=[60,220,255], c3=[255,210,80];

  for(let py=0;py<SH;py++){
    const y0=(py*invH*2-1)*zoom;
    for(let px=0;px<SW;px++){
      const x0=(px*invW*2-1)*zoom*aspect;
      let zx=x0, zy=y0;
      let which=-1;
      let iter=0;
      for(;iter<maxIter;iter++){
        const zx2=zx*zx - zy*zy;
        const zy2=2*zx*zy;
        const zx3=zx2*zx - zy2*zy;
        const zy3=zx2*zy + zy2*zx;
        const fx=zx3 - cReal;
        const fy=zy3 - cImag;
        const dx=3*zx2;
        const dy=3*zy2;
        const denom=dx*dx + dy*dy + 1e-12;
        const qx=(fx*dx + fy*dy)/denom;
        const qy=(fy*dx - fx*dy)/denom;
        zx -= qx;
        zy -= qy;
        let ex=zx-r1x, ey=zy-r1y;
        if(ex*ex+ey*ey<eps2){which=0;break;}
        ex=zx-r2x; ey=zy-r2y;
        if(ex*ex+ey*ey<eps2){which=1;break;}
        ex=zx-r3x; ey=zy-r3y;
        if(ex*ex+ey*ey<eps2){which=2;break;}
      }
      let r,g,b;
      if(which<0){r=8;g=8;b=14;}
      else{
        const base=(which===0)?c1:(which===1)?c2:c3;
        const s=1 - iter/maxIter;
        const k=0.18 + 0.82*s*s;
        r=(base[0]*k)|0;
        g=(base[1]*k)|0;
        b=(base[2]*k)|0;
      }
      buf[py*SW+px]=(255<<24)|(b<<16)|(g<<8)|r;
    }
  }

  ctx.imageSmoothingEnabled=false;
  if(!offCanvas || offCanvas.width!==SW || offCanvas.height!==SH){
    offCanvas = new OffscreenCanvas(SW, SH);
    offCtx = offCanvas.getContext('2d');
  }
  offCtx.putImageData(img,0,0);
  ctx.drawImage(offCanvas,0,0,SW,SH,0,0,W,H);

  const grd=ctx.createRadialGradient(W/2,H/2,Math.min(W,H)*0.3,W/2,H/2,Math.max(W,H)*0.7);
  grd.addColorStop(0,'rgba(0,0,0,0)');
  grd.addColorStop(1,'rgba(0,0,0,0.55)');
  ctx.fillStyle=grd;
  ctx.fillRect(0,0,W,H);
}