使用p5.js创意编程

前言

第二份作业的要求是具象化地描绘自己的形象，也可以是任何形式表现自己的兴趣、追求、特色、经历等。在构思时某崩X3游戏出了新角色耗费了我大量的资源去抽取，突然就有了将这件事画下来的想法。

实验结果

（这里鼠标按下后出现黄色光圈是动图录制软件的问题，实际并没有）

绘制过程

脸部绘制

脸部的绘制选择了arc（）画圆弧和rect（）画长方形建构大致轮廓

stroke(0);
  strokeWeight(0.2);
  fill(255, 250, 240);
  rect(305, 250, 120, 50, 20);
  arc(348, 255, 210, 240, 0, PI, OPEN);//脸部绘制

其他部分的绘制

绘制头发是最麻烦的事项，曲线非常多所以大量的使用了bezier曲线。bezier曲线锚点和控制点的选取因为直接计算工作量太大所以采用了先在ps中绘制再获取坐标的方法。

stroke(0);
  strokeWeight(1);
  beginShape();
  vertex(347, 159);
  bezierVertex(270, 161, 244, 203, 238, 248);
  bezierVertex(238, 248, 220, 307, 181, 321);
  bezierVertex(181, 321, 219, 320, 225, 313);
  bezierVertex(225, 313, 210, 359, 239, 389);
  bezierVertex(239, 389, 235, 359, 252, 326);
  bezierVertex(252, 326, 266, 387, 297, 394);
  bezierVertex(297, 394, 264, 336, 279, 314);
  bezierVertex(279, 314, 315, 273, 318, 265);
  bezierVertex(318, 265, 340, 321, 363, 330);
  bezierVertex(363, 330, 359, 323, 366, 307);
  bezierVertex(366, 307, 366, 317, 366, 317);
  bezierVertex(366, 317, 378, 279, 389, 269);
  bezierVertex(389, 269, 416, 308, 423, 311);
  bezierVertex(423, 311, 432, 373, 408, 391);
  bezierVertex(408, 391, 453, 370, 453, 328);
  bezierVertex(453, 328, 472, 357, 467, 378);
  bezierVertex(467, 378, 490, 325, 477, 299);
  bezierVertex(477, 299, 500, 326, 522, 325);
  bezierVertex(522, 325, 467, 284, 457, 238);
  bezierVertex(457, 238, 442, 156, 347, 159);
  endShape(); //头发

其他部分的绘制大同小异，基本都是使用了bezierVertex（）绘制曲线和fill（）进行填充。

动态和交互

背景水晶

背景绘制了随着时间移动的水晶，代码如下

var Second = millis() / 1000;
  var posx = Second * 200
  var posy = Second * 300;
  posx = posx % width;
  posy = posy % width;
  fill(0, 91, 255);
  stroke(0);
  strokeWeight(1);
  for (let i = -300; i < 800; i = i + 200) {
   
    beginShape();
    vertex(posx + i, posy);
    vertex(posx - 17 + i, posy + 5);
    vertex(posx - 24 + i, posy + 26);
    vertex(posx - 14 + i, posy + 41);
    vertex(posx - 1 + i, posy + 37);
    vertex(posx + 9 + i, posy + 16);
    vertex(posx + i, posy);
    endShape();
    line(posx + i, posy, posx + i - 6, posy + 17);
    line(posx + i - 17, posy + 5, posx + i - 6, posy + 17);
    line(posx + i + 9, posy + 16