Public
Edited
Jan 9, 2023
4 forks
35 stars
function closestCirclePoint(x, y, circle) {
const r = Math.hypot(x - circle.x, y - circle.y);
return {
dist: Math.abs(circle.r - r),
value: r < circle.r ? circle.inside : circle.outside
};
}
function closestBoundary(x, y) {
const boundaries = circles.map(circle => closestCirclePoint(x, y, circle));
return d3.least(boundaries, d => d.dist);
}
function walkOnSpheres(x, y) {
let steps = 10,
boundary;
do {
boundary = closestBoundary(x, y);
const phi = Math.random() * 2 * Math.PI;
x += boundary.dist * Math.cos(phi);
y += boundary.dist * Math.sin(phi);
} while (steps-- > 0 && boundary.dist > 1);
return boundary.value;
}
values = {
const RUNS = 7;
const values = new Float32Array(width * height);
for (let c = 0; c < RUNS; c++) {
for (let i = 0; i < width; i++) {
for (let j = 0; j < height; j++) {
const k = i + width * j;
values[k] = (c * values[k] + walkOnSpheres(i, j)) / (c + 1);
}
if (i % 60 === 0) {
yield values;
}
}
}
yield values;
}
color = d3.scaleSequential(d3[`interpolate${colorInterpolator}`])
colors = d3.range(0, 1, 1 / 256).map(v => d3.rgb(color(v)))
height = 500
circles = (replay,
Array.from({ length: 10 }, () => ({
x: Math.random() * width,
y: Math.random() * height,
r: (Math.random() * width) / 4,
inside: Math.random() / 2,
outside: (1 + Math.random()) / 2
})))
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.
