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) * 0.999999999;
y += boundary.dist * Math.sin(phi) * 0.999999999;
} 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 = [
{ x: width / 2 - 100, y: height / 2 - 100, r: 99, inside: 0, outside: 1 },
{ x: width / 2 + 100, y: height / 2 - 100, r: 99, inside: 1, outside: 0 },
{ x: width / 2 - 100, y: height / 2 + 100, r: 99, inside: 1, outside: 0 },
{ x: width / 2 + 100, y: height / 2 + 100, r: 99, inside: 0, outside: 1 }
]
d3 = require("d3@6")
import { select } from "@jashkenas/inputs"
mutable pointers = []
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.
