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, n, n_diff;
// Color
let clr = 0;
let bg = getColor();
let c1 = s.color(getColor());
let c2 = s.color(getColor());
s.setup = function () {
s.createCanvas(W, H);
s.noStroke();
n = 20;
n_diff = H / n;
};
s.draw = function () {
if (s.frameCount == 1) {
s.background(bg);
for (let i = 0; i < n; i++) {
s.fill(getColor());
circle_line(n_diff * i + n_diff * 0.5, 0, i);
}
}
};
const circle_line = (x, y, n) => {
let n_width = W / n;
let w;
s.push();
s.translate(x, y);
for (let i = 0; i < n; i++) {
s.ellipse(0, n_width * 0.5 + i * n_width, n_width * 0.5, n_width * 0.5);
}
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.
