lathe = import("https://cdn.skypack.dev/data-lathe@0.1.0")
p5((sketch) => {
let system;
const height = 300;
let mouseX = sketch.mouseX;
let mouseY = sketch.mouseY;
sketch.colorMode(sketch.HSL);
const darkColor = sketch.color(250, 60, 10);
const lightColor = sketch.color(359, 80, 90);
sketch.setup = function () {
sketch.createCanvas(width, height);
sketch.noStroke();
sketch.fill(lightColor);
};
const noise = (x, y) => {
let v = lathe.sineFold(lathe.sineFold(x / 7 + y / 3, 3) * 2.2, 3);
return lathe.uniToBi(v);
};
sketch.draw = function () {
sketch.background(darkColor);
const t = sketch.frameCount / 200;
for (let x = 0; x < width + 5; x += 10) {
for (let y = 0; y < height + 5; y += 10) {
let offset = noise(x / height + t, y / width + t) * 40;
let amp = lathe.fold(x / width, 3) * lathe.fold(y / height, 3); // /\
amp = lathe.ease(amp, 5); // top-rounded /\
amp = lathe.ease(amp, -1); // bottom-rounded /\
offset = offset * amp;
sketch.circle(x + offset, y + offset / 2, 4);
}
}
sketch.endShape();
};
})
import {p5, ParticleSystem} from "@tmcw/p5"
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.
