render = { const canvas = html`

`; const ctx = canvas.getContext("2d"); function av(a) { let x = 0; let y = 0; for (let i = 0; i < a.length; i++) { if (!a[i]) continue; const t = (2 * Math.PI * i) / a.length; x += Math.cos(t); y += Math.sin(t); } return Math.atan2(y, x); } const grayscale = (pw, ph, a, n, scw, sch, tw, th, width = 128) => { const cw = Math.round(pw * tw ** (n - 1)); const ch = Math.round(ph * th ** (n - 1)); const sx = scw / cw; const sy = sch / ch; const max = (n * (n + 1)) / 2; canvas.width = cw; canvas.height = ch; const image = ctx.createImageData(cw, ch); const data = image.data; let i = 0; for (let y = 0; y < ch; y++) { for (let x = 0; x < cw; x++) { let p = 0; let v = 0; let ex = sx; let ey = sy; for (let z = 0; z < n; z++) { const px = (x * ex) | 0; const py = (y * ey) | 0; const b = a[(px % pw) + (py % ph) * pw]; if (p > 0 || z === 0) { p += b; v += p; } else { p -= b; v -= p; } ex *= tw; ey *= th; } const c = Math.round((v / max) * 255); data[i++] = c; data[i++] = c; data[i++] = c; data[i++] = 255; } } ctx.putImageData(image, 0, 0); return html`

`; }; const colored = ( pw, ph, a, n, scw, sch, tw, th, width = 128, chroma = 0, range = 0, shift = 0 ) => { const cw = Math.round(pw * tw ** (n - 1)); const ch = Math.round(ph * th ** (n - 1)); const sx = scw / cw; const sy = sch / ch; const max = (n * (n + 1)) / 2; const sv = av(a); canvas.width = cw; canvas.height = ch; const image = ctx.createImageData(cw, ch); const data = image.data; let i = 0; for (let y = 0; y < ch; y++) { for (let x = 0; x < cw; x++) { let p = 0; let v = 0; let f = 0; let w = 0.5; let ex = sx; let ey = sy; for (let z = 0; z < n; z++) { const px = (x * ex) | 0; const py = (y * ey) | 0; const b = a[(px % pw) + (py % ph) * pw]; f += b * w; w *= 0.5; if (p > 0 || z === 0) { p += b; v += p; } else { p -= b; v -= p; } ex *= tw; ey *= th; } const h = f * Math.PI * 2 * range + sv + shift * Math.PI * 2; const rgb = oklab2rgb( v / max, chroma * Math.cos(h), chroma * Math.sin(h) ); data[i++] = Math.round(rgb[0] * 255); data[i++] = Math.round(rgb[1] * 255); data[i++] = Math.round(rgb[2] * 255); data[i++] = 255; } } ctx.putImageData(image, 0, 0); return html`

`; }; return { grayscale, colored }; }