Creative Technologist, Data Scientist, Generative Artist (generatecoll)
p5((s) => {
let system, H, W;
let rs;
let fcs = [];
let n = form.n;
W = form.width;
H = form.height;
// Color
let bg, c1, c2, c3;
bg = getColor();
c1 = s.color(getColor());
c2 = s.color(getColor());
c3 = s.color(getColor());
// Setup function ///////////////////////////////////////////////////////
s.setup = function () {
s.createCanvas(W, H);
for (let i = 0; i < n; i++) {
fcs[i] = FlowerCreature(
W * R(0.2, 0.8),
H * R(0.2, 0.8),
H * 0.1,
100,
getColor(),
getColor()
);
}
};
// Draw function ///////////////////////////////////////////////////////
s.draw = function () {
s.background(bg);
for (let i = 0; i < fcs.length; i++) {
drawFlowerCreature(fcs[i]);
}
};
const updateFlowerAnther = (fa) => {
fa.x1 = fa.sway_width * s.sin(s.frameCount * fa.sway);
fa.cx1 = fa.sway_cx * -s.sin(s.frameCount * fa.sway * 1.1);
fa.cy1 = fa.sway_cx * s.cos(s.frameCount * fa.sway * 0.8);
};
const drawFlowerAnther = (fa) => {
s.noFill();
s.stroke(fa.c1);
s.strokeWeight(1);
s.push();
s.translate(fa.x, fa.y);
s.rotate(0.5 + s.PI * fa.rot);
s.curve(fa.cx1, fa.cy1, 0, 0, fa.x1, fa.y1, fa.cx1, fa.cy1);
s.stroke(fa.c2);
s.ellipse(fa.x1, fa.y1, 3, 3);
s.pop();
};
const drawFlowerCreature = (fc) => {
let fa = fc.fa;
for (let i = 0; i < fa.length; i++) {
drawFlowerAnther(fa[i]);
updateFlowerAnther(fa[i]);
}
// Create the stem
s.push();
s.translate(fc.x, fc.y);
s.rotate(s.TWO_PI * 0.6);
s.fill(0);
s.arc(0, -10, 50, 50, 0, s.PI * 0.6);
s.pop();
s.stroke(0);
s.strokeWeight(3);
s.line(fc.x - 7, fc.y, fc.x - 7, fc.y + 100);
};
})
R = (x, x1) => x - Math.random() * (x - x1)
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.
