Creative Technologist, Data Scientist, Generative Artist (generatecoll)
p5((s) => {
let system, H, W, nfx;
W = form.width;
H = form.height;
// Setup function ///////////////////////////////////////////////////////
s.setup = function () {
s.createCanvas(W, H);
s.background(bg);
s.noStroke();
};
// Draw function ///////////////////////////////////////////////////////
s.draw = function () {
if (!form.freeze) {
s.background(bg);
}
for (let i = 0; i < sq.length; i++) {
s.fill(sq[i].clr);
s.push();
s.translate(sq[i].x, sq[i].y);
nfx = s.noise(sq[i].x * form.nf, sq[i].y * form.nf);
s.rotate(s.TWO_PI * nfx);
s.rect(nfx * form.wave, 0, sq[i].wh * nfx, sq[i].wh);
s.pop();
s.fill(255);
if (form.debug) {
s.text(
"(" + s.round(sq[i].x, 2) + "," + s.round(sq[i].y) + ")",
sq[i].x + sq[i].wh + 2,
nfx * form.wave + sq[i].y
);
}
// Update
sq[i].x += form.speed + s.sin(s.frameCount * sq[i].rate);
sq[i].y += s.cos(s.frameCount * sq[i].rate);
if (sq[i].x > W || sq[i].x < 0) {
sq[i].x = 0;
}
}
};
})
// Creates the square object
sq = {
// Additional variables
let sq = [];
let diff;
let n = form.squares;
diff = form.width / n / form.width;
for (let j = 0; j < n; j++) {
sq.push(
create_square(
form.width * diff * j,
form.height * 0.1 + Math.random(1) * 0.8 * form.height,
20
)
);
}
return sq;
}
bg = getColor()
create_square = (x, y, wh) => {
return { x: x, y: y, wh: wh, rate: Math.random(0.5), clr: getColor() };
}
import { p5 } 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.
