创意自画像
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.代码心得:
本以为这是一个简单的任务,知识很花时间而已没有技术含量,没想到实际动手之后发现需要考虑的细节有很多,不然自己的工作量就会很大。这也是我以后需要注意的地方。
最后是交互或动态,我选择让皮卡丘的眼睛动起来。
代码如下: