Used to work on @observablehq — still think it rocks.
🏍 🌎 👶
setup = {
c.globalAlpha = 1;
c.fillStyle = "#e7e7db";
c.fillRect(0, 0, s, s);
c.globalAlpha = 0.1;
let iters = iterations;
mutable perlinSeedX = Math.round(Math.random() * s);
mutable perlinSeedY = Math.round(Math.random() * s);
let particle_sets = [];
for (var j = 0; j < numSets; j++) {
let ps = [];
for (var i = 0; i < numParticles; i++) {
ps.push(
new Particle(randomGaussian(s / 2, 110), randomGaussian(s / 2, 110), Math.random() * 2 * Math.PI)
);
}
particle_sets.push(ps);
}
while (iters-- > 0) yield draw(particle_sets);
}
function draw(particle_sets) {
c.fillStyle = viewof ink.value;
particle_sets.forEach((particles, index) => {
particles.forEach(particle => {
particle.update(index);
particle.display(index);
});
});
return true;
}
function scale(n) {
return (s - n / s) * 2 - 1;
}
class Particle {
constructor(x, y, phi) {
this.pos = {x, y};
this.angle = phi;
this.val = 0;
}
update(index) {
this.pos.x += Math.cos(this.angle);
this.pos.y += Math.sin(this.angle);
let nx = 1.8 * scale(this.pos.x);
let ny = 1.8 * scale(this.pos.y);
let n = {x: nx, y: ny};
let nval = (perlin.noise(n.x + mutable perlinSeedX, n.y - mutable perlinSeedY) + 0.045 * (index - numSets / 2)) % 1;
this.angle += 3 * (nval * 2 - 1);
this.val = nval;
}
display(index) {
if (this.val > bottomEnd && this.val < topEnd) {
c.fillRect(this.pos.x, this.pos.y, 1, 1);
}
}
}
randomGaussian = {
let previous = false;
let y2 = 0;
return function(mean, sd) {
let y1, x1, x2, w;
if (previous) {
y1 = y2;
previous = false;
} else {
do {
x1 = Math.random() * 2 - 1;
x2 = Math.random() * 2 - 1;
w = x1 * x1 + x2 * x2;
} while (w >= 1);
w = Math.sqrt(-2 * Math.log(w) / w);
y1 = x1 * w;
y2 = x2 * w;
previous = true;
}
var m = mean || 0;
var s = sd || 1;
return y1 * s + m;
}
}
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.
