Visualization toolmaker. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.
Published
Edited
Oct 5, 2018
3 forks
3 stars
canvas = {
const height = 600;
const context = DOM.context2d(width, height, 1);
context.canvas.style.imageRendering = "pixelated";
context.globalCompositeOperation = "copy";
// Initialize the first row.
let row1 = context.getImageData(0, 0, width, 1);
for (let i = 0; i < width; ++i) {
const p = (i << 2) + 3;
row1.data[p] = Math.random() < density ? 255 : 0;
}
context.putImageData(row1, 0, 0);
let row2 = context.createImageData(width, 1);
for (let j = 1; true; ++j) {
// Read from the first row to write to the second.
for (let i = 0; i < width; ++i) {
const v0 = row1.data[((i > 0 ? i - 1 : width - 1) << 2) + 3] && 0b100;
const v1 = row1.data[(i << 2) + 3] && 0b010;
const v2 = row1.data[((i < width - 1 ? i + 1 : 0) << 2) + 3] && 0b001;
row2.data[(i << 2) + 3] = rule & (1 << (v0 | v1 | v2)) ? 255 : 0;
}
// Swap the rows.
[row1, row2] = [row2, row1];
// Append until the canvas is full.
if (j < height) {
context.putImageData(row2, 0, j);
continue;
}
// Otherwise, shift the canvas up before appending the new row.
context.drawImage(context.canvas, 0, -1);
context.putImageData(row2, 0, height - 1);
yield context.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.
