Published
Edited
Jun 4, 2021
Insert cell
Insert cell
canvas = {
const r = 2.5;
const context = DOM.context2d(width, height);
const curve = d3.curveBasisClosed(context);
context.lineWidth = 1.5;
while (true) {
const points = [...circles(Date.now())];
const voronoi = d3.Delaunay.from(points).voronoi([0, 0, width, height]);
context.fillStyle = "#00a";
context.fillRect(0, 0, width, height);
context.fillStyle = "#0a0";
for (let i = 49, n = points.length; i < n; ++i) {
context.beginPath();
context.fillStyle = ("#0" + Math.round(((i + Date.now()/100) / 5) % 9) + "" + Math.round(9 - ((i + Date.now()/100) / 5) % 9));
const cell = voronoi.cellPolygon(i);
if (cell === null) continue;
resample(curve, cell);
context.fill();
context.stroke();
context.closePath();
}
yield context.canvas;
}
}
Insert cell
function* circles(now) {
const t = now / 60, cx = width / 2, cy = height / 2;
for (let i = 24; i >= 0; --i) {
yield* circle(cx, cy , i*7, i*2, -0.006 *i *t);
}
}
Insert cell
function* circle(cx, cy, r, n, da) {
for (let i = 0; i < n; ++i) {
const a = i * 2 * Math.PI / n + da;
yield [cx + Math.cos(a) * r, cy + Math.sin(a) * r];
}
}
Insert cell
function resample(curve, points) {
const n = points.length;
let p0, p1 = points[n - 1];
let x0, x1 = p1[0];
let y0, y1 = p1[1];
curve.lineStart();
for (let i = 0; i < n; ++i) {
p0 = p1, x0 = x1, y0 = y1;
p1 = points[i], x1 = p1[0], y1 = p1[1];
if (x0 === x1 && y0 === y1) continue;
curve.point((x0 * 2 + x1) / 3, (y0 * 2 + y1) / 3);
curve.point((x0 + x1 * 2) / 3, (y0 + y1 * 2) / 3);
curve.point(...p1);
}
curve.lineEnd();
}
Insert cell
height = 600
Insert cell
d3 = require("d3-shape@1", "d3-delaunay@5")
Insert cell

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.
Learn more