lathe = import("https://cdn.skypack.dev/data-lathe@0.1.0")
p5((sketch) => {
let system;
let height = 350;
const boxSize = 50;
const adjustedWidth = width - boxSize;
const adjustedHeight = height - boxSize;
sketch.setup = function () {
sketch.createCanvas(width, height);
sketch.stroke(61.15, 59.26, 77.32);
sketch.fill(32.65, 33.79, 44.47);
};
sketch.draw = function () {
sketch.background(32.65, 33.79, 44.47);
const phase = sketch.frameCount / 1000;
Array(1200)
.fill()
.forEach((_, i) => {
const x = lathe.sineFold(i / 6.2107 + phase, 2);
const y = lathe.sineFold(i / 19.412 + phase, 2);
sketch.strokeWeight(lathe.fold(x, 3) * lathe.fold(y, 3) * 4 + 0.4);
sketch.circle(
x * adjustedWidth + boxSize / 2,
y * adjustedHeight + boxSize / 2,
boxSize
);
});
};
})
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.
