p5.js创意自画像

实验要求

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

画什么

自画像什么的是不可能的啦，太羞耻了啦。所以我要画《罗小黑战记》里可爱的花精灵！花精灵！

实现过程

1、码绘嘛，就是连点成线，需要不停地算坐标。然后算到后来，我都后悔为什么我要挑这么复杂的图片。其实线条也还好啦，但码绘不适合这么复杂的图形。反正就是好麻烦。
2、上色的问题。本来是想最后上个色的，但p5.js里好像没有那种种子填充法之类的函数，没办法填充自定义线条围成的封闭图形（反正我没找到）。所以就这样吧，我就当自己画了幅简笔画。
3、动态效果，是飞舞的花瓣，代码参照这篇博文https://blog.csdn.net/waittingUyou/article/details/84451466。复制粘贴之后是可以直接运行，但是从效果上来看，它里面有一些小问题，比如花瓣只能飞舞一会儿，然后就自己消失了。想过要改，但代码里面的东西对我来说还比较复杂，我每次改过之后，它就没反应不显示花瓣了。于是，那就先这样吧。
4、交互效果，是花精灵的眼睛会随着鼠标动，想法来自有些博客页面的看板娘。看板娘是什么啊，请自行百度。是在写作业查资料的时候第一次发现的，写作业当然非常枯燥啦，于是看什么都是非常有趣的，于是我可能在那里玩了有半个小时这样子（捂脸）。代码参考这篇博文https://blog.csdn.net/wangyouxu24/article/details/84328238。

然后附代码

var num=30;
var mixnum=num;
var follows=[];
var i=0;
function setup() {
   
  createCanvas(400, 400);
  createObject();
}

function draw() {
   
  background(220);
  drawfairy();
  eyes();
  
  follows.forEach(follow => {
   
            follow.move();
            follow.display();
            follow.delete();
  });  
}

function eyes(){
     
   noStroke();     
  var dis1=sqrt((mouseX-143)*(mouseX-143)+(mouseY-170)*(mouseY-170));
  var dis2=sqrt((mouseX-220)*(mouseX-220)+(mouseY-170)*(mouseY-170));
  
   var ax1,ay1;
   dis=6;
   if (dis1<dis){
   
   ax1=mouseX;ay1=mouseY;
   }
   else{
   
   ax1=dis*(mouseX-143)/dis1+143;
   ay1=dis*(mouseY-170)/dis1+170;
   }
  
   if (dis2<dis){
   
   ax2=mouseX;ay2=mouseY;
   }
   else{
   
   ax2=dis*(mouseX-220)/dis2+220;
   ay2=dis*(mouseY-170)/dis2+170;
   }
  
   bx1=(ax1-143)/dis*8+143;
   by1=(ay1-170)/dis*8+170;
   bx2=(ax2-220)/dis*10+220;
   by2=(ay2-170)/dis*10+170;
  
   fill(-20,0.35,0.35);
   ellipse(ax1,ay1, 20, 25);
   ellipse(ax2,ay2, 20, 25);
   noFill();
   }

function drawfairy()
{
   
  stroke(0,0,0);
  strokeWeight(4);
  //fill(255,184,14);
  noFill();
  //头顶
  bezier(70,140,110,30,270,30,310,140);
  //左边头发
  bezier(70,140,50,190,90,260,0,330);
  bezier(100,130,90,160,90,230,105,264);  
  //右边头发
  bezier(310,140,330,190,310,260,380,400); 
  bezier(280,130,294,150,300,200,295,227);
  //刘海
  line(97,150,140,145);
  line(155,145,220,145);
  line(235,145,285,147);
  bezier(140,145,150,110,151,110,155,145);
  bezier(220,145,227,110,227,110,235,145);
  bezier(285,147,285,140,285,135,280,130);
  //ellipse(200,0, 30, 30);
  //脸
  bezier(115,147,120,160,120,180,115,200);//左
  bezier(115,200,105,220,130,240,133,235);
  bezier(145,240,145,244,170,250,187,250);
  
  bezier(270,146,265,160,265,180,270,200);
  bezier(270,200,270,210,310,250,187,250);
  
  //脸颊
  noStroke();
  fill(255,184,14);
  ellipse(143,194,40,30);
  ellipse(230,194,40,30);
  //眼睛
  //fill(2,2,2);
  //ellipse(143,170, 20, 25);
  //ellipse(220,170, 20, 25);
  //嘴巴
  fill(255,184,14);
  stroke(0,0,0);
  strokeWeight(4);
  ellipse(190,230, 20, 25);
  
  noFill();
   //脖子
  line(180,250,180,267);
  line(210,250,210,274);  
  
  //衣领