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([0, 1000], { label: "Height", step: 1, value: 1000 })
})
p5((s) => {
let system, H, W;
W = form.width;
H = form.height;
// Color
let bg, c1;
let rs;
let fcs = [];
bg = getColor();
c1 = s.color(getColor());
// Setup function ///////////////////////////////////////////////////////
s.setup = function () {
s.createCanvas(W, H);
for (let i = 0; i < 5; i++) {
fcs[i] = FlowerCreature(
W * R(0.2, 0.8),
H * R(0.2, 0.8),
H * 0.2,
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.push();
s.translate(fa.x, fa.y);
s.rotate(s.TWO_PI * fa.rot);
s.curve(fa.cx1, fa.cy1, 0, 0, fa.x1, fa.y1, fa.cx1, fa.cy1);
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]);
}
};
})
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.
