Creative Technologist, Data Scientist, Generative Artist (generatecoll)
viewof form = Inputs.form({
width: Inputs.range([0, 1000], { label: "Width", step: 1, value: 1000 }),
height: Inputs.range([4, 1000], { label: "Height", step: 1, value: 1000 })
})
p5((s) => {
let system, H, W, nw, nh;
W = form.width;
H = form.height;
// Color
let bg, c1;
bg = s.color("#e2cdc0"); // "#e2cdc0"
c1 = s.color(getColor());
// Setup function ///////////////////////////////////////////////////////
s.setup = function () {
s.createCanvas(W, H);
s.background(bg);
nw = 20;
nh = 10;
drawOutput();
};
const fadeRect = (x, y, w, h, t) => {
let offset = s.random(1);
s.noStroke();
s.fill(c1);
s.push();
s.translate(x, y);
for (let i = 0; i < w * h * 0.7; i++) {
let cx = s.random(0, w);
let cy = s.random(0, h);
switch (t) {
case 1:
if (s.random(1) < (offset + cx / w) % 1) {
s.ellipse(cx, cy, 1, 1);
}
break;
case 2:
if (s.random(1) < (offset + cy / h) % 1) {
s.ellipse(cx, cy, 1, 1);
break;
}
}
}
s.pop();
};
const gridDraw = () => {
for (let n = 0; n < nw; n++) {
for (let j = 0; j < nh; j++) {
c1 = getColor();
fadeRect(
(n * W) / nw,
(j * H) / nh,
W / nw,
H / nh,
s.floor(s.random(1, 3))
);
}
}
};
const drawOutput = () => {
let cw, n, cn, n_width;
n = 10;
cn = s.floor(s.random(10));
n_width = H / n;
for (let j = 0; j < cn; j++) {
drawCircle(
W * s.random(0.2, 0.8),
H * s.random(0.2, 0.8),
s.random(W * 0.01, W * 0.2)
);
}
for (let i = 0; i < n; i++) {
s.push();
s.translate(W * 0.5, 0);
s.rotate(s.TWO_PI * s.random(0.1));
cw = s.random(50) + W * 0.5;
c1 = getColor();
fadeRect(
-cw * 0.5,
n_width * i,
cw,
s.random(n_width),
s.floor(s.random(1, 3))
);
s.pop();
}
s.fill(255);
};
const drawCircle = (x, y, r) => {
let cx, cy, d;
let offset = s.random(1);
s.noStroke();
s.fill(s.random(255));
s.push();
s.translate(x, y);
for (let i = 0; i < r * r * s.PI; i++) {
cx = s.cos(s.TWO_PI * s.random(1)) * r;
cy = s.sin(s.TWO_PI * s.random(1)) * r;
d = s.dist(0, 0, cx, cy);
if (d < r) {
if (s.random(1) > (offset + d / r) % 1) {
s.ellipse(cx, cy, 1, 1);
}
}
}
s.pop();
};
// Draw function ///////////////////////////////////////////////////////
s.draw = function () {};
})
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.
