互动媒体技术课程作业2 码绘自画像

基本要求

用编程方式创作一幅介绍自己的作品

作品结果

因为跟啾一的气质和发型身高都很像（我在做梦） 所以 我画我爱豆 约== 我的自画像

写真照 ❥果汁美貌朴秀荣❥ 丑丑的码绘 （辣鸡技术不能展现全部美貌） 一开始是加了五官的，后来觉得加了五官气质都没了就没加，就当比较抽象。

心得和体会

画自画像其实不难，没有用到什么逻辑上要自己编程的部分，就是调用函数画出图形，填色，需要描边增加描边等，只需要掌握一些基本函数就可以啦。

1. 自定义多边形顶点画出图形 beginShape() 开始 ，vertex(x,y) 定义顶点 ，endShape() 结束

//牛仔裙 fill(109, 155, 175); beginShape(); //开始 vertex(210, 370); //定义顶点 vertex(180, 460); vertex(162, 550); vertex(151, 601); vertex(142, 640); vertex(408, 640); vertex(370, 540); vertex(350, 500); vertex(345, 390); endShape(CLOSE); //结束

2. 画圆 这个都比较熟悉了只举一个例子 ellipse(x,y,a,b)

ellipse(271,360,7,7);

3.为图形添加描边 strokeWeight(a)，描边的粗细 stroke(80)， 描边的颜色

//脸 strokeWeight(3); //描边的粗细 stroke(80); //描边的颜色 fill(249,238,229); rect(257,61,66,56); // 矩形（x,y,长，宽） arc(290,102,70,68,QUARTER_PI/2,PI*7/8) //弧（x,y,a,b,起始角度，终止角度）

其实画完发现画的前后顺序还是挺重要的，比如波点一定要画在红底衬衣画完之后，要不被后来的图像覆盖就看不到了

整个过程虽然代码长，但是都是重复的函数调用语句，画完觉得还是挺有意思的

完整代码如下

function setup() { // put setup code here createCanvas(540, 640); } function draw() { background(242, 236, 236); strokeWeight(0); //牛仔裙 fill(109, 155, 175); beginShape(); vertex(210, 370); vertex(180, 460); vertex(162, 550); vertex(151, 601); vertex(142, 640); vertex(408, 640); vertex(370, 540); vertex(350, 500); vertex(345, 390); endShape(CLOSE) //红色波点内衬 fill(226, 54, 39); //上半身 beginShape(); vertex(261, 160); vertex(211, 358); vertex(205, 372); vertex(220, 369); vertex(272, 390); vertex(262, 391); vertex(271, 389); vertex(358, 385); vertex(345, 170); vertex(300, 241); vertex(297, 253); vertex(282, 219); endShape(CLOSE); //带子左 beginShape(); vertex(271, 389); vertex(269, 490); vertex(260, 640); vertex(302, 640); vertex(303, 387); endShape(CLOSE); //带子右 beginShape(); vertex(330, 385); vertex(320, 490); vertex(309, 640); vertex(335, 640); vertex(350, 385); endShape(CLOSE); //白色波点装饰（除袖子 fill(255,228,220); ellipse(271,360,7,7); ellipse(300,320,7,7); ellipse(321,310,7,7); ellipse(311,337,7,7); ellipse(290,260,7,7); ellipse(287,246,7,7); ellipse(271,360,7,7); ellipse(310,246,7,7); ellipse(320,270,7,7); ellipse(265,340,7,7); ellipse(290,350,7,7); ellipse(245,315,7,7); ellipse(225,350,7,7); ellipse(235,360,7,7); ellipse(250,291,7,7); ellipse(320,352,7,7); ellipse(320,290,7,7); ellipse(325,230,7,7); ellipse(280,315,7,7); ellipse(300,290,7,7); ellipse(274,385,7,7); ellipse(294,392,7,7); ellipse(274,410,7,7); ellipse(292,430,7,7); ellipse(294,450,7,7); ellipse(275,450,7,7); ellipse(291,480,7,7); ellipse(275,480,7,7); ellipse(291,510,7,7); ellipse(275,510,7,7); ellipse(291,540,7,7); ellipse(275,540,7,7); ellipse(291,570,7,7); ellipse(275,580,7,7); ellipse(291,610,7,7); ellipse(275,620,7,7); ellipse(291,640,7,7); ellipse(330,385,7,7); ellipse(334,405,7,7); ellipse(336,431,7,7); ellipse(332,460,7,7); ellipse(338,483,7,7); ellipse(332,486,7,7); ellipse(338,503,7,7); ellipse(332,506,7,7); ellipse(338,530,7,7); ellipse(332,570,7,7); ellipse(336,600,7,7); ellipse(332,620,7,7); ellipse(330,640,7,7); //外套左 fill(20,30,32); beginShape(); vertex(261, 160); vertex(210, 180); vertex(151, 209); vertex(158, 312); vertex(155, 328); vertex(160, 370); vertex(162, 371); vertex(169, 375); vertex(178, 379); vertex(155, 420); vertex(115, 530); vertex(125, 542); vertex(138, 555); vertex(168, 551); vertex(161, 535); vertex(182, 460); vertex(189, 450); vertex(202, 397); vertex(212, 365); vertex(211, 357); vertex(219, 352); endShape(CLOSE); //红袖子 fill(226, 54, 39); beginShape(); vertex(168, 312); vertex(165, 328); vertex(175, 360); vertex(185,363); vertex(200, 350); vertex(205,312); vertex(185,320); endShape(CLOSE); //白色波点（袖子） fill(255,228,220); ellipse(172,320,7,7); ellipse(180,340,7,7); ellipse(177,355,7,7); ellipse(195,320,7,7); ellipse(197,340,7,7); //外套右 fill(20,30,32); beginShape(); vertex(320, 140); vertex(348, 155); vertex(380, 160); vertex(430, 188); vertex(440, 342); vertex(431, 352); vertex(398, 411); vertex(381, 422); vertex(370, 505); vertex(390, 581); vertex(350, 579); endShape(CLOSE); //脸 strokeWeight(3); stroke(80); fill(249,238,229); rect(257,61,66,56); arc(290,102,70,68,QUARTER_PI/2,PI*7/8) //胳膊 eginShape(); vertex(162, 240); vertex(168, 312); vertex(185,320); vertex(205,312); vertex(190, 240); vertex(180,245); endShape(CLOSE); //手 ellipse(175,232,35,29); ellipse(168,230,30,29) //葡萄 fill(45,80,89); ellipse(151,200,15,14); ellipse(157,198,15,14); ellipse(163,190,15,14); ellipse(170,195,15,14); ellipse(180,200,15,14); ellipse(187,202,15,14); ellipse(194,201,15,14); ellipse(205,200,15,14); ellipse(210,210,17,16); ellipse(208,220,15,14); ellipse(202,226,15,14); ellipse(145,200,15,14); ellipse(143,195,15,14); ellipse(146,190,15,14); ellipse(150,210,15,14); ellipse(157,210,15,14); ellipse(150,210,15,14); ellipse(157,210,15,14); ellipse(164,210,15,14); ellipse(171,210,15,14); ellipse(178,210,15,14); ellipse(185,210,15,14); ellipse(194,210,15,14); ellipse(143,220,15,14); ellipse(150,225,15,14); ellipse(143,220,15,14); ellipse(143,220,15,14); strokeWeight(0); //头发 fill(0); arc(290,78,80,72,PI,0); fill(249,238,229); beginShape(); vertex(282,56); vertex(268,79); vertex(273,79); endShape(CLOSE); beginShape(); vertex(290,48); vertex(293,79); vertex(297,79); endShape(CLOSE); fill(0); beginShape(); vertex(254, 62) vertex(220, 210); vertex(230, 265); vertex(245, 300); vertex(250, 320); vertex(260, 325); vertex(270, 280); vertex(281, 300); vertex(286, 298); vertex(286, 250); endShape(CLOSE); beginShape(); vertex(325, 60); vertex(340, 104); vertex(330, 140); vertex(320, 140); endShape(CLOSE); }

参考文档 p5.js说明文档 https://blog.csdn.net/qq_27534999/article/details/75151515 https://blog.csdn.net/magicbrushlv/article/details/77917540