用P5.js绘制创意作品

要求

主题：用编程方式创作一幅介绍自己的作品

作品: 一件编程创意作品，必须实现动态效果或交互效果；作品录制一段一分钟内的视频；作品可以是具象化地描绘自己的形象，也可以是任何形式表现自己的兴趣、追求、特色、经历等；

最终作品

绘制过程

主要是用了bezier曲线进行函数，首先在ps里计算了bezier曲线所用到的各点坐标。函数如下：

 beginShape();
  strokeWeight(5);
  stroke(0);
  fill(255, 228, 128);
  vertex(105, 98);
  bezierVertex(105,98,119,100,143,136);
  bezierVertex(143,136,187,108,232,138);
  bezierVertex(232,138,249,114,292,110);
  bezierVertex(292,110,288,125,256,154);
  bezierVertex(256,154,317,189,267,243);
  bezierVertex(267,243,274,256,279,288);
  bezierVertex(279,288,100,288,100,288);
  bezierVertex(100,288,100,220,100,220);
  bezierVertex(100,220,94,192,115,160);
  bezierVertex(115,160,99,135,105,98);
  endShape();
  bezier(267,243,267,243,259,248,248,251);
  //身体
  
  beginShape();
  strokeWeight(5);
  stroke(0);
  vertex(137,239);
  bezierVertex(137,239,148,249,171,264);
  bezierVertex(171,264,182,283,131,267);
  endShape();
  //左臂
    
  beginShape();
  strokeWeight(5);
  stroke(0);
  vertex(268,251);
  bezierVertex(268,251,264,257,246,268);
  bezierVertex(246,268,238,279,272,273);
  endShape();
  //右臂
  
  beginShape();
  strokeWeight(5);
  stroke(0);
  vertex(217,208);
  bezierVertex(217,208,229,199,229,199);
  bezierVertex(229,199,238,206,238,206);
  endShape();
  //嘴巴
  
  strokeWeight(5);
  stroke(190,84,54);
  fill(244,107,80);
  circle(158,192,25);
  //脸蛋
  
  beginShape();
  strokeWeight(3);
  stroke(0);
  fill(255);
  vertex(176,173);
  bezierVertex(176,173,213,179,213,179);
  bezierVertex(213,179,211,199,190,198);
  bezierVertex(190,198,176,194,176,173);
  endShape();
  //左眼
  
  beginShape();
  strokeWeight(3);
  stroke(0);
  fill(255);
  vertex(275,173);
  bezierVertex(275,173,247,180,247,180);
  bezierVertex(247,180,248,195,260,197);
  bezierVertex(260,197,284,199,275,173);
  endShape();
  //右眼
  
 
  strokeWeight(4);
  stroke(185,138,75);
  circle(232,184,4);
  //鼻子
  
  beginShape();
  strokeWeight(5);
  stroke(0);
  fill(0);
  vertex(105, 98);
  bezierVertex(105,98,101,122,110,144);
  bezierVertex(110,144,111,118,137,129);
  bezierVertex(137,129,120,105,105, 98);
  endShape();
  //左耳
  
  beginShape();
  strokeWeight(5);
  stroke(0);
  fill(0);
  vertex(292,110);
  bezierVertex(292,110,255,115,239,130);
  bezierVertex(239,130,264,123,263,147);
  bezierVertex(263,147,286,126,292,110);
  endShape();
  //右耳
  
  beginShape();
  strokeWeight(5);
  stroke(0);
  fill(0);
  vertex(100,220);
  bezierVertex(100,220,102,236,125,258);
  bezierVertex(125,258,112,258,100,242);
  bezierVertex(100,244,100,220,100,220);
  endShape();
  //条纹
  

动态交互

背景是三排掉落的闪电

 var Second = millis() / 400;
  var posx = Second * 0
  var posy = Second * 200;
  posx = posx % width;
  posy = posy % width;
  fill(255,255,0);
  stroke(255,102,0);
  strokeWeight(5);
  for (let i = 30; i < 800; i = i + 60) {
    beginShape();
    vertex(posx+i,posy-10);
    vertex(posx+i,posy-40);
    vertex(posx-30+i,posy+10);
    vertex(posx+i,posy+10);
    vertex(posx+i,posy+40);
    vertex(posx+30+i,posy-10);
    vertex(posx+i,posy-10);
    endShape();
  } 
    for (let i = 30; i <800; i = i + 75) {
    beginShape();
    vertex(posx+i,posy-160);
    vertex(posx+i,posy-190);
    vertex(posx-30+i,posy-140);
    vertex(posx+i,posy-140);
    vertex(posx+i,posy-110);
    vertex(posx+30+i,posy-160);
    vertex(posx+i,posy-160);
    endShape();
  }

  for (let i = 30; i <800; i = i + 90) {
    beginShape();
    vertex(posx+i,posy-310);
    vertex(posx+i,posy-340);
    vertex(posx-30+i,posy-290);
    vertex(posx+i,posy-290);
    vertex(posx+i,posy-260);
    vertex(posx+30+i,posy-310);
    vertex(posx+i,posy-310);
    endShape();
  }
  //背景闪电

最后是一个简单的交互，用鼠标点击一下会发射光波

  if (mouseIsPressed) {
    if (mouseButton == LEFT) {
      strokeWeight(0);
      fill(255,255,0);
      ellipse(220,265,40);
      strokeWeight(20);
      stroke(255,255,0);
      line(220,265,800,265);
    }
  }
  //光线