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, x, y, w, n;
let gc = [];
// Color
let clr = 0;
let bg = getColor();
s.setup = function () {
s.createCanvas(W, H);
s.noStroke();
s.background(bg);
w = 40;
n = 72;
for (let i = 0; i < n; i++) {
gc[i] = gc_diamond(
W * 0.5,
H * 0.1 + 10 * i,
w,
(s.TWO_PI * i) / (n * 2),
palette[i % palette.length]
);
w += 2;
}
};
s.draw = function () {
//
s.background(bg);
for (let i = 0; i < n; i++) {
drawDiamond(gc[i].x, gc[i].y, gc[i].r, gc[i].rturn, gc[i].c1);
gc[i].rturn += 0.02;
gc[i].r = gc[i].ri * s.sin(gc[i].ri * s.frameCount * 0.0002);
}
};
const gc_diamond = (x, y, w, rturn, c1) => {
return {
x: x,
y: y,
w: w,
ri: w,
rturn: rturn,
c1: c1
};
};
const drawDiamond = (x, y, w, r, c1) => {
s.fill(c1);
s.push();
s.translate(x, y);
s.rotate(r);
s.beginShape();
s.vertex(0, 0);
s.vertex(w * 0.5, -2 * w);
s.vertex(w, 0);
s.vertex(w * 0.5, 2 * w);
s.endShape();
s.pop();
};
})
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.
