p5((s) => {
let w = 1080 / 2; // width
let h = 1920 / 2; // height
let cw = 10; // cell width
let ch = 30; // cell height
let frames = 500;
let noiseScaleSpace = 0.0003;
let noiseScaleTime = 0.1;
s.setup = function () {
s.createCanvas(w, h);
s.frameRate(5);
s.pixelDensity(2);
s.noLoop();
};
s.draw = function () {
s.clear();
s.background("white");
s.fill("white");
s.stroke("black");
s.strokeWeight(2);
for (let x = 0; x < w; x += cw) {
for (let y = 0; y < h; y += ch) {
s.translate(x, y);
s.rotate(
s.noise(
x * noiseScaleSpace,
y * noiseScaleSpace,
s.sin(s.map(s.frameCount, 0, frames, 0, s.PI)) * noiseScaleTime
) * 1360
);
s.circle(ch / 2, cw - 5, 4);
s.resetMatrix(); // reset translate/transform/scale for next interation
}
}
if (s.frameCount > 1) {
s.saveCanvas(`image-${s.frameCount - 1}`, "png");
}
if (s.frameCount >= frames) {
s.noLoop();
}
};
s.mouseClicked = function () {
if (s.mouseX >= 0 && s.mouseX < w && s.mouseY >= 0 && s.mouseY < h) {
s.loop();
}
};
})
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.
