目录
主要函数介绍贝塞尔曲线ShapeframeRate
完整代码实现效果
主要函数介绍
贝塞尔曲线
如图，是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);
}
实现效果
