头上不知是鹿角还是蝴蝶的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、点击鼠标左键，布朗熊变可妮兔，再点击其他键变回布朗熊。

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