chart = {
const context = DOM.context2d(width, height);
const positions = Float64Array.from({length: n * 2}, (_, i) => Math.random() * (i & 1 ? height : width));
const velocities = new Float64Array(n * 2);
const voronoi = new d3.Delaunay(positions).voronoi([0.5, 0.5, width - 0.5, height - 0.5]);
context.lineWidth = 0.25;
while (true) {
context.fillStyle = "#00000001";
context.fillRect(0, 0, width, height);
context.fillStyle = "white";
for (let i = 0; i < positions.length; ++i) {
const size = i & 1 ? height : width;
positions[i] += velocities[i];
if (positions[i] < 0) positions[i] += size;
else if (positions[i] > size) positions[i] -= size;
velocities[i] += 0.02 * (Math.random() - 0.5) - 0.01 * velocities[i];
}
context.beginPath();
voronoi.update().render(context);
// voronoi.renderBounds(context);
context.strokeStyle = "white";
// context.stroke.lineWidth = "2";
context.stroke();
//context.fillStyle= "white";
context.beginPath();
voronoi.delaunay.renderPoints(context, 1);
context.fillStyle = "white"
context.fill();
yield context.canvas;
}
}
// width = 2000
height = 300
n = 300
d3 = require("d3-delaunay@^5.1")
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.
