主要函数介绍

贝塞尔曲线

如图，是p5.js官方reference上关于贝塞尔曲线的说明，一次可以画出一条贝塞尔曲线。但在作图中往往是不够用的，画画时我们大多是绘制一个不规则的闭合区域，故会用到接下来的函数。

Shape

在这里，为了绘制出闭合图形，我们使用了 beginShape() 和 endShape() 函数，如下代码可绘制出人物的头发部分。

  fill(51,51,51); // 设置填充颜色stroke(10); // 设置描边颜色strokeWeight(8); // 设置变现粗细beginShape(); // 开始vertex(255,434);bezierVertex(256,401,334,281,309,368);bezierVertex(349,369,423,201,372,326);bezierVertex(464,323,494,294,533,228);bezierVertex(532,255,557,321,589,360);bezierVertex(600,386,577,232,647,448);bezierVertex(654,362,686,373,672,266);bezierVertex(666,202,644,102,506,57);bezierVertex(398,32,305,82,263,154);bezierVertex(216,232,213,329,255,437);endShape(); // 形成闭合图形

frameRate

p5.js中实现的动态效果无非就是一个快速重新绘制的过程，这里使用 frameRate() 函数来设置动态的fps。

完整代码

let fr = 0;function setup() {createCanvas(900,900);frameRate(5);
}function draw() {background(255);fill(40);noStroke();rect(330,490,240,280); //衣服fill(0);beginShape(); // 外袍vertex(244,842);bezierVertex(288,846,422,846,431,739);bezierVertex(399,570,371,490,339,489);bezierVertex(237,506,283,516,327,546);bezierVertex(306,888,128,806,241,846);endShape();beginShape();vertex(533,501);bezierVertex(508,560,473,666,478,747);bezierVertex(455,828,588,847,645,847);bezierVertex(753,820,659,841,618,749);bezierVertex(588,656,577,643,564,544);bezierVertex(680,512,612,490,533,505);endShape();fill(255);stroke(2,42,0);strokeWeight(5);triangle(372,520,434,545,381,560); // 领子triangle(465,545,527,523,522,560);fill(6,63,18);stroke(2,42,0);strokeWeight(5);triangle(430,535,468,535,451,562); // 领带quad(451,562,430,663,451,705,476,663);beginShape(); // 帽子vertex(424,693);bezierVertex(397,567,374,513,366,519);bezierVertex(382,530,371,490,339,489);bezierVertex(237,506,283,516,327,546);bezierVertex(378,611,411,680,418,682);endShape();beginShape();vertex(477,695);bezierVertex(504,588,505,522,553,493);bezierVertex(571,487,696,504,570,545);bezierVertex(503,652,535,597,485,689);endShape();fill(255,243,211);stroke(254,218,186);strokeWeight(8);beginShape(); // 脸vertex(279,356);bezierVertex(311,514,358,509,406,529);bezierVertex(492,548,521,525,547,510);bezierVertex(607,472,579,420,627,355);bezierVertex(641,200,622,305,627,355);bezierVertex(427,122,487,127,537,145);bezierVertex(284,297,278,192,361,154);endShape();fill(255);noStroke();ellipse(368,321,90,140); // 眼ellipse(524,321,90,140); fill(27,61,45);ellipse(368,321,82,132);ellipse(524,321,82,132);fill(90,150,90);ellipse(373,324,40,70);ellipse(520,324,40,70);fill(255,243,211);rect(320,246,100,70);rect(473,246,100,70);stroke(2,42,0);strokeWeight(5);line(485,305,535,305);stroke(2,42,0);strokeWeight(10);line(310,316,410,316);line(480,316,580,316);fill(255);noStroke();ellipse(361,330,23,10);ellipse(503,330,23,10);stroke(159,12,52);strokeWeight(8);line(429,465,450,483);line(450,483,473,465);fill(51,51,51);stroke(10);strokeWeight(8);beginShape(); // 头发vertex(255,434);bezierVertex(256,401,334,281,309,368);bezierVertex(349,369,423,201,372,326);bezierVertex(464,323,494,294,533,228);bezierVertex(532,255,557,321,589,360);bezierVertex(600,386,577,232,647,448);bezierVertex(654,362,686,373,672,266);bezierVertex(666,202,644,102,506,57);bezierVertex(398,32,305,82,263,154);bezierVertex(216,232,213,329,255,437);endShape();// 动态效果if(fr <= 10) {fr += 1;drawObjects(-fr);} else if(fr <= 20) {fr += 1;drawObjects(fr - 10);} else {fr = 0;}}function drawObjects(fr) {stroke(119,60,19); // 魔杖strokeWeight(6);line(114,430 + fr,200,579 + fr);strokeWeight(10);line(200,579 + fr,238,644 + fr);stroke(90,150,90);strokeWeight(3);if(fr % 5 == 0) {line(89,469 + fr,98,455 + fr);line(69,436 + fr,84,435 + fr);line(84,401 + fr,96,410 + fr);line(126,389 + fr,123,405 + fr);line(140,423 + fr,155,422 + fr);}fill(100,47,152); // 魔药noStroke();ellipse(733,650 - fr,75);fill(255);rect(690,602 - fr,90,40);noFill();stroke(0);strokeWeight(3);ellipse(733,650 - fr,75);quad(751,565 - fr,773,574 - fr,755,625 - fr,732,618 - fr);beginShape();vertex(751,565 - fr);bezierVertex(717,529 - fr,821,568 - fr,773,574 - fr);endShape();fill(255);noStroke();quad(755,558 - fr,773,570 - fr,752,630 - fr,732,623 - fr); fill(135,96,218);ellipse(739,677 - fr,5);ellipse(720,662 - fr,10);ellipse(746,653 - fr,15);
}

实现效果