Let's build a better world, together.
Published
Edited
Feb 26, 2022
{
if (window.p_peashooter !== undefined) {
window.p_peashooter.remove();
}
window.p_peashooter = new P5(
(p) => {
p.setup = () => {
p.createCanvas(640, 640);
p.pixelDensity(1);
};
p.draw = () => {
//发饰
p.fill(57, 106, 51);
p.stroke(0, 128, 0);
p.beginShape();
p.vertex(199, 196);
p.bezierVertex(194,168,184,196,181,167);
p.vertex(181, 167);
p.bezierVertex(150,182,164,203,172,211);
p.vertex(172, 211);
p.bezierVertex(178,205,186,200,200,196);
p.endShape();
p.beginShape();
p.vertex(172, 211);
p.bezierVertex(166, 204, 163, 198, 161, 191);
p.vertex(161, 191);
p.bezierVertex(164, 199, 145, 202, 136, 199);
p.vertex(136, 199);
p.bezierVertex(128, 193, 141, 227, 164, 222);
p.endShape();
p.beginShape();
p.vertex(164, 222);
p.bezierVertex(155, 225, 159, 235, 143, 233);
p.vertex(143, 233);
p.bezierVertex(142, 243, 159, 249, 159, 247);
p.vertex(159, 247);
p.bezierVertex(159, 245, 156, 234, 164, 222);
p.endShape();
// 头
p.fill(0, 240, 0);
p.stroke(0, 128, 0);
p.ellipse(220, 240, 120, 90);
// 嘴
p.fill(0, 220, 0);
p.ellipse(280, 240, 40, 60);
p.fill(0, 0, 0);
p.ellipse(280, 240, 30, 40);
// 眼
p.stroke(0, 0, 0);
p.ellipse(220, 220, 20, 20);
p.ellipse(250, 212, 16, 16);
p.stroke(255, 255, 255);
p.fill(255, 255, 255);
p.ellipse(215, 215, 10, 10);
p.ellipse(246, 208, 8, 8);
//眉毛
p.fill(57, 106, 51);
p.stroke(0, 128, 0);
p.beginShape();
p.vertex(224, 209);
p.bezierVertex(218, 200, 210, 195, 197, 200);
p.vertex(197, 200);
p.bezierVertex(195, 204, 197, 207, 198, 211);
p.vertex(198, 211);
p.bezierVertex(205, 208, 214, 208, 224, 209);
p.endShape();
p.beginShape();
p.vertex(258, 198);
p.bezierVertex(258, 193, 254, 190, 251, 189);
p.vertex(251, 189);
p.bezierVertex(237, 188, 230, 195, 237, 210);
p.vertex(237, 210);
p.bezierVertex(240, 200, 248, 198, 258, 198);
p.endShape();
//身体
p.fill(0, 245, 0);
p.stroke(0, 128, 0);
p.beginShape();
p.vertex(213, 286);
p.bezierVertex(209, 285, 204, 285, 202, 284);
p.vertex(202, 284);
p.bezierVertex(200, 284, 199, 305, 202, 313);
p.vertex(202, 313);
p.bezierVertex(204, 322, 215, 342, 216, 340);
p.vertex(216, 340);
p.bezierVertex(218, 339, 219, 334, 223, 329);
p.vertex(223, 329);
p.bezierVertex(210, 316, 215, 285, 213, 286);
p.endShape();
//叶子
p.fill(0, 240, 0);
p.stroke(0, 128, 0);
p.beginShape();
p.vertex(269, 343);
p.bezierVertex(272, 318, 224, 315, 216, 339);
p.vertex(216, 339);
p.bezierVertex(221, 358, 258, 361, 269, 343);
p.endShape();
p.beginShape();
p.vertex(207, 328);
p.bezierVertex(229, 350, 195, 365, 183, 359);
p.vertex(183, 359);
p.bezierVertex(180, 358, 171, 354, 168, 349);
p.vertex(168, 349);
p.bezierVertex(170, 330, 177, 326, 184, 323);
p.vertex(184, 323);
p.bezierVertex(195, 319, 205, 327, 207, 328);
p.endShape();
p.beginShape();
p.vertex(223, 329);
p.bezierVertex(227, 325, 238, 322, 239, 321);
p.vertex(239, 321);
p.bezierVertex(240, 320, 240, 319, 239, 317);
p.vertex(239, 317);
p.bezierVertex(232, 307, 224, 307, 217, 315);
p.vertex(217, 315);
p.bezierVertex(217, 319, 219, 324, 223, 329);
p.endShape();
p.beginShape();
p.vertex(208, 329);
p.bezierVertex(204, 325, 198, 322, 194, 322);
p.vertex(194, 322);
p.bezierVertex(183, 320, 178, 329, 175, 327);
p.vertex(175, 327);
p.bezierVertex(171, 326, 172, 321, 173, 317);
p.vertex(173, 317);
p.bezierVertex(174, 311, 183, 309, 190, 310);
p.vertex(190, 310);
p.bezierVertex(199, 311, 205, 319, 208, 329);
p.endShape();
};
},
document.querySelector("#peashooter"),
true
);
return "Peashooter";
}
P5 = require("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.
