p5.js画一幅自画像

目录

• 用p5.js画一幅自画像

用p5.js画一幅自画像

如何画基础图形

扇形：arc(200, 130, 112, 80, PI, 0);//绘制弧(x,y,宽,高,起始角度,终止角度)

圆形：ellipse(175,150,30,30);//绘制椭圆(x,y,宽,高)

四边形：quad(100,0,200,0,0,200,0,100); //绘制四边形（x1,y1,x2,y2,x3,y3,x4,y4）

矩形：rect(190, 195, 20, 20);//绘制矩形(x,y,宽,高)

三角形： triangle(190,235,210,235,200,250);//绘制三角形(x1,y1,x2,y2,x3,y3)

线条和图形的属性

填充：fill(); 或者noFill();

边框：stroke();或者noStroke();

鼠标交互

mouseX;

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();
    //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)
    fr = 3;
    frameRate(fr);
  }
  else
  {
      noStroke();
      //fill("#f7abb3");
      fill(clr2);
      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(clr1);
      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)
      fr = 2;
      frameRate(fr);
  }
  
  //脖子
  fill("#fbeadf");
  rect(190, 195, 20, 20);//绘制矩形(x,y,宽,高)
   
  //衣服
  fill("#929af6");
  quad(190,215,210,215,240,260,160,260); 
  
  //衣服上的星星
  noStroke();
  fill("#891020");
  triangle(190,235,210,235,200,250);//绘制三角形(x1,y1,x2,y2,x3,y3)
  triangle(190,245,210,245,200,230);//绘制三角形(x1,y1,x2,y2,x3,y3)
  
  //头发
  noStroke();
  fill("#6b4c4f");
  rect(140, 142, 40, 130);//绘制矩形(x,y,宽,高) 
  rect(220, 142, 40, 130);//绘制矩形(x,y,宽,高) 
  
  //耳朵
  stroke(0);
  fill("#fceade");
  ellipse(260,150,20,20);//绘制椭圆(x,y,宽,高) 
  ellipse(140,150,20,20);//绘制椭圆(x,y,宽,高)
  
  //脸
  fill("#fef3ec");
  ellipse(200,150,120,120);//绘制椭圆(x,y,宽,高) 
   
  //刘海
  noStroke();
  fill("#6b4c4f");
  arc(200, 130, 112, 80, PI, 0);//绘制弧(x,y,宽,高,起始角度,终止角度)
  
  //眼眶和嘴
  stroke(0);
  fill(255);
  ellipse(175,150,30,30);//绘制椭圆(x,y,宽,高) 
  ellipse(225,150,30,30);//绘制椭圆(x,y,宽,高)
  triangle(200,180,190,185,210,185);//绘制三角形(x1,y1,x2,y2,x3,y3) 
  
  //眼球
  fill(0);
  var x1=2*mouseX/40+165;
  var y1=2*mouseY/40+140;
  var x2=2*mouseX/40+215;
  var y2=2*mouseY/40+140;
  ellipse(x1,y1,15,15);//绘制椭圆(x,y,宽,高) 
  ellipse(x2,y2,15,15);//绘制椭圆(x,y,宽,高)
}