Let's build a better world, together.
Published
Edited
Feb 23, 2022
{
if (window.p_face !== undefined) {
window.p_face.remove();
}
window.p_face = new P5(
(p) => {
p.setup = () => {
p.createCanvas(640, 640);
p.pixelDensity(1);
};
p.draw = () => {
const eyeSize = 20;
// 绘制背景色
p.background(p.color(255, 255, 255));
// 设置不显示轮廓
p.noStroke();
// 绘制脸部
p.fill(255, 0, 255); // 设置填充色，
p.ellipse(208, 208, 300, 300);
// 绘制眼睛
p.fill(46, 46, 41);
p.ellipse(157, 151, eyeSize, eyeSize);
p.ellipse(304, 142, eyeSize, eyeSize);
// 绘制嘴巴
p.fill(252, 65, 65);
p.ellipse(257, 240, 120, 136);
};
},
document.querySelector("#face"),
true
);
return "Face";
}
{
if (window.p_bunny !== undefined) {
window.p_bunny.remove();
}
window.p_bunny = new P5(
(p) => {
p.setup = () => {
p.createCanvas(640, 640);
p.pixelDensity(1);
};
p.draw = () => {
const eyeSize = 20;
let left = 200 + (p.frameCount % 127);
let top = 100 + (p.frameCount % 63);
// 绘制背景色
p.background(p.color(255, 255, 255));
// 设置填充色
p.fill(255, 255, 255);
// 绘制左耳
p.ellipse(left + 150, top + 70, 60, 120);
// 绘制右耳
p.ellipse(left + 240, top + 70, 60, 120);
// 绘制脸部
p.ellipse(left + 200, top + 170, 150, 150);
// 绘制眼睛
p.fill(0, 0, 0);
p.ellipse(left + 170, top + 150, eyeSize, eyeSize);
p.ellipse(left + 230, top + 150, eyeSize, eyeSize);
// 绘制嘴巴
p.noFill();
p.line(left + 150, top + 200, left + 250, top + 200);
p.rect(left + 185, top + 200, 15, 10);
p.rect(left + 200, top + 200, 15, 10);
};
},
document.querySelector("#bunny"),
true
);
return "Bunny";
}
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.
