【第二次码绘】使用p5.js绘制自画像

【第二次码绘】使用p5.js绘制自画像

背景说明

互动媒体技术课作业要求使用p5.js或者其他语言绘制自画像，表达自己的追求、梦想、爱好等主题，正好最近作业特别多，觉得写作业写的崩溃，就想以此为题绘制出带有动态效果的表达自己心声的图像。灵感突现，就想画出一幅看到代表作业的vs等软件以及deadline快到时想要哭泣的心情，以及作业完成时的喜悦。为了增加趣味性，特为程序增加了音乐，这样就可同时观看动画并聆听音乐。

相关技术

实际上绘制所用相关函数非常简单，但是就是绘制过程中坐标的选取比较麻烦，经常需要更改好多次才能达到自己想要的结果。下面先介绍一下相关函数吧！
1、首先绘制脸、围巾、眼睛等使用了ellipse(x, y, w,h)函数，参数含义依次是椭圆中心x坐标、y坐标、椭圆宽、高。
2、绘制眉毛嘴巴等使用了arc(x, y, w, h, start, stop, [mode], [detail])函数，即绘制圆弧，参数含义依次是圆弧对应椭圆中心的x、y坐标、宽度、高度，start为开始的角度，stop为结束的角度，注意arc函数中，start与stop对应的角度在象限中是顺时针增加的，平时我们使用的都是按逆时针角度增加的。
3、为了效果看起来更好，所以绘制头发使用了贝塞尔曲线，绘制贝赛尔曲线，控制点的坐标很难掌控，所以给大家推荐一个网站，可在线调试贝塞尔曲线，多少可以给自己提供些参考。在线贝塞尔曲线调试器
4、p5绘制椭圆等图行，默认有边缘线，可以使用noStroke()函数去除，比如本图中脸有黑色的边缘轮廓线，围巾部分就没有。也可使用**stroke(color)**调节边缘线的颜色，**strokeWeight(weight)**调节线的宽度，fill()调整填充颜色，nofill()使其不填充。
5、实现动态效果就是利用if else语句在不同条件下绘制不同的图像，从而达到动态效果。

示例代码

绘制一张普通的笑脸

function drawFace1()//普通脸
{
   
  
  noStroke();
  fill(239,67,24);
  //围巾
  ellipse(400,225,80,40);
  ellipse(425,260,25,80);
  fill(252,250,243);
  stroke(0,20,20);
  //noStroke();
  strokeWeight(1);
  ellipse(400,150,130,150);//脸
  stroke(80,80,80);
  strokeWeight(3);
  //眉毛
  noFill();
  strokeWeight(3);
  stroke(50,50,50);
  arc(370,160,90,50,PI + 1.25*QUARTER_PI,TWO_PI- 1.3*QUARTER_PI);
  arc(430,160,90,50,PI + 1.3*QUARTER_PI,TWO_PI- 1.25*QUARTER_PI);
  //line(415,140,440,137);
  //line(385,140,360,137);
  //右眼睛
  noStroke();
  fill(199,239,242);
  ellipse(430,160,25,26);//大眼珠
  noFill();
  strokeWeight(3);
  stroke(50,50,50);
  arc(430,160,35,26,PI + QUARTER_PI,TWO_PI- QUARTER_PI);//上眼睑
  arc(430