p5.js创意编程——Q版人像绘制

主要函数介绍

贝塞尔曲线

如图，是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