Creative Technologist, Data Scientist, Generative Artist (generatecoll)
p5((s) => {
let system, x, y, margin, wln, sw, c3;
x = 0;
y = 0;
margin = form.margin;
// Color
let clr = 0;
let c1 = s.color(clr1);
let c2 = s.color(clr2);
s.setup = function () {
s.createCanvas(W, H);
wln = form.n_triangles;
sw = form.stroke_width;
};
const drawLineTriangle = (x, y, w, h, n, sw) => {
s.strokeWeight(sw);
let w_diff = w / n;
let h_width = (h / n) * 0.5;
s.push();
s.translate(x, y);
for (let i = 0; i <= n; i++) {
s.line(i * w_diff, h_width * i, i * w_diff, -h_width * i);
}
s.pop();
};
const drawDiamond = (x, y, w, h, n) => {
drawLineTriangle(x, y, w, h, n, sw);
s.push();
s.translate(x, y);
s.rotate(s.TWO_PI / 2);
drawLineTriangle(-w * 2, 0, w, h, n, sw);
s.pop();
};
s.draw = function () {
s.background(clr_bg);
s.noStroke();
s.fill(c1);
s.rect(margin, margin, W - margin * 2, H - margin * 2);
s.fill(c2);
s.rect(margin * 2, margin * 2, W - margin * 4, H - margin * 4);
let wl = W - margin * 4.2;
let wl_diff = wl / (wln * 2);
for (let j = 0; j < wln; j++) {
for (let k = 0; k < form.n_triangle_pattern; k++) {
c3 = k % 2 == 0 ? clr1 : clr_bg;
s.stroke(c3);
let b = (wl_diff * 0.5 * k) / 3;
let n = 20;
drawDiamond(
margin * 2.2 + wl_diff * 2 * j + b,
H * 0.5,
wl_diff - b,
H - margin * 5 - b,
n
);
}
}
//drawDiamond(margin * 2 + 150 * 2, H * 0.5, 150, H - margin * 5, 20);
};
})
clr1 = cl1
clr2 = cl2
clr_bg = bg_color
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.
