function makeArt() {
more;
const height = width * 0.9;
const q5 = new Q5();
q5.createCanvas(width, height);
// q5.background(chance.pickone(colors));
q5.background(colors[0]);
const strokeWeight = chance.floating({ min: 0.1, max: 1.5 });
q5.strokeWeight(strokeWeight);
q5.randomSeed();
q5.noFill();
let it = chance.natural({ min: 2, max: 50 });
for (let a = 0; a < it; a++) {
const count = chance.natural({ min: 100, max: 2000 });
q5.stroke(chance.pickone(colors));
let r = chance.floating({ min: 0.1, max: 20 });
let ix = chance.floating({ min: 0.1, max: 10 });
for (let i = 0; i < count; i++) {
q5.circle(width / 2, 0 + i * ix, r * i);
}
q5.stroke(chance.pickone(colors));
// r = chance.floating({ min: 2, max: 10 });
ix = chance.floating({ min: 0.1, max: 1 });
for (let i = 0; i < count; i++) {
q5.circle(width / 2, -height + i * ix, r * i);
}
}
const el = html`${q5.canvas}`;
el.value = q5;
q5.strokeWeight(1);
return el;
}
palettes
colors = {
// const paletteName = chance.pickone(Object.keys(palettes));
// return chance.pickone(palettes[paletteName]);
return ["#000", "#FFF"];
}
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.
