p5(sketch => {
sketch.setup = function() {
sketch.createCanvas(1000, 1000);
sketch.noLoop();
};
sketch.draw = function() {
sketch.background('#F0F0F0');
sketch.strokeWeight(2);
let vertices = [];
let n = 100;
let r = 400;
for (let i = 0; i < n; i++) {
let angle = sketch.TWO_PI * i / n;
let x = sketch.cos(angle) * r + sketch.width / 2;
let y = sketch.sin(angle) * r + sketch.height / 2;
vertices.push(sketch.createVector(x, y));
}
sketch.noFill();
for (let j = 0; j < vertices.length - 1; j++) {
if (j % 13 == 0) {
sketch.stroke('#D11349');
sketch.strokeWeight(4);
} else {
sketch.strokeWeight(1);
sketch.stroke('#3E454F99');
}
sketch.bezier(vertices[j].x, vertices[j].y,
sketch.width / 2 - r / 5, sketch.height / 2 - r / 5,
sketch.width / 2 + r / 5, sketch.height / 2 + r / 5,
vertices[j + 1].x, vertices[j + 1].y)
shuffleArray(vertices);
}
};
})
function shuffleArray(array) {
let random = array.map(Math.random);
array.sort(function(a, b) {
return random[array.indexOf(a)] - random[array.indexOf(b)];
});
}
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.
