p5.js之Q版人物绘制

头上不知是鹿角还是蝴蝶的Q版小人：

完整代码：

function setup() {

   
createCanvas(800, 700);

}

 

function draw() {

   
background(255);

 

   
//背景粉红色

   
fill(255, 134, 128);

   
ellipse(403,419,600,500);

 

   
//脸部大体颜色

   
strokeWeight(0);

   
fill(254, 224, 178);

   
ellipse(415, 243, 310);

 

   
//头发大体颜色

   
strokeWeight(0);

   
fill(134, 73, 19);

   
ellipse(275, 260, 100);

   
ellipse(345, 255, 85);

 

 

   
strokeWeight(4);

   
fill(134, 73, 19);//头发颜色

 

   
//头发上半部分

   
beginShape();

   
vertex(200, 236);

   
bezierVertex(249, 227, 225, 29, 461, 69);

   
bezierVertex(445, 38, 494, 44, 509, 88);

   
bezierVertex(601, 74, 646, 214, 584, 286);

   
endShape();

 

   
fill(254, 224, 178);//耳朵颜色

   
//耳朵弧线

   
beginShape();

   
vertex(552, 263);

   
bezierVertex(605, 248, 601, 351, 536, 343);

   
endShape();

 

   
//脸弧线

   
beginShape();

   
vertex(291, 332);

   
bezierVertex(224, 413, 455, 430, 534, 343);

   
endShape();

 

 

 

   
strokeWeight(8);

   
fill(99, 30, 0);//眼睛颜色

   
//眼睛

   
//眉毛

   
beginShape();

   
vertex(408, 294);

   
bezierVertex(435, 272, 471, 285, 489, 305);

   
endShape();

 

   
beginShape();

   
vertex(288, 322);

   
bezierVertex(305, 297, 327, 294, 348, 311);

   
endShape();

 

   
strokeWeight(0);

   
ellipse(325, 326, 46);

   
ellipse(310, 335, 21);

 

   
//左眼睛

   
strokeWeight(0);

   
fill(177, 120, 49);

   
ellipse(333, 343, 11);

   
ellipse(324, 343, 13);

 

   
strokeWeight(4);

   
fill(99, 30, 0);

   
beginShape();

   
vertex(343, 307);

   
bezierVertex(351, 317, 351, 337, 337, 350);

   
endShape();

 

   
fill(254, 224, 178);

   
beginShape();

   
vertex(300, 346);

   
bezierVertex(318, 342, 335, 348, 347, 357);

   
endShape();

 

   
fill(99, 30, 0);

   
beginShape();

   
vertex(302, 344);

   
bezierVertex(299, 330, 299, 322, 304, 305);

   
endShape();

 

   
//内部

   
fill(177, 120, 49);

   
strokeWeight(0);

   
beginShape();

   
vertex(305, 344);

   
bezierVertex(315, 324, 338, 323, 342, 340);

   
endShape();

 

   
ellipse(333, 338, 16);

 

    fill(255);

   
ellipse(310,317,7);

 

 

   
//右眼睛

   
fill(99, 30, 0);

   
strokeWeight(4);

   
beginShape();

   
vertex(436, 284);

   
bezierVertex(418, 303, 419, 325, 434, 344);

   
bezierVertex(449, 349, 463, 348, 482, 340);

   
bezierVertex(487, 320, 489, 304, 468, 287);

   
endShape();

 

   
//内部

   
fill(177, 120, 49);

   
strokeWeight(0);

   
beginShape();

   
vertex(440, 344);

   
bezierVertex(445, 320, 469, 314, 483, 317);

   
endShape();

 

   
ellipse(466, 331, 25);

   
ellipse(447, 339, 10);

   
ellipse(452, 339, 10);

   
ellipse(479, 323, 12);

   
beginShape();

   
vertex(440, 343);

   
bezierVertex(455, 347, 470, 344, 479, 334);

   
endShape();

   
beginShape();

   
vertex(471, 342);

   
bezierVertex(480, 341, 490, 330, 483, 316);

   
endShape();

 

   
fill(255);

   
ellipse(431,306,8);

 

 

 

 

   
//嘴巴

   
strokeWeight(2);

 

   
beginShape();

   
fill(200, 82, 47);

   
if (mouseX <= 371) {

       
if (mouseY <= 374)

       
{

           
fill(200, 82, 47);

           
vertex(371 - (371 - mouseX) / 25, 374);

           
bezierVertex(377, 350, 397, 369, 396, 378);

           
bezierVertex(385, 384 + (mouseY - 377) / 15, 377, 377 + (mouseY - 377) /
15, 371 - (371 - mouseX) / 25, 375);

           
endShape();

 

        }

       
else

       
{

           
fill(200, 82, 47);

           
vertex(371 - (371 - mouseX) / 25, 374);

           
bezierVertex(377, 350, 397, 369, 396, 378);

           
bezierVertex(385, 384 + (mouseY - 377) / 15, 370, 377 + (mouseY - 377) /
15, 371 - (371 - mouseX) / 25 , 375);

           
endShape();

 

           
//牙齿

           
beginShape();

           
fill(255);

           
vertex(375, 367);

           
bezierVertex(380, 372, 383, 372, 391, 367);

           
endShape();

       
}

 

    }

   
else

    {

       
if (mouseY <= 374) {

           
fill(200, 82, 47);

           
vertex(371, 374);

           
bezierVertex(377, 350, 397, 369, 396 + (mouseX - 371) / 100, 378);

           
bezierVertex(385, 382 + (mouseY - 377) / 20, 377, 377 + (mouseY - 377) /
20, 371, 375);

           
endShape();

 

 

       
}

       
else {

           
fill(200, 82, 47);

           
vertex(371, 374 );

           
bezierVertex(377, 350, 397, 369, 396 + (mouseX - 371) / 100, 378);

           
bezierVertex(388, 382 + (mouseY - 377) / 20, 370, 377 + (mouseY - 377) /
20, 371, 375);

           
endShape();

 

           
//牙齿

           
beginShape();

           
fill(255);

           
vertex(375, 367);

           
bezierVertex(380, 372, 383, 372, 391, 367);

           
endShape();

       
}

    }

 

   
//beginShape();

   
//fill(255);

   
//vertex(375, 367);

   
//bezierVertex(380, 372, 383, 372, 391, 367);

   
//endShape();

 

 

 

   
strokeWeight(4);

   
//头发下半部分

   
fill(134, 73, 19);//头发颜色

   
line(200, 236, 228, 240);

 

   
beginShape();

   
vertex(228, 240);

   
bezierVertex(209, 280, 234, 326, 273, 340);

   
bezierVertex(266, 326, 262, 314, 265, 296);

   
endShape();

 

   
beginShape();

   
vertex(262, 315);

   
bezierVertex(277, 356, 292, 349, 287, 309);

   
endShape();

 

   
beginShape();

   
vertex(278, 277);

   
bezierVertex(231, 330, 289, 329, 327, 272);

   
bezierVertex(292, 305, 315, 355, 412, 244);

   
bezierVertex(361, 322, 452, 314, 491, 236);

   
bezierVertex(485, 329, 526, 328, 538, 255);

   
bezierVertex(557, 299, 568, 278, 554, 235);

   
endShape();

 

   
//衣服

   
strokeWeight(4);

   
fill(108,106,103);

   
beginShape();

   
vertex(487, 379);

   
bezierVertex(548, 402, 608, 587, 559, 568);

   
bezierVertex(564, 623, 481, 610, 420, 639);

 

    endShape();

 

   
//脸上腮红

   
strokeWeight(0);

   
fill(241, 153, 108);

   
ellipse(307, 359, 30, 20);

   
fill(255);

   
ellipse(315, 355, 4);

   
fill(241, 153, 108);

   
ellipse(479, 354, 35, 25);

   
fill(255);

   
ellipse(488, 346, 4);

 

   
//熊/兔子

    if (mouseButton == LEFT)

    {

       
strokeWeight(4);

       
//外圈头

       
fill(255);

       
beginShape();

       
vertex(279, 357);

       
bezierVertex(230, 270, 210, 350, 248, 429);

       
bezierVertex(115, 698, 663, 675, 475, 430);

       
bezierVertex(510, 280, 450, 300, 410, 397);

       
bezierVertex(369, 404, 281, 405, 278, 356);

       
endShape();

 

       
//兔子耳朵内侧

       
strokeWeight(0);

       
fill(229, 137, 152);

       
beginShape();

       
vertex(260, 415);

       
bezierVertex(227, 330, 267, 330, 284, 398);

       
endShape();

       
beginShape();

       
vertex(425, 405);

       
bezierVertex(465, 310, 490, 320, 460, 420);

       
endShape();

 

       
//两只眼睛

       
strokeWeight(4);

       
fill(0);

       
ellipse(300, 492, 13, 16);

       
ellipse(348, 496, 13, 16);

 

       
fill(229, 137, 152);

       
strokeWeight(3);

 

 

       
//兔子鼻子嘴巴

       
fill(0);

       
ellipse(319, 524, 25, 18);

       
line(318, 533, 317, 545);

 

       
fill(192, 115, 112);

       
beginShape();

       
vertex(290, 540);

       
bezierVertex(312, 540, 326, 542, 345, 545);

       
bezierVertex(345, 590, 290, 650, 290, 540);

       
endShape();

 

       
//兔子腮红

       
strokeWeight(0);

       
fill(199,145,161);

       
ellipse(385, 534, 45, 22);

       
ellipse(261, 524, 40, 20);

 

    }

   
else

    {

       
strokeWeight(4);

       
fill(117, 52, 21);

       
beginShape();

       
vertex(279, 357);

       
bezierVertex(235, 345, 206, 415, 248, 429);

       
bezierVertex(115, 698, 663, 675, 485, 430);

       
bezierVertex(511, 369, 433, 327, 410, 397);

       
bezierVertex(369, 404, 281, 405, 278, 356);

       
endShape();

 

       
fill(89, 21, 4);

       
beginShape();

       
vertex(260, 415);

       
bezierVertex(229, 397, 267, 361, 284, 398);

       
endShape();

       
beginShape();

       
vertex(425, 411);

       
bezierVertex(434, 372, 479, 380, 465, 430);

       
endShape();

 

       
fill(0);

       
ellipse(294, 492, 13, 16);

       
ellipse(363, 493, 13, 16);

       
fill(249, 218, 190);

       
strokeWeight(3);

       
//ellipse(320, 541, 50, 60);

       
beginShape();

       
vertex(317, 492);

       
bezierVertex(285, 505, 283, 546, 297, 566);

       
bezierVertex(312, 593, 350, 588, 358, 559);

       
bezierVertex(368, 530, 348, 486, 317, 492);

       
endShape();

 

       
beginShape();

       
fill(0);

       
vertex(306, 521);

       
bezierVertex(313, 517, 323, 516, 335, 523);

       
bezierVertex(337, 530, 330, 530, 317, 533);

       
bezierVertex(314, 530, 303, 528, 306, 521);

       
endShape();

       
line(318, 533, 317, 551);

       
line(317, 551, 308, 558);

       
line(317, 551, 327, 559);

    }

 

 

   
//衣服

   
beginShape();

   
strokeWeight(4);

   
fill(108, 106, 103);

    vertex(500, 404);

   
bezierVertex(489, 434, 470, 447, 447, 457);

   
bezierVertex(445, 470, 458, 492, 458, 492);

   
bezierVertex(490, 492, 521, 480, 535, 461);

   
endShape();

 

   
//衣服深色

   
strokeWeight(0);

   
fill(36, 41, 33);

   
beginShape();

    vertex(484, 435);

   
bezierVertex(470, 444, 461, 454, 447, 457);

   
bezierVertex(450, 470, 450, 477, 459, 490);

   
bezierVertex(481, 489, 482, 490, 498, 483);

   
endShape();

 

   
beginShape();

   
vertex(520, 496);

   
bezierVertex(523, 509, 524, 528, 518, 546);

   
bezierVertex(553, 561, 538, 564, 570, 568);

   
bezierVertex(584, 539, 568, 517, 566, 496);

   
endShape();

 

 

   
strokeWeight(4);

   
fill(254, 224, 178);

   
beginShape();

   
vertex(446, 464);

   
bezierVertex(423, 466, 397, 488, 377, 492);

   
bezierVertex(350, 502, 361, 529, 390, 512);

   
bezierVertex(414, 506, 439, 501, 455, 491);

   
endShape();

 

   
beginShape();

   
vertex(240, 449);

   
bezierVertex(223, 460, 218, 468, 225, 487);

   
endShape();

   
beginShape();

   
vertex(239, 451);

   
bezierVertex(253, 468, 251, 487, 225, 486);

   
endShape();

 

   
//鞋子

   
fill(255);

   
strokeWeight(0);

   
ellipse(276, 606, 20);

 

   
strokeWeight(4);

   
beginShape();

   
vertex(412, 587);

   
bezierVertex(390, 599, 395, 630, 413, 638);

   
endShape();

   
beginShape();

   
vertex(411, 587);

   
bezierVertex(430, 590, 445, 644, 413, 638);

   
endShape();

   
beginShape();

   
vertex(412, 587);

   
bezierVertex(420, 603, 424, 625, 420, 630);

   
endShape();

 

   
strokeWeight(0);

   
ellipse(278, 593, 30);

   
ellipse(268, 580, 17);

   
ellipse(289, 604, 20);

 

 

   
strokeWeight(4);

   
beginShape();

   
vertex(261, 569);

   
bezierVertex(260, 593, 262, 594, 272, 619);

   
endShape();

   
beginShape();

   
vertex(261, 569);

   
bezierVertex(268, 568, 283, 587, 282, 598);

   
endShape();

   
beginShape();

   
vertex(272, 574);

   
bezierVertex(291, 582, 299, 595, 304, 610);

   
endShape();

   
line(272, 619, 304, 610);

 

 

   
//衣服深色

    strokeWeight(4);

   
fill(42, 39, 31);

   
line(520, 547, 558, 568);

 

 

   
//头上高光

   
strokeWeight(0);

   
fill(255);

   
ellipse(269, 182, 20);

   
beginShape();

   
vertex(275, 167);

   
bezierVertex(289, 121, 328, 95, 341, 95);

   
bezierVertex(400, 78, 387, 106, 361, 108);

   
bezierVertex(316, 120, 290, 153, 282, 167);

   
endShape();

 

 

   
//鹿角

   
strokeWeight(0);

   
fill(246,204,37);

 

   
var t = cos(millis() / 60) ;

 

   
beginShape();

   
vertex(551, 151);

   
bezierVertex(750 + 10 * t, 120 + 40 * t, 697 + 50 * t, 54, 572 + 5 * t,
138 + 5 * t);

   
bezierVertex(618 + 10 * t, 98 + 20 * t, 599 + 10 * t, 60 + 10 * t, 552,
151);

   
endShape();

 

   
beginShape();

   
vertex(268, 101);

   
bezierVertex(86 - 10 * t, 72 + 40 * t, 180 - 50 * t, 29, 258 - 10 * t,
90 + 2 * t);

   
bezierVertex(202 - 10 * t, 49 + 20 * t, 258 - 10 * t, -3 + 10 * t, 268 ,
101);

   
endShape();

 

}

用到函数：

1、贝塞尔曲线：bezierVertex()

beginShape();   
vertex(288, 322);   
bezierVertex(305, 297, 327, 294, 348, 311);   
endShape();

2、画圆/椭圆：

ellipse(324,343, 13);
ellipse(385,534, 45, 22);

3、画直线：

line(272, 619, 304, 610);

4、使用时间：

var t = cos(millis() / 60) ;

几个动态和交互：

1、晃动的鹿角：主要使用时间，用cos将时间变为周期函数，从而鹿角周期运动。

 //鹿角   
strokeWeight(0);   
fill(246,204,37);
var t = cos(millis() / 60) ;
beginShape();
vertex(551, 151);
bezierVertex(750 + 10 * t, 120 + 40 * t, 697 + 50 * t, 54, 572 + 5 * t,
138 + 5 * t);
bezierVertex(618 + 10 * t, 98 + 20 * t, 599 + 10 * t, 60 + 10 * t, 552,
151);
endShape();
beginShape();   
vertex(268, 101);  
bezierVertex(86 - 10 * t, 72 + 40 * t, 180 - 50 * t, 29, 258 - 10 * t,
90 + 2 * t);   
bezierVertex(202 - 10 * t, 49 + 20 * t, 258 - 10 * t, -3 + 10 * t, 268 ,
101);   
endShape();

2、随着鼠标变大小的嘴巴，牙齿也在变化哦！

//嘴巴
    strokeWeight(2);
    beginShape();
    fill(200, 82, 47);
    if (mouseX <=
371) {
        if (mouseY <= 374)
        {
            fill(200, 82, 47);
            vertex(371 - (371 - mouseX) / 25,
374);
            bezierVertex(377, 350, 397, 369,
396, 378);
            bezierVertex(385, 384 + (mouseY - 377) / 15,
377, 377 + (mouseY - 377) / 15, 371 - (371 - mouseX) / 25, 375);
            endShape();
        }
        else
        {
            fill(200, 82, 47);
            vertex(371 - (371 - mouseX) / 25,
374);
            bezierVertex(377, 350, 397, 369, 396,
378);
            bezierVertex(385, 384 + (mouseY -
377) / 15, 370, 377 + (mouseY - 377) / 15, 371 - (371 - mouseX) / 25 , 375);
            endShape();

            //牙齿
            beginShape();
            fill(255);
            vertex(375, 367);
            bezierVertex(380, 372, 383, 372,
391, 367);
            endShape();
        }
    }
    else
    {
        if (mouseY <= 374) {
            fill(200, 82, 47);
            vertex(371, 374);
            bezierVertex(377, 350, 397, 369,
396 + (mouseX - 371) / 100, 378);
            bezierVertex(385, 382 + (mouseY -
377) / 20, 377, 377 + (mouseY - 377) / 20, 371, 375);
            endShape()
        }
        else {
            fill(200, 82, 47);
            vertex(371, 374 );
            bezierVertex(377, 350, 397, 369,
396 + (mouseX - 371) / 100, 378);
            bezierVertex(388, 382 + (mouseY -
377) / 20, 370, 377 + (mouseY - 377) / 20, 371, 375);
            endShape();

             //牙齿
            beginShape();
            fill(255);
            vertex(375, 367);
            bezierVertex(380, 372, 383, 372,
391, 367);
            endShape();
        }
    }

3、点击鼠标左键，布朗熊变可妮兔，再点击其他键变回布朗熊。

代码太长，上面有，就不重复贴了。