Let's build a better world, together.
{
if (window.p_inst !== undefined) {
window.p_inst.remove();
}
window.p_inst = new P5(
(p) => {
p.setup = setup(p);
p.draw = draw(p);
},
document.querySelector("#view"),
true
);
return "Succeed";
}
function setup(p) {
return () => {
p.createCanvas(640, 640, p.WEBGL);
p.angleMode(p.DEGREES);
p.frameRate(24);
};
}
function draw(p) {
const delta = 5;
const v0 = p.createVector(100, 0);
const v1 = p.createVector(80, 0);
const v2 = p.createVector(105, 0);
const v3 = p.createVector(145, 0);
return () => {
p.noFill();
v0.rotate(delta);
v1.rotate(delta);
v2.rotate(delta);
v3.rotate(delta);
p.stroke(p.color(255, 0, 0));
p.circle(v0.x, v0.y, 120);
p.stroke(p.color(255, 255, 0));
p.circle(v1.x, v1.y, 5);
p.stroke(p.color(0, 0, 255));
p.circle(v2.x, v2.y, 10);
p.stroke(p.color(0, 255, 255));
p.circle(v3.x, v3.y, 20);
};
}
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.
