P5.js绘制自画像

P5.js绘制自画像

作品初稿展示

绘制图像

自画像的头发是用一个椭圆和一个长方形构成的
其中椭圆用到了ellipse()

 ellipse(200,125,160,170);
 //ellipse(x,y,w,h); 

长方形用到的是vertex()函数
其中vertex的几个点要按顺序写，不然出来的图形是不一样的。

 vertex(120,130);
 vertex(120,300);
 vertex(280,300);
 vertex(280,130);
 //vertex(x,y);

刘海是用两个扇形组成的
用到了arc()函数

 arc(150,60,120,130,QUARTER_PI/4,PI*2/4);
 arc(250,60,120,130,PI*2/4,PI);
 //arc(x,y,w,h,start,stop);

裙子是用一个梯形和两个扇形构成的
梯形用到了quad()的函数

 quad(165,235,235,235,270,390,130,390);
 //quad(x1,y1,x2,y2,x3,y3,x4,y4);

手是用一个圆做的
用到了circle()函数

  circle(160,350,20);  
  circle(240,350,20);
  //circle(x,y,d);

自己做了一个logo
是用到了vertex()函数

vertex(155, 283);
vertex(160, 280);
vertex(165, 278);
vertex(170, 280);
vertex(175, 283);
vertex(170, 286);
vertex(165, 288);
vertex(160, 286);

交互效果

交互我是让人物进行变装，对衣服进行变色
其中用到了P5中的Interactivity 1变色的代码

let r, g, b;
function setup() {
   
  createCanvas(720, 400);
  // Pick colors randomly
  r = random<