p5(sketch => {
sketch.setup = function() {
sketch.createCanvas(1000, 1000);
};
sketch.draw = function() {
sketch.background('#F0F0F020');
sketch.noFill();
sketch.strokeWeight(10);
sketch.stroke('#3E454F');
let n = 20;
let s = 2;
let size = 40 * n;
let increment = 30;
for (let i = 1; i < n; i++) {
if (i % 4 == 0) {
sketch.stroke('#D11349');
}
sketch.push();
sketch.translate(sketch.width / 2, sketch.height / 2);
sketch.rotate((sketch.frameCount * sketch.PI * i) / 360);
sketch.arc(
0,
0,
size,
size,
-sketch.HALF_PI - sketch.QUARTER_PI / 1.5,
sketch.HALF_PI + sketch.QUARTER_PI / 1.5
);
size -= increment;
sketch.pop();
}
};
})
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.
