Creative Technologist, Data Scientist, Generative Artist (generatecoll)
p5((s) => {
let system, n, l_width, init_r, r, nfx, nfy;
n = form.lines;
// Color
let clr = 0;
let bg = bg_color;
s.setup = function () {
s.createCanvas(W, H);
s.noFill();
s.strokeWeight(15);
init_r = form.init_rate_height;
r = init_r;
nfx = s.random(0.01);
nfy = s.random(0.01);
};
const draw_zigzag = (x, y, w, h, n, r) => {
let cx, cy;
let w_diff = w / n;
s.push();
s.translate(x, y);
s.beginShape();
for (let i = 0; i <= n; i++) {
if (i % 2 == 0) {
cy = 0;
} else {
cy = h;
}
cx = w_diff * i;
s.vertex(cx, cy + r * s.noise((x + cx) * nfx, (y + cy) * nfy));
}
s.endShape();
s.pop();
};
s.draw = function () {
s.background(bg);
l_width = H / n;
for (let l = 0; l <= n; l++) {
if (l % 2 == 0) {
s.stroke(255);
} else {
s.stroke(c1);
}
s.strokeWeight(form.lineWidth);
draw_zigzag(0, l_width * l - r * 0.5, W, form.lineHeight, z[l].n, r);
}
r = init_r * s.sin(s.PI * s.frameCount * form.rate);
};
})
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.
