p5.js画一幅自画像（虽然和自己并不像）

用p5.js画一幅自画像

如何画基础图形

1. 扇形：arc(200, 130, 112, 80, PI, 0);//绘制弧(x,y,宽,高,起始角度,终止角度)
2. 圆形：ellipse(175,150,30,30);//绘制椭圆(x,y,宽,高)
3. 四边形：quad(100,0,200,0,0,200,0,100); //绘制四边形（x1,y1,x2,y2,x3,y3,x4,y4）
4. 矩形：rect(190, 195, 20, 20);//绘制矩形(x,y,宽,高)
5. 三角形： triangle(190,235,210,235,200,250);//绘制三角形(x1,y1,x2,y2,x3,y3)

线条和图形的属性

1. 填充：fill(); 或者noFill();
2. 边框：stroke();或者noStroke();

鼠标交互

1. mouseX;
2. mouseY;

背景定时换颜色

使用了frameRate(120);和count++;来实现，count奇偶数时背景颜色不同。

效果

完整代码

let clr1="#f7abb3";
let clr2="#c9404e";
let count=0;
function setup() {
   
  createCanvas(400, 400);
  frameRate(120);
}

function draw() {
   
  background(255);
  
  //条纹背景
  /*
  noStroke();
  fill("#f7abb3");
  //fill(clr1);
  triangle(0,0,100,0,0,100);//绘制三角形(x1,y1,x2,y2,x3,y3)    
  quad(200,0,300,0,0,300,0,200);
  quad(400,0,400,100,100,400,0,400);
  quad(400,200,400,300,300,400,200,400);
   
  fill("#c9404e");
  //fill(clr2);
  quad(100,0,200,0,0,200,0,100); 
  quad(300,0,400,0,0,400,0,300);
  quad(400,100,400,200,200,400,100,400);
  triangle(400,300,400,400,300,400);//绘制三角形(x1,y1,x2,y2,x3,y3)
 */
  
  count++;
  if(count%2==0)
  {
   
    
    noStroke