运用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(310,193);
bezierVertex(300,161,300,138,307,100);
endShape();

beginShape();
vertex(363,85);
bezierVertex(369,121,372,131,371,181);
endShape();

beginShape();
  
vertex(419,88);
bezierVertex(431,126,431,147,423,186);
endShape();

  beginShape();
vertex(479,115);
bezierVertex(492,146,494,175,480,203);
endShape();

  beginShape();
vertex(530,173);
bezierVertex(535,195,533,213,526,230);
endShape();
  
  beginShape();
vertex(209,262);
bezierVertex(203,297,207,312,227,341);
endShape();

  beginShape();
vertex(557,258);
bezierVertex(565,297,558,315,545,341);
endShape();

  beginShape();
vertex(237,337);
bezierVertex(299,240,462,236,532,339);
endShape();
  
  beginShape();
vertex(229,240);
bezierVertex(224,267,232,282,248,320);
endShape();

  beginShape();
vertex(276,207);
bezierVertex(272,240,272,250,286,291);
endShape();

  beginShape();
vertex(326,187);
bezierVertex(329,218,328,239,334,269);
endShape();

  beginShape();
vertex(383,182);
bezierVertex(385,212,384,231,384,262);
endShape();

  beginShape();
vertex(445,190);
bezierVertex(445,223,440,244,430,269);
endShape();
  
  beginShape();
vertex(490,207);
bezierVertex(492,243,492,259,471,284);
endShape();


  
  
beginShape();
vertex(542,244);
bezierVertex(542,282,539,292,515,318);
endShape();
  

///////////////////耳朵脸////////////////
  beginShape();
  strokeWeight(0);
  fill(253,245,239);
vertex(399,437);
bezierVertex(345,379,281,471,371,474);
bezierVertex(478,480,491,373,401,422);
endShape();



  
  
  
beginShape();
  fill(255, 245, 238);
  strokeWeight(0);
vertex(236,342);
bezierVertex(269,242,506,232,523,341);
bezierVertex(470,352,343,337,261,345);
    vertex(249,330);
    vertex(522,330);
    vertex(530,403);
    vertex(249,395);
endShape();


    beginShape();
  fill(255, 245, 238);
  stroke(170,128,126);
  strokeWeight(3);
  
endShape();
beginShape();
vertex(252,340);
bezierVertex(186,316,215,426,269,410);
endShape();

  beginShape();
vertex(515,345);
bezierVertex(579,313,559,421,501,407);
endShape();

  beginShape();
vertex(261,393);
bezierVertex(294,479,488,468,509,389);
endShape();
  
  beginShape();
  fill(238,212,202);
vertex(260,368);
bezierVertex(240,345,213,391,262,399);
endShape();

beginShape();
vertex(512,366);
bezierVertex(556,345,535,405,506,393);
endShape();


  
  beginShape();
vertex(262,315);
bezierVertex(260,326,260,340,269,364);
endShape();
  
  beginShape();
vertex(249,336);
bezierVertex(256,350,256,353,269,364);
endShape();

  beginShape();
vertex(385,263);
bezierVertex(365,286,367,299,388,319);
endShape();

beginShape();
vertex(429,269);
bezierVertex(400,287,385,303,388,319);
endShape();

beginShape();
vertex(429,269);
bezierVertex(425,300,456,328,505,316);
endShape();

  beginShape();
vertex(505,316);
bezierVertex(505,342,505,353,498,365);
endShape();
  
  beginShape();
vertex(515,345);
bezierVertex(508,359,513,353,498,365);
endShape();


  ///////////////////眉毛/////////////////////////
  stroke(72,34,33);
  line(294,292,350,300);
  line(294,293,350,301);
  line(294,295,350,301);
  line(294,297,350,303);
  line(294,296,350,302);
  line(294,298,350,304);
  line(294,300,350,305);
  line(294,301,350,305);
  
  line(410,301,435,295);
  line(410,302,435,296);
  line(410,303,435,297);
  line(410,304,435,298);
  line(410,305,435,299);
  line(410,300,435,294);
  line(410,299,435,293);

  /////////////////////头发////////////////////////
    
  textSize(20);
  fill(r1, g1, b1);  
  strokeWeight(0);
  text('头发：',30,160);
  ellipse(110, 150, 50, 50);
  
  beginShape();
fill(107,83,78);
    fill(r1, g1, b1);  
strokeWeight(4);
stroke(61,30,25);
vertex(378,266);
bezierVertex(367,280,368,315,420,340);
bezierVertex(400,296,416,257,384,254);
endShape();
  
  beginShape();
vertex(411,266);
bezierVertex(424,317,490,333,514,327);
bezierVertex(466,313,485,264,439,266);
endShape();

vertex(472,276);
bezierVertex(484,306,497,314,522,326);
bezierVertex(517,305,493,282,494,285);
endShape();
beginShape();
vertex(405,259);
bezierVertex(408,281,414,292,428,311);
bezierVertex(429,297,437,270,404,253);
endShape();
beginShape();
vertex(509,305);
bezierVertex(501,331,518,340,495,371);
bezierVertex(521,340,526,340,523,314);
endShape();
beginShape();
vertex(247,314);
bezierVertex(279,315,301,309,307,272);
endShape();

beginShape();
vertex(238,325);
bezierVertex(243,343,248,355,263,373);
bezierVertex(260,338,267,339,269,294);
endShape();




  //////////////////////衬衫外套///////////////////////
  
    strokeWeight(0);
   textSize(20);
  fill(r2, g2, b2);  
  strokeWeight(0);
  text('外套：',30,225);
  ellipse(110, 215, 50, 50);
  

beginShape();
  fill(229,203,238);
    fill(r2, g2, b2);  

    vertex(292,467);
    vertex(306,514);
    vertex(301,559);
      vertex(292,563);

      vertex(253,497);

endShape();
  beginShape();
vertex(473,464);
    vertex(515,496);
    vertex(476,555);
    vertex(466,532);
      vertex(473,464);

endShape();
  
  
  
  
  line(443,444,476,468);
  line(449,443,476,466);
  strokeWeight(3);
  stroke(0,0,0);
  line(443,445,475,465);
  
beginShape();
  stroke(49,32,35);
  strokeWeight(2);
vertex(372,609);
bezierVertex(371,569,364,541,327,448);
bezierVertex(314,451,308,455,293,465);
bezierVertex(300,491,303,516,301,536);
bezierVertex(302,556,302,574,294,595);
bezierVertex(321,606,344,613,372,609);
endShape();

  beginShape();
vertex(443,444);
bezierVertex(411,477,400,507,398,609);
bezierVertex(426,609,451,605,473,599);
bezierVertex(470,567,470,547,467,524);
bezierVertex(471,500,472,484,476,468);
  
endShape();



line(293,465,253,494);
line(253,494,291,565);
line(267,485,300,551);
line(291,565,299,560);

line(477,466,515,497);
line(515,497,476,552);
line(505,489,469,543);
line(476,552,469,545);
  
line(326,446,318,448);
  line(318,448,313,495);
   line(313,495,347,503);
     line(336,500,324,524);
     line(324,524,365,558);
       line(349,565,360,565);
       line(349,580,360,580);
line(453,449,454,495);
  line(454,495,410,502);
    line(430,499,446,527);    line(446,527,403,555);
line(417,548,417,610);
  strokeWeight(9);
  stroke(255,255,255);
  line(408,569,408,569);
  line(408,590,408,590);

  stroke(0,0,0);
  strokeWeight(2);

  
////////////////////////T恤///////////////////////
  noFill();

  beginShape();
vertex(335,466);
bezierVertex(371,475,401,474,424,467);
endShape();

  beginShape();
vertex(340,480);
bezierVertex(372,487,396,488,418,480);
endShape();
  line(350,501,412,501);
  line(362,540,403,540);
    line(364,545,402,545);

  ///////////////下摆//////////////////
beginShape();
vertex(292,616);
bezierVertex(371,636,403,633,475,617);
endShape();

  line(295,598,291,616);
  line(473,598,476,616);
//////////////裤子////////////////
  
  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);

    strokeWeight(0);
   textSize(20);
  fill(r3, g3, b3);  
  strokeWeight(0);
  text('裤子：',30,290);
  ellipse(110, 280, 50, 50); 
  
  beginShape();
  stroke(63,40,41);
  fill(4,26,44);
    fill(r3, g3, b3);  

  strokeWeight(2);
vertex(296,614);
bezierVertex(297,630,296,643,299-x1,674);
bezierVertex(328,673-2*x1,346,675,370-x1/2,674);
bezierVertex(370,652,372,639,378,618);
bezierVertex(388,652,386,661,388-x3,673);
bezierVertex(430,673-2*x3,412,675,462-x3/2,673);
bezierVertex(464,651,468,632,469,619);
endShape();

//////////////腿////////////

  

fill(257,247,239);
  stroke(215,151,137);
  strokeWeight(3);
beginShape();
vertex(313-x1,675);
bezierVertex(314,696+2*x1,347,704+2*x1,359+x1,675);
endShape();

beginShape();
vertex(404-x3,676);
bezierVertex(415,705+2*x3,444,707+2*x3,455+x3,676);
endShape();

////////////////////胳膊/////////

  beginShape();
vertex(257-x1,508-x1);
bezierVertex(230-x1,525-x1,220-x1,537-x1,233-x1,552-x1);
bezierVertex(248-x1,579-x1,266-x1,577-x1,287-x1,557-x1);
endShape();
  
  beginShape();
vertex(480+x3,549-x3);
bezierVertex(508+x3,582-x3,523+x3,575-x3,541+x3,563-x3);
bezierVertex(549+x3,542-x3,535+x3,527-x3,509+x3,507-x3);
endShape();
  
  angle1 += 10;
  /////////////////////眼睛鼻子嘴////////////////////////

  
stroke(224,154,151);
beginShape();
noFill();
strokeWeight(3);
vertex(283,348);
bezierVertex(284,396,329,376,343,376);
endShape();
  beginShape();
noFill();
strokeWeight(2);
vertex(282,346);
bezierVertex(284,396,329,376,343,376);
endShape();
  beginShape();
noFill();
strokeWeight(2);
vertex(281,348);
bezierVertex(284,396,329,376,343,376);
endShape();
  beginShape();
noFill();
strokeWeight(2);
vertex(284,348);
bezierVertex(284,396,329,376,343,376);
endShape();
    beginShape();
noFill();
strokeWeight(2);
vertex(280,348);
bezierVertex(284,396,329,376,343,376);
endShape();
  
  
beginShape();
vertex(423,372);
bezierVertex(462,386,487,383,490,345);
endShape();
  beginShape();
vertex(423,372);
bezierVertex(462,386,487,383,491,345);
endShape();
  beginShape();
vertex(423,372);
bezierVertex(462,386,487,383,492,345);
endShape();
  beginShape();
vertex(423,372);
bezierVertex(462,386,487,383,493,345);
endShape();
  beginShape();
vertex(423,372);
bezierVertex(462,386,487,383,488,345);
endShape();
  beginShape();
vertex(423,372);
bezierVertex(462,386,487,383,489,345);
endShape();
  

    stroke(72,34,33);
beginShape();
  noFill();
  strokeWeight(9);
vertex(355,341);
bezierVertex(324,321,290,322,276,354);
endShape();
  
  
beginShape();
   noFill();
  strokeWeight(9);
vertex(495,353);
bezierVertex(487,325,456,316,413,341);
endShape();
      strokeWeight(2);

beginShape();
fill(64,32,24);
vertex(301,330);
bezierVertex(280,393,359,395,342,330);
endShape();

beginShape();
vertex(423,335);
bezierVertex(406,381,488,404,465,324);
endShape();
  
noFill();
  stroke(214,154,143);
beginShape();
vertex(269,347);
bezierVertex(280,322,312,314,342,326);
endShape();
    stroke(109,91,91);

beginShape();
vertex(425,327);
bezierVertex(467,308,493,319,507,355);
endShape();
  
  

beginShape();
  fill(204,159,113);
vertex(303-x2,363+x2/2);
    strokeWeight(3);
bezierVertex(321-x2,375+x2/2,319-x2,380+x2/2,337-x2,364+x2/2);
  strokeWeight(3);
 

endShape();

beginShape();
vertex(427-x2,359+x2/2);
bezierVertex(447-x2,379+x2/2,453-x2,370+x2/2,466-x2,358+x2/2);
endShape();

  
  
  
  
  
  stroke(237,204,172);
line(461,354,465,354);
line(461,350,465,350);
  line(336,354,340,354);
line(336,350,340,350);
strokeWeight(6);
stroke(255,255,255);
line(304,340+x2,308,338+x2);
line(425,343+x2,429,340+x2);
  stroke(173,104,069);
  strokeWeight(14);
  line(323,352,323,352);
  line(444,350,444,350);
  stroke(72,34,33);
strokeWeight(2);
noFill();
  
  line(389,370,389,374);
line(387,370,389,374);
  
  stroke(72,34,33);
beginShape();
vertex(366,407);
bezierVertex(378,402,400,402,416,405);
endShape();
  
beginShape();
  fill(247,192,188);
  strokeWeight(0);
vertex(278,400);
bezierVertex(287,413,345,415,344,398);
bezierVertex(333,383,285,382,279,397);
endShape();

beginShape();
vertex(426,396);
bezierVertex(435,417,482,417,490,394);
bezierVertex(481,375,442,378,426,398);
endShape();



}