p5((s) => {
let w = 1080 / 2; // width
let h = 1920 / 2; // height
let cw = 20; // cell width
let ch = 20; // cell height
let noiseScaleSpace = 0.0003;
let noiseScaleTime = 0.0009;
s.setup = function () {
s.createCanvas(w, h);
s.frameRate(60);
s.pixelDensity(2);
};
s.draw = function () {
s.clear();
s.background("black");
s.fill("white");
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.frameCount * noiseScaleTime
) * 180
);
s.circle(ch / 2, cw - 5, 20);
s.resetMatrix(); // reset translate/transform/scale for next interation
}
}
if (s.mouseIsPressed === true) {
s.frameRate(30); // slow down framerate
if (s.mouseX >= 0 && s.mouseX < w && s.mouseY >= 0 && s.mouseY < h) {
s.saveCanvas(`${s.frameCount}`, "png");
}
} else {
s.frameRate(60); // reset framerate
}
};
})
p5((s) => {
let w = 1080 / 2; // width
let h = 1920 / 2; // height
let cw = 20; // cell width
let ch = 20; // cell height
let frames = 100
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("black");
s.fill("white");
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
) * 180
);
s.circle(ch / 2, cw - 5, 20);
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.
