Public
Edited
Feb 2, 2023
Insert cell
Insert cell
Insert cell
p5((s) => {
// Color
let clr = 0;
let bg = getColor();
let c1 = s.color(getColor());
let c2 = s.color(getColor());
let rot = s.random(0.3);
let n = 20;
s.setup = function () {
s.createCanvas(W, H);
s.noStroke();
};
s.draw = function () {
s.background(bg);
s.push();
s.translate(W * 0.5, H * 0.5);
for (let i = 1; i <= 50; i++) {
line_circle(0, 0, 100 + 5 * i, n * i);
}
n = 1 + 1 * s.abs(s.sin(s.frameCount * 0.02));
s.pop();
};

const line_circle = (x, y, r, n) => {
let cx, cy;
s.push();
s.translate(x, y);
s.rotate(0.02 * s.frameCount);
for (let i = 1; i <= n; i++) {
s.fill(s.lerpColor(c1, c2, i / n));
cx = r * s.cos(s.TWO_PI * (i / n));
cy = r * s.sin(s.TWO_PI * (i / n));
s.push();
s.translate(cx, cy);
s.rotate((i / n) * 0.002);
s.rect(0, 0, 5, 40);
s.pop();
}
s.pop();
};
// c4 = sketch.lerpColor(c2, c3, j * 0.2);
//clr = c4;
})
Insert cell
Insert cell
W = form.width
Insert cell
H = form.height
Insert cell
Insert cell
Insert cell
import { p5 } from "@tmcw/p5"
Insert cell

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.
Learn more