height = 320
p5((s) => {
s.setup = function () {
s.createCanvas(width, height);
};
s.draw = function () {
s.background(255);
s.ellipse(width / 2, height / 2, 100);
};
})
p5((s) => {
s.setup = function () {
s.createCanvas(width, height);
};
s.draw = function () {
s.background(250);
s.rect(width / 2 - 50, height / 2 - 50, 100, 100);
};
})
p5((s) => {
s.setup = function () {
s.createCanvas(width, 300);
};
s.draw = function () {
s.background(250);
s.strokeCap(s.SQUARE); // Options: s.ROUND, s.SQUARE, s.PROJECT
s.strokeWeight(1);
s.line(100, 200, width - 100, 100);
s.strokeWeight(10);
s.line(100, 100, width - 100, 200);
};
})
p5((s) => {
s.setup = function () {
s.createCanvas(width, height);
};
s.draw = function () {
s.background(250);
s.beginShape();
s.vertex(width / 2, height / 2 - 50);
s.vertex(width / 2 + 50, height / 2 - 20);
s.vertex(width / 2 + 30, height / 2 + 40);
s.vertex(width / 2 - 30, height / 2 + 40);
s.vertex(width / 2 - 50, height / 2 - 20);
s.endShape(s.CLOSE);
};
})
p5((s) => {
s.setup = function () {
s.createCanvas(width, height);
};
s.draw = function () {
s.background(250);
s.beginShape();
for (let i = 0; i < 10; i++) {
let angle = (i * s.TWO_PI) / 10;
let x = width / 2 + s.cos(angle) * 50;
let y = height / 2 + s.sin(angle) * 50;
if (i % 2 === 0) {
x = width / 2 + s.cos(angle) * 20;
y = height / 2 + s.sin(angle) * 20;
}
s.vertex(x, y);
}
s.endShape(s.CLOSE);
};
})
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.
