创意自画像

1.实验内容：

用代码绘制自画像。

2.实验成果：

3.实验步骤：

首先我先定义了一些颜色方便之后使用：

然后初始化一些东西：

首先从最底层开始画，这样之后画的东西会遮挡一部分所以可以不用在边缘太过细致考虑，节省了时间：

首先是尾巴：

然后画脸的轮廓：

身子:

阴影和多余线条：

脸：

手爪：

我的签名：

到此为止就大功告成：

实验全部源码:

color Black = color(0, 0, 0);

color White = color(255, 255, 255);

color Back = color(229, 164, 0);

color Skin = color(255, 216, 33);

color SkinShadow = color(229, 171, 46);

color Tail = color(153, 62, 15);

color Face = color(234, 78, 37);

color Tough = color(231, 115, 115);

color ToughShadow = color(180, 59, 64);

color Mouth = color(137, 14, 24);

//noFill();

//noStroke();

//stroke(Black);

//strokeWeight(2);

//line(100,100,400,400);

//ellipse(250,250,100,100);

void setup() {

  size(540, 960);

  colorMode(RGB, 255);

  ellipseMode(CENTER);

  background(Back);

  stroke(Black);

  strokeWeight(3);

  DrawPiKa();

}

void DrawPiKa() {

  fill(Skin);

  noStroke();

  beginShape();

  vertex(0, 621);

  bezierVertex(73, 596, 124, 587, 181, 578);

  vertex(186, 576);

  bezierVertex(208, 596, 216, 608, 210, 631);

  vertex(235, 626);

  bezierVertex(163, 639, 91, 654, 1, 721);

  endShape();

  noFill();

  stroke(Black);

  beginShape();

  vertex(0, 621);

  bezierVertex(73, 596, 124, 587, 181, 578);

  endShape();

  fill(SkinShadow);

  noStroke();

  beginShape();

  vertex(235, 626);

  bezierVertex(163, 639, 91, 654, 1, 721);

  vertex(0, 723);

  bezierVertex(22, 751, 50, 768, 77, 784);

  vertex(78, 783);

  bezierVertex(183, 736, 272, 722, 292, 632);

  endShape();

  noFill();

  stroke(Black);

  beginShape();

  vertex(0, 723);

  bezierVertex(22, 751, 50, 768, 77, 784);

  vertex(78, 783);

  bezierVertex(183, 736, 272, 722, 292, 632);

  endShape();

  fill(SkinShadow);

  beginShape();

  vertex(295, 780);

  bezierVertex(305, 806, 298, 792, 308, 821);

  vertex(308, 821);

  bezierVertex(341, 814, 365, 802, 385, 797);

  vertex(385, 797);

  bezierVertex(385, 831, 406, 833, 422, 808);

  vertex(422, 808);

  bezierVertex(430, 782, 418, 732, 345, 755);

  vertex(345, 755);

  bezierVertex(344, 754, 341, 743, 340, 734);

  endShape();

  fill(Tail);

  beginShape();

  vertex(389, 817);

  bezierVertex(391, 841, 385, 841, 388, 866);

  vertex(388, 866);

  bezierVertex(420, 857, 436, 848, 455, 842);

  vertex(455, 842);

  bezierVertex(463, 857, 464, 861, 469, 869);

  vertex(469, 869);

  bezierVertex(486, 863, 489, 862, 506, 856);

  vertex(506, 856);

  bezierVertex(493, 837, 458, 808, 424, 822);

  vertex(424, 822);

  bezierVertex(411, 817, 402, 826, 392, 818);

  endShape();

  fill(Skin);

  beginShape();

  vertex(376, 0);

  bezierVertex(313, 48, 273, 216, 266, 253);

  vertex(266, 253);

  bezierVertex(203, 275, 151, 301, 100, 395);

  vertex(100, 395);

  bezierVertex(67, 381, 33, 370, -5, 358);

  vertex(-5, 358);

  bezierVertex(-5, 383, -5, 403, -5, 445);

  vertex(-5, 445);

  bezierVertex(30, 457, 63, 468, 90, 468);

  vertex(90, 468);

  bezierVertex(103, 526, 154, 555, 203, 622);

  vertex(203, 622);

  bezierVertex(237, 683, 331, 669, 381, 632);

  vertex(381, 632);

  bezierVertex(474, 562, 503, 475, 486, 409);

  vertex(486, 409);

  bezierVertex(479, 377, 442, 360, 413, 335);

  vertex(413, 335);

  bezierVertex(388, 311, 372, 292, 336, 271);

  vertex(336, 271);

  bezierVertex(373, 216, 398, 34, 377, 1);

  endShape();

  beginShape();

  vertex(408, 328);

  bezierVertex(409, 313, 409, 297, 416, 274);

  vertex(416, 274);

  bezierVertex(434, 260, 441, 245, 474, 225);

  vertex(474, 225);

  bezierVertex(480, 258, 533, 327, 539, 497);

  vertex(539, 497);

  bezierVertex(555, 605, 554, 665, 541, 871);

  vertex(541, 871);

  bezierVertex(477, 869, 385, 776, 356, 732);

  vertex(356, 732);

  bezierVertex(306, 776, 231, 823, 168, 824);

  vertex(168, 824);

  bezierVertex(152, 765, 212, 704, 251, 660);

  vertex(249, 659);

  bezierVertex(368, 683, 443, 577, 459, 549);

  vertex(459, 549);

  bezierVertex(475, 527, 511, 441, 476, 389);

  vertex(476, 389);

  bezierVertex(458, 364, 433, 353, 407, 329);

  endShape();

  noStroke();

  ellipse(426, 594, 125, 125);

  fill(SkinShadow);

  beginShape();

  vertex(284, 782);

  bezierVertex(317, 768, 358, 730, 384, 710);

  vertex(381, 690);

  bezierVertex(347, 719, 314, 752, 282, 783);

  endShape();

  beginShape();

  vertex(357, 730);

  bezierVertex(372, 750, 379, 760, 392, 773);

  vertex(392, 775);

  bezierVertex(396, 747, 395, 719, 380, 690);

  endShape();

  beginShape();

  vertex(517, 485);

  bezierVertex(520, 463, 526, 437, 530, 412);

  vertex(530, 412);

  bezierVertex(533, 443, 539, 455, 537, 499);

  endShape();

  beginShape();

  vertex(379, 637);

  bezierVertex(451, 621, 462, 597, 470, 537);

  vertex(469, 539);

  bezierVertex(436, 597, 412, 611, 382, 636);

  endShape();

  beginShape();

  vertex(90, 449);

  bezierVertex(58, 446, 36, 443, -23, 435);

  vertex(-28, 441);

  bezierVertex(36, 457, 56, 464, 89, 468);

  endShape();

  beginShape();

  vertex(323, 263);

  bezierVertex(342, 234, 349, 210, 367, 183);

  vertex(367, 183);

  bezierVertex(361, 202, 350, 243, 335, 270);

  endShape();

  fill(0);

  stroke(0);

  beginShape();

  vertex(331, 62);

  bezierVertex(347, 34, 348, 21, 377, 2);

  vertex(377, 2);

  bezierVertex(386, 33, 385, 66, 379, 114);

  vertex(379, 111);

  bezierVertex(364, 87, 364, 85, 334, 59);

  endShape();

  line(518, 486, 542, 500);

  line(91, 467, 89, 450);

  line(101, 395, 95, 414);

  line(266, 255, 278, 255);

  line(315, 264, 335, 270);

  line(356, 732, 375, 709);

  line(465, 766, 466, 802);

  noFill();

  bezier(538, 703, 518, 711, 510, 713, 490, 730);

  bezier(539, 814, 468, 770, 427, 736, 444, 730);

  bezier(471, 750, 425, 718, 432, 707, 480, 741);

  bezier(448, 722, 476, 714, 511, 744, 543, 765);

  fill(Face);

  beginShape();

  vertex(203, 621);

  bezierVertex(217, 547, 310, 628, 242, 654);

  vertex(242, 656);

  bezierVertex(218, 646, 212, 633, 205, 624);

  endShape();

  beginShape();

  vertex(440, 383);

  bezierVertex(409, 402, 433, 458, 471, 443);

  vertex(471, 443);

  bezierVertex(502, 423, 478, 369, 440, 383);

  endShape();

  fill(0);

  ellipse(207, 526, 65, 65);

  ellipse(356, 382, 65, 65);

  fill(White);

  stroke(White);

  ellipse(204, 509, 23, 23);

  ellipse(341, 377, 23, 23);

  fill(ToughShadow);

  stroke(0);

  beginShape();

  vertex(288, 546);

  bezierVertex(315, 528, 301, 518, 320, 486);

  vertex(320, 486);

  bezierVertex(332, 478, 369, 474, 378, 455);

  vertex(379, 456);

  bezierVertex(408, 487, 433, 543, 408, 574);

  vertex(408, 574);

  bezierVertex(374, 605, 319, 570, 289, 548);

  endShape();

  fill(Tough);

  noStroke();

  beginShape();

  vertex(407, 573);

  bezierVertex(379, 600, 344, 578, 313, 561);

  vertex(313, 561);

  bezierVertex(336, 511, 372, 496, 402, 494);

  vertex(402, 494);

  bezierVertex(417, 522, 425, 545, 407, 573);

  endShape();

  fill(Mouth);

  stroke(0);

  triangle(370, 468, 395, 476, 379, 457);

  line(380, 455, 383, 439);

  line(289, 547, 272, 553);

  fill(0);

  triangle(304, 467, 297, 475, 304, 475 );

  noStroke();

  fill(Tail);

  triangle(391, 817, 390, 833, 406, 828);

  triangle(398, 809, 395, 838, 412, 826);

  triangle(407, 802, 403, 828, 418, 818);

  triangle(412, 822, 416, 805, 422, 811);

  triangle(422, 811, 423, 821, 412, 819);

  stroke(0);

  line(423, 810, 423, 822);

  fill(Skin);

  triangle(154, 806, 180, 811, 178, 780);

  triangle(149, 783, 169, 799, 173, 770);

  triangle(157, 761, 165, 788, 186, 762);

  noStroke();

  bezier(208, 762, 157, 739, 148, 820, 188, 816);

  fill(Skin);

  stroke(0);

  triangle(440, 220, 438, 247, 470, 240);

  triangle(422, 236, 426, 256, 449, 236);

  triangle(411, 247, 436, 249, 421, 273);

  triangle(401, 261, 420, 280, 430, 259);

  noStroke();

  bezier(470, 266, 478, 194, 378, 262, 431, 297);

  bezier(475, 266, 491, 201, 413, 250, 455, 295);

  stroke(0);

  noFill();

  bezier(67, 66, 48, 114, 49, 191, 69, 164);

  bezier(157, 66, 138, 114, 139, 191, 159, 164);

  line(120, 98, 174, 95);

}

4.代码心得：

本以为这是一个简单的任务，知识很花时间而已没有技术含量，没想到实际动手之后发现需要考虑的细节有很多，不然自己的工作量就会很大。这也是我以后需要注意的地方。

最后是交互或动态，我选择让皮卡丘的眼睛动起来。

代码如下：