Design and coding @fastforwardlabs. Lately interested in grids. Continually interested in simulations. He/him.
canvas = {
const n = insideNum + perimeterNum;
const rawPoints = [];
for (let i = 0; i < perimeterNum; i++) {
let r = (height/3)
let theta = i/(perimeterNum) * 2 * Math.PI;
let x = width/2 + r * Math.cos(theta)
let y = height/2 + r * Math.sin(theta)
rawPoints.push(x)
rawPoints.push(y)
}
for (let i=0; i < n - perimeterNum; i++) {
let r = (height/4) * Math.sqrt(Math.random())
let theta = Math.random() * 2 * Math.PI;
let x = width/2 + r * Math.cos(theta)
let y = height/2 + r * Math.sin(theta)
rawPoints.push(x)
rawPoints.push(y)
}
const points = Float64Array.from(rawPoints)
const delaunay = new d3.Delaunay(points);
const context = DOM.context2d(width, height);
context.lineCap = "square";
const voronoi = delaunay.voronoi([0, 0, width, height]);
for (let i = 0; i < 1200; ++i) {
context.clearRect(0, 0, width, height);
context.beginPath();
voronoi.render(context);
context.strokeStyle = "red";
context.stroke();
for (let j = 0; j < n * 2; j += 2) {
const x0 = points[j], y0 = points[j + 1];
if (j > perimeterNum * 2) {
const cell = voronoi.cellPolygon(j >> 1);
if (cell === null) continue;
const [x1, y1] = d3.polygonCentroid(cell);
points[j] = x0 + (x1 - x0) * 1
points[j + 1] = y0 + (y1 - y0) * 1
}
context.fillRect(x0-1,y0-1,2,2)
}
yield context.canvas;
voronoi.update();
}
}
height = 600
d3 = require("d3-delaunay@5", "d3-polygon@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.
