Creative Technologist, Data Scientist, Generative Artist (generatecoll)
p5((s) => {
let x, y, r, margin, dir, ud, nf, i, n;
// Color
let clr = 0;
let bg = getColor();
let clr1 = s.color(getColor());
let clr2 = s.color(getColor());
s.setup = function () {
s.createCanvas(W, H);
s.background(bg);
s.noStroke();
x = 0;
y = H * 0.1;
margin = s.random(5, 50);
dir = 1;
ud = 1;
nf = s.random(0.03);
n = s.floor(s.random(4, 50));
i = s.floor(s.random(1, 20));
};
s.draw = function () {
if (s.frameCount == 1) {
for (let j = 0; j < n; j++) {
clr1 = s.color(getColor());
clr2 = s.color(getColor());
s.push();
s.translate(W * 0.5, H * 0.5);
s.rotate((s.TWO_PI * j) / n);
drawCloverLeaf(0, 0);
s.pop();
}
}
};
const drawCloverLeaf = (x, y) => {
for (let j = 0; j < 150; j++) {
s.push();
s.translate(x, y);
s.rotate(s.sin(s.TWO_PI * j * nf));
drawClover(0, 0, r, margin, i, j, clr1, clr2);
s.pop();
r = s.sin(j * nf) * 50;
x += 3 * dir;
if (x > W || x < 0) {
x = 0;
y += H * 0.1;
nf = s.random(0.1);
i = s.floor(s.random(1, 10));
}
}
};
const drawClover = (x, y, r, margin, n, itr, c1, c2) => {
let c3, c4;
if (itr % 2 == 0) {
c3 = c1;
c4 = c2;
} else {
c3 = c2;
c4 = c1;
}
s.push();
s.translate(x, y);
s.fill(c4);
for (let i = 0; i < n; i++) {
if (i % 2 == 0) {
s.fill(c3);
} else {
s.fill(c4);
}
s.ellipse(
r * s.sin(s.TWO_PI * (i / n)),
r * s.cos(s.TWO_PI * (i / n)),
r,
r
);
}
s.pop();
};
})
W = form.width
H = form.height
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.
