Public
Edited
Apr 14, 2023
color = (i) => d3.rgb(d3.interpolateRainbow(i / (n * n)))
{
replay;
const context = DOM.context2d(n, n, 1);
const canvas = context.canvas;
const image = context.createImageData(n, n);
const { data } = image;
const array = new Uint32Array(n2);
//canvas.style.maxWidth = "100%";
//canvas.style.imageRendering = "pixelated";
function render(i) {
const xy = d2xy(i);
const [x, y] = xy;
const j = y * n + x;
const { r, g, b } = color(array[i]);
data[(j << 2) + 0] = r;
data[(j << 2) + 1] = g;
data[(j << 2) + 2] = b;
data[(j << 2) + 3] = 255;
//return xy;
}
for (let i = 0; i < n2; ++i) {
render((array[i] = i));
}
context.putImageData(image, 0, 0);
return context.canvas;
}
viewof replay = html`<button>▶︎ Replay`
function d2xy(d) {
let rx,
ry,
s,
t = d;
let x = 0,
y = 0;
for (s = 1; s < n; s <<= 1) {
rx = 1 & (t >> 1);
ry = 1 & (t ^ rx);
[x, y] = rot(s, x, y, rx, ry);
x += s * rx;
y += s * ry;
t >>= 2;
}
return [x, y];
}
function rot(n, x, y, rx, ry) {
if (!ry) {
if (rx) {
x = n - 1 - x;
y = n - 1 - y;
}
return [y, x];
}
return [x, y];
}
z = 9
n = Math.pow(2, z)
n2 = Math.pow(2, z * 2)
d3 = require("d3-color", "d3-scale-chromatic")
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
