Public
Edited
Sep 16, 2024
1 star
noisejs = import("https://cdn.skypack.dev/noisejs@2.1.0")
{
const height = width/2;
const [w, h] = [width, height];
const context = DOM.context2d(w, h);
context.fillStyle = "hsl(216deg, 100%, 13%)";
context.fillRect(0, 0, w, h)
const cm = d3.scaleSequential(params.colorMap.value).domain([0, 1]);
let counter = 0;
const noise = new noisejs.Noise(Math.random());
console.log(noise.perlin2(1, 3))
// A circle is a set of points (r, theta);
function makeCircle(r, n=100) {
const points = new Array(n).fill(0);
return points.map((_, i) => ([r, Math.PI * 2 * i / n]))
}
const circle = makeCircle(height / 2.5, params.nPoints);
console.log({circle});
function toCartesian(r, t) {
return [Math.sin(t) * r + width / 2, Math.cos(t) * r + height / 2]
}
function perturb(p, t=0) {
// Return a point perturbed by a noise field in x, y, t
const [x, y] = toCartesian(...p)
const val = noise.perlin3(
x * params.sScale / 4000,
y * params.sScale / 4000,
t * params.tScale / 1000
);
const val2 = noise.perlin3(
x * params.sScale / 4000,
y * params.sScale / 4000,
t * params.tScale / 1000 + 10000
);
const dr = (val - 0.5) * params.amplitude;
const dt = (val2 - 0.5) * params.twist;
return [p[0] + dr, p[1] + dt]
}
function drawPoly(c, perturb = p => p) {
const [start, ...rest] = c;
const [r0, t0] = perturb(start);
let [x0, y0] = toCartesian(r0, t0);
const closed = [...rest, start];
closed.forEach(p => {
context.beginPath();
context.moveTo(x0, y0)
const [r1, t1] = perturb(p);
const [x1, y1] = toCartesian(r1, t1);
context.lineTo(x1, y1)
context.strokeStyle = cm(Math.sin(p[1] / 2));
context.stroke();
[x0, y0] = [x1, y1]
})
}
function tick() {
// Draw cirlce as a path.
const pert = (p) => perturb(p, counter);
drawPoly(circle, pert)
// Fade as time goes on
context.fillStyle = "hsla(216deg, 100%, 13%, 0.05)";
context.fillRect(0, 0, width, height)
}
while (true) {
tick();
// await Promises.delay(100)
counter++
yield 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.
