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) => {
// Color
let clr = 0;
let bg = getColor();
let c1 = s.color(getColor());
let n = 10;
let rn = rectB(n);
s.setup = function () {
s.createCanvas(W, H);
s.strokeWeight(2);
};
s.draw = function () {
s.background(bg);
for (let i = 0; i < n; i++) {
s.push();
s.translate(rn[i].x, rn[i].y);
lineRect(
-rn[i].w * 0.5,
-rn[i].h * 0.5,
rn[i].w,
rn[i].h,
rn[i].n,
rn[i].dir * rn[i].r
);
s.pop();
}
};
const lineRect = (x, y, w, h, n, r) => {
let nw = h / n;
s.stroke(255);
for (let i = 0; i < n; i++) {
s.push();
s.translate(x, y);
s.rotate(s.frameCount * r);
s.line(0, i * nw + 5 * i, w, i * nw + 2 * i);
s.pop();
}
s.pop();
};
})
rectB = (n) => {
let ra = [];
for (let i = 0; i < n; i++) {
ra[i] = {
x: Math.random() * W,
y: Math.random() * H,
w: 400,
h: 400,
n: 50 * Math.random(),
r: Math.random() * 0.004,
dir: Math.random() < 0.5 ? -1 : 1
};
}
return ra;
}
W = form.width
H = form.height
import { p5 } from "@tmcw/p5"
import { try_it } from "@observablehq/notes"
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.
