Creative Technologist, Data Scientist, Generative Artist (generatecoll)
p5((s) => {
let system, wv;
// Color
let bg, c1, c2, c3, c4, c5;
bg = getColor();
// Rest of the variables
let x, y, nfx, wh, nf, ct, spread;
// Setup function ///////////////////////////////////////////////////////
s.setup = function () {
s.createCanvas(W, H);
s.noStroke();
updateColors();
nf = form.nf;
ct = 0;
spread = 0;
};
// Draw function ///////////////////////////////////////////////////////
s.draw = function () {
ct = 0;
while (ct < 100) {
x = s.random(W);
y = s.random(H);
nfx = s.noise(x * nf, y * nf);
s.push();
s.translate(x, y);
s.rotate(Math.PI * nfx);
wv = 100 * s.sin(0.02 * s.frameCount);
wh = s.random(form.scale) + wv;
if (nfx < 0.1) {
s.fill(s.lerpColor(c1, c2, nfx));
}
if (nfx > 0.1 && nfx < 0.2) {
s.fill(c2);
}
if (nfx > 0.2 && nfx < 0.3) {
s.fill(c3);
}
if (nfx > 0.3 && nfx < 0.4) {
s.fill(c4);
}
if (nfx > 0.4 && nfx < 0.5) {
s.fill(s.lerpColor(c1, c2, nfx));
}
if (nfx > 0.5 && nfx < 0.6) {
s.fill(s.lerpColor(c2, c3, nfx));
}
if (nfx > 0.6 && nfx < 0.7) {
s.fill(s.lerpColor(c3, c4, nfx));
}
if (nfx > 0.7 && nfx < 0.8) {
s.fill(s.lerpColor(c1, c4, s.random(1)));
}
if (nfx > 0.8 && nfx < 0.9) {
s.fill(c1);
}
if (nfx > 0.9) {
s.fill(c2);
}
if (
!inCircle(W * (0.5 + spread), H * 0.5, x, y) ||
!inCircle(W * (0.5 - spread), H * 0.5, x, y)
) {
noisy_rect(0, 0, wh, wh, 1);
} else {
s.fill(c5);
noisy_rect(0, 0, wh, wh, 1);
}
s.pop();
ct += 1;
if (s.random() < 0.0001) {
updateColors();
}
if (s.random() < 0.01) {
spread += 0.001;
}
}
};
const inCircle = (cx, cy, x, y) => {
let d, r, res;
r = 500;
d = s.dist(x, y, cx, cy);
if (d > r) {
res = false;
} else {
res = true;
}
return res;
};
const updateColors = () => {
c1 = s.color(getColor());
c2 = s.color(getColor());
c3 = s.color(getColor());
c4 = s.color(getColor());
c5 = s.color(getColor());
};
// Noisy Rectangle function ///////////////////////////////////////////////////////
const noisy_rect = (x, y, w, h, r) => {
s.noStroke();
let cnt = 0;
while (cnt < 100) {
let ix = s.random(w);
let iy = s.random(h);
s.rect(ix, iy, r, r);
cnt += 1;
}
};
})
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.
