loop(size, checkerboard(size, palette, []))
function checkerboard(size, palette, parameters) {
const [w, h] = size;
const colors = palette.map(d3.color);
console.log(colors);
return function(elapsedTime, data) {
const t = elapsedTime / 2;
let i = 0;
const yy = d3.scaleSqrt([0, h], [4*h, h]);
for (let y = 0; y < h; y++) {
const xx = d3.scaleLinear([0, w], [-yy(y)*2, yy(y)*2]);
for (let x = 0; x < w; x++) {
const c = (xx(x) ^ yy(y) + t) >> 6 & 1;
data[i++] = colors[c].r;
data[i++] = colors[c].g;
data[i++] = colors[c].b;
data[i++] = colors[c].opacity * 255;
}
}
}
}
palette = ['#d7c49e', '#343148']
size = [920, 360]
function* loop(size, frame) {
const [width, height] = size;
const ctx = DOM.context2d(width, height);
const img = ctx.getImageData(0, 0, width, height);
let startTime = Date.now();
while (true) {
const elapsedTime = Date.now() - startTime;
frame(elapsedTime, img.data);
ctx.putImageData(img, 0, 0);
yield ctx.canvas;
}
}
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.
