运用p5.js实现王一博q版形象

展示成果

静态：

gif：

创作灵感

这次题目是自画像、自己喜欢的事物，所以我选取了自己喜欢的一个q版形象进行模仿。以下是原图：

因为要加上动态和交互，于是我给人物的眼睛、手脚加上动态效果，鼠标点击改变衣服颜色进行交互。

交互代码

// When the user clicks the mouse
let angle1 = 0;
let angle2 = 0;
let scalar = 70;

function mousePressed() {
   
  // Check if mouse is inside the circle
  
  
  let d = dist(mouseX, mouseY, 110,85);
  if (d < 25) {
   
    // Pick new random color values
    r = random(255);
    g = random(255);
    b = random(255);
  }
  let d1 = dist(mouseX, mouseY, 110,150);
  if (d1 < 25) {
   
    // Pick new random color values
    r1 = random(255);
    g1 = random(125);
    b1 = random(255);
  }
    let d2 = dist(mouseX, mouseY, 110,215);
  if (d2 < 25) {
   
    // Pick new random color values
    r2 = random(255);
    g2 = random(255);
    b2 = random(255);
  }
   let d3 = dist(mouseX, mouseY, 110,280);
  if (d3 < 25) {
   
    // Pick new random color values
    r3 = random(255);
    g3 = random(255);
    b3 = random(100);
  }
     let d4 = dist(mouseX, mouseY, 800,800);

 if(d4<800)
 {
   
    // Pick new random color values
    r = 58;
    g = 46;
    b = 57;
    
    r1 = 106;
    g1 = 82;
    b1 = 77;
    
    r2= 210;
    g2 =188;
    b2= 230;
    
    r3 = 13;
    g3 = 27;
    b3 = 44;
  }
  
}
function setup() {
   
  createCanvas(800,800);
    r = random(255);
    g = random(255);
    b = random(255);
  
      r1 = random(255);
    g1 = random(255);
    b1= random(255);
  
    r2 = random(255);
    g2 = random(255);
    b2= random(255);
  
  r3 = random(255);
    g3 = random(255);
    b3= random(255);
}

生成动态代码

let ang1 = radians(angle1);
  let ang2 = radians(angle2);
  let x1 =3*cos(ang1);
  let x2=cos(ang1);
    let x4=sin(ang1);

let x3 =3*sin(ang1+100);

所有代码

// When the user clicks the mouse
let angle1 = 0;
let angle2 = 0;
let scalar = 70;

function mousePressed() {
   
  // Check if mouse is inside the circle
  
  
  let d = dist(mouseX, mouseY, 110,85);
  if (d < 25) {
   
    // Pick new random color values
    r = random(255);
    g = random(255);
    b = random(255);
  }
  let d1 = dist(mouseX, mouseY, 110,150);
  if (d1 < 25) {
   
    // Pick new random color values
    r1 = random(255);
    g1 = random(125);
    b1 = random(255);
  }
    let d2 = dist(mouseX, mouseY, 110,215);
  if (d2 < 25) {
   
    // Pick new random color values
    r2 = random(255);
    g2 = random(255);
    b2 = random(255);
  }
   let d3 = dist(mouseX, mouseY, 110,280);
  if (d3 < 25) {
   
    // Pick new random color values
    r3 = random(255);
    g3 = random(255);
    b3 = random(100);
  }
     let d4 = dist(mouseX, mouseY, 800,800);

 if(d4<800)
 {
   
    // Pick new random color values
    r = 58;
    g = 46;
    b = 57;
    
    r1 = 106;
    g1 = 82;
    b1 = 77;
    
    r2= 210;
    g2 =188;
    b2= 230;
    
    r3 = 13;
    g3 = 27;
    b3 = 44;
  }
  
}
function setup() {
   
  createCanvas(800,800);
    r = random(255);
    g = random(255);
    b = random(255);
  
      r1 = random(255);
    g1 = random(255);
    b1= random(255);
  
    r2 = random(255);
    g2 = random(255);
    b2= random(255);
  
  r3 = random(255);
    g3 = random(255);
    b3= random(255);
}

function draw() {
   
  background(255);
  
 
  /帽子/
  beginShape();
  textSize(20);
  fill(r, g, b);  
  text('帽子:',30,90);
  ellipse(110, 85, 50, 50);
  stroke(0,0,0);
strokeWeight(6);
  vertex(209,262);
  bezierVertex(239,12,534,37,557,258);
  bezierVertex(453,144,279,167,209,262);
  endShape();
  
    beginShape();
fill(r, g, b);vertex(210,259);
bezierVertex(298,145,497,156,560,271);
bezierVertex(559,317,561,294,545,350);
bezierVertex(467,243,311,232,228,339);
bezierVertex(216,317,205,292,208,270);
endShape();
  
  noFill();
  beginShape();
vertex(264,214);
bezierVertex(255,187,253,169,260,139);
endShape();
  

  beginShape();
vertex(