{
const w = 500;
const context = DOM.context2d(2 * w, 2 * w);
yield context.canvas;
context.translate(w * 0.9, w);
context.scale(1.4, 1.4);
let alpha = 1.28;
do {
context.clearRect(-w, -w, 2 * w, 2 * w);
const ca = Math.cos(alpha),
sa = Math.sin(alpha);
const d = d3.Delaunay.from(
Array.from({ length: 31 }, (_, i) =>
Array.from({ length: 31 }, (_, j) => [
13 * ((i - 15) * ca + (j - 15) * sa),
13 * ((i - 15) * sa - (j - 15) * ca)
])
)
.flat()
.map(([x, y]) => (x > 0 ? [x + x * 0.25, y + x * 0.25] : [x, y]))
);
context.beginPath();
d.renderHull(context);
context.strokeStyle = "green";
context.lineWidth = 3;
context.stroke();
context.lineWidth = 0.5;
context.beginPath();
(delaunay ? d : d.voronoi([-w + 1, -w + 1, w - 1, w - 1])).render(context);
context.strokeStyle = "black";
context.stroke();
context.beginPath();
delaunay ? d : d.renderPoints(context, 1);
context.fillStyle = "red";
context.fill();
alpha += 0.002;
yield context.canvas;
} while (animate);
}
d3 = require("d3", fix ? "d3-delaunay@6" : "d3-delaunay@5")
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.
