Public
Edited
Feb 1, 2023
canvas = {
const context = DOM.context2d(width, height);
context.clearRect(0, 0, width, height);
let points = new FastPoissonDiskSampling({
shape: [width, height],
radius: 25,
tries: 1
});
let voronoi = new d3.Delaunay(points.fill().flat()).voronoi([0, 0, width, height]);
context.beginPath();
context.strokeStyle = "teal";
voronoi.delaunay.render(context);
context.stroke();
context.beginPath();
context.strokeStyle = "turquoise";
voronoi.render(context);
context.stroke();
context.beginPath();
voronoi.delaunay.renderPoints(context);
// context.fill();
// yield context.canvas;
// for (let i = 0; i < n; ++i) {
// const x = i << 1;
// const y = x + 1;
// positions[x] += velocities[x];
// positions[y] += velocities[y];
// if (positions[x] < -margin) positions[x] += width + margin * 2;
// else if (positions[x] > width + margin) positions[x] -= width + margin * 2;
// if (positions[y] < -margin) positions[y] += height + margin * 2;
// else if (positions[y] > height + margin) positions[y] -= height + margin * 2;
// velocities[x] += 0.2 * (Math.random() - 0.5) - 0.01 * velocities[x];
// velocities[y] += 0.2 * (Math.random() - 0.5) - 0.01 * velocities[y];
// }
// voronoi.update();
// }
return context.canvas;
}
// d3 = require("d3-delaunay@^5.1")
d3 = require("d3@^6.0")
FastPoissonDiskSampling = require("https://cdn.jsdelivr.net/gh/kchapelier/fast-2d-poisson-disk-sampling@1.0.3/build/fast-poisson-disk-sampling.min.js")
noisejs = import("https://cdn.skypack.dev/noisejs@2.1.0")
d3.Delaunay
height = 600;
n = 100;
positions = Float64Array.from({length: n * 2}, (_, i) => Math.random() * (i & 1 ? height : width))
points = new FastPoissonDiskSampling({
shape: [width, height],
radius: 6,
tries: 20
});
points.fill().flat()
noise = new noisejs.Noise
d3.schemeSpectral[11]
cos_grid = {
const context = DOM.context2d(width, height);
context.clearRect(0, 0, width, height);
let points = new FastPoissonDiskSampling({
shape: [width, height],
radius: 8,
tries: 1
});
let noise = new noisejs.Noise();
noise.seed(d3.randomInt(65536)());
let voronoi = new d3.Delaunay(points.fill().flat()).voronoi([0, 0, width, height]);
let colors = d3.schemeSpectral[11];
let scale = d3.scaleQuantize()
.domain([0, 1])
.range([colors[11],colors[11],colors[10],colors[10],
colors[9],colors[9],colors[8],colors[8],
colors[7],colors[6],colors[5],colors[4],
colors[3],colors[2],colors[1]])
// .range(colors);
let { corners, triangles } = voronoi.delaunay;
let n_tri = triangles.length / 3;
let center_x = width / 2;
let center_y = height / 2;
let dist_factor = 0.5 * Math.sqrt( (width * width) + (height * height));
for (let i = 0; i < n_tri; i++) {
let polygon = voronoi.delaunay.trianglePolygon(i);
let x = polygon[0][0];
let y = polygon[0][1];
let noise_value = (noise.simplex2(x / 512, y / 384));
let noise_value_2 = (noise.simplex2(x / 32, y / 24));
let dist = Math.sqrt( (x - center_x) * (x - center_x) + (y - center_y) * (y - center_y) );
let dist_value = 1 - (dist / dist_factor);
let cos_dist = Math.cos(dist * Math.PI * 0.5 / dist_factor);
let n_val = noise_value > 0 ? noise_value : 0.0;
let comb_value = cos_dist * 0.3 + (n_val) * 0.9 * cos_dist;
if (comb_value <= 0.3) {
context.fillStyle = scale(0.2);
} else if (comb_value <= 0.8) {
context.fillStyle = scale(comb_value);
} else {
context.fillStyle = scale(0.8);
}
context.beginPath();
voronoi.delaunay.renderTriangle(i,context);
context.fill()
}
return 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.
