{"id":71348,"date":"2022-09-10T23:14:08","date_gmt":"2022-09-11T03:14:08","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/?p=71348"},"modified":"2022-09-10T23:14:08","modified_gmt":"2022-09-11T03:14:08","slug":"project-02-7","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/09\/10\/project-02-7\/","title":{"rendered":"Project 02"},"content":{"rendered":"<!DOCTYPE html PUBLIC \"-\/\/W3C\/\/DTD HTML 4.0 Transitional\/\/EN\" \"http:\/\/www.w3.org\/TR\/REC-html40\/loose.dtd\">\n<html><body><p>For our second project of the semester, I chose to edit the self-portrait from the first project, changing parts of the figure like the height of the face, shape of the mouth and eyebrows, and even added the ability to switch through some accessories. The self-portrait, after this process, feels much more lively due to the use of the mousePressed function.<\/p>\n\n\n\n<div class=\"wp-block-file\"><a id=\"wp-block-file--media-71b147b6-ab17-4cde-9563-e8fae53707ee\" class=\"p5_sketch_link\" data-width=\"480\" data-height=\"600\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/09\/sketch-204.js\">fom Project 02<\/a><a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/09\/sketch-204.js\" class=\"wp-block-file__button\" download aria-describedby=\"wp-block-file--media-71b147b6-ab17-4cde-9563-e8fae53707ee\">Download<\/a><iframe src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/plugins\/p5-embedder\/p5_iframe.html\" class=\"p5_exampleFrame\" width=\"480\" height=\"600\"><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/ Francesca Menendez, fom, Section C\n\nvar mouth = 1;\nvar faceHeight = 365;\nvar eyebrows = 1;\nvar accessory = 1;\n\nfunction setup() {\n    createCanvas(480, 640);\n    background(252, 181, 104); \/\/ background orange\n}\n\nfunction draw() {\n\t\/\/ background ornament\n\tstrokeWeight(3);\n\tstroke(255);\n\tfill(116, 203, 200); \/\/teal stripe\n\trect(220, 0, 45, 500);\n\tstrokeWeight(3);\n\tstroke(255);\n\tfill(79, 141, 241); \/\/ blue stripe\n\trect(127, 0, 45, 500);\n\tstrokeWeight(3);\n\tstroke(255);\n\tfill(255, 190, 214); \/\/ pink stripe\n\trect(32, 0, 45, 700);\n\tstrokeWeight(3);\n\tstroke(255);\n\tfill(192, 226, 148); \/\/ green stripe\n\trect(315, 0, 45, 500);\n\tstrokeWeight(3);\n\tstroke(255);\n\tfill(255, 246, 140); \/\/ yellow stripe\n\trect(410, 0, 45, 700);\n\n\t\/\/ hair\n\tnoStroke();\n\tfill(40, 24, 15); \/\/ hair color\n\tellipse(240, 280, 380, 420); \/\/ furthest back ellipse\n\tnoStroke();\n\tfill(40, 24, 15);\n\trect(51, 295, 378, 400); \/\/ extension rectangle\n\tnoStroke();\n\tfill(40, 24, 15);\n\ttriangle(0, 640, 90, 640, 90, 540); \/\/ left triangle\n\tnoStroke();\n\tfill(40, 24, 15);\n\ttriangle(480, 640, 390, 640, 390, 540); \/\/ right triangle\n\n\t\/\/ ears\n\tstrokeWeight(5);\n\tstroke(247, 150, 107);\n\tfill(244, 218, 188);\n\tellipse(90, 340, 60, 80); \/\/ left ear\n\tstrokeWeight(5);\n\tstroke(247, 150, 107);\n\tfill(244, 218, 188);\n\tellipse(390, 340, 60, 80); \/\/ right ear\n\n\t\/\/ neck\n\tstrokeWeight(5);\n\tstroke(247, 150, 107); \/\/ shadow color edge\n\tfill(244, 218, 188); \/\/ shadow color\n\trect(180, 365, 125, 300);\n\n\t\/\/ body and shirt\n\tstrokeWeight(5);\n\tstroke(247, 150, 107);\n\tfill(244, 218, 188);\n\ttriangle(70, 650, 200, 650, 200, 550);\n\n\tstrokeWeight(5);\n\tstroke(247, 150, 107);\n\tfill(244, 218, 188);\n\ttriangle(410, 650, 280, 650, 280, 550);\n\n\tnoStroke();\n\tfill(244, 218, 188);\n\trect(183, 500, 119, 200);\n\n\tstrokeWeight(7)\n\tstroke(0);\n\tline(150, 585, 150, 690); \/\/ left top strap\n\n\tstrokeWeight(7)\n\tstroke(0);\n\tline(335, 585, 335, 690); \/\/ right top strap\n\n\n\t\/\/ face (between 310 and 375)\n\tstrokeWeight(5);\n\tstroke(247, 150, 107); \/\/ skin color edge\n\tfill(255, 237, 213); \/\/ skin color\n\tellipse(240, 320, 300, faceHeight); \/\/EDIT OUT ellipse: (center x,y), width, height\n\n\t\/\/ eyes\n\tstrokeWeight(3);\n\tstroke(0, 34, 68); \/\/ eye color edge\n\tfill(238, 239, 248); \/\/ eye color\n\tellipse(170, 280, 75, 55); \/\/ left eye\n\tstrokeWeight(3);\n\tstroke(0, 34, 68);\n\tfill(238, 239, 248); \n\tellipse(310, 280, 75, 55); \/\/ right eye\n\n\tstrokeWeight(3);\n\tstroke(0, 34, 68);\n\tfill(91, 32, 1); \/\/ iris color\n\tcircle(170, 275, 45); \/\/ left\n\tstrokeWeight(3);\n\tstroke(0, 34, 68);\n\tfill(91, 32, 1);\n\tcircle(310, 275, 45); \/\/ right\n\n\tnoStroke();\n\tfill(0); \/\/ pupil color\n\tcircle(170, 275, 15); \/\/ left\n\tnoStroke();\n\tfill(0);\n\tcircle(310, 275, 15); \/\/ right\n\n\tstrokeWeight(10);\n\tstroke(255); \/\/ reflection color\n\tpoint(175, 270);\n\tstrokeWeight(10);\n\tstroke(255);\n\tpoint(315, 270);\n\n\tstrokeWeight(7);\n\tstroke(0, 34, 68); \/\/ eyelash color\n\tline(170, 255, 170, 230);\n\tstrokeWeight(7);\n\tstroke(0, 34, 68);\n\tline(310, 255, 310, 230);\n\tstrokeWeight(7);\n\tstroke(0, 34, 68);\n\tline(155, 257, 155, 232);\n\tstrokeWeight(7);\n\tstroke(0, 34, 68);\n\tline(325, 257, 325, 232);\n\tstrokeWeight(7);\n\tstroke(0, 34, 68);\n\tline(185, 257, 185, 232);\n\tstrokeWeight(7);\n\tstroke(0, 34, 68);\n\tline(295, 257, 295, 232);\n\n\t\/\/ glasses\n\tstrokeWeight(6);\n\tstroke(82, 76, 69); \/\/ glasses color\n\tnoFill();\n\tellipse(165, 285, 123, 100);\n\tstrokeWeight(6);\n\tstroke(82, 76, 69);\n\tnoFill();\n\tellipse(315, 285, 123, 100);\n\tstrokeWeight(6);\n\tstroke(82, 76, 69);\n\tline(230, 285, 254, 285);\n\n\t\/\/ bangs\n\tnoStroke();\n\tfill(40, 24, 15); \/\/ bang color\n\tsquare(200, 110, 100, 15); \/\/ center\n\n\tnoStroke();\n\tfill(40, 24, 15);\n\tsquare(125, 130, 80, 15); \/\/ left\n\n\tnoStroke();\n\tfill(40, 24, 15);\n\tsquare(275, 130, 80, 15); \/\/ right\n\n\tnoStroke();\n\tfill(40, 24, 15);\n\trect(155, 105, 190, 60);\n\n\t\/\/ normal brow\n\tif (eyebrows == 1) {\n\t\tnoStroke();\n\t\tfill(0); \/\/ eyebrow color\n\t\ttriangle(200, 230, 200, 200, 110, 230);\n\t\tnoStroke();\n\t\tfill(0);\n\t\ttriangle(280, 230, 280, 200, 365, 230);\n\n\t\/\/ angry brow\n\t} else if (eyebrows == 2) {\n\t\tnoStroke();\n\t\tfill(0);\n\t\tcircle(210, 215, 20); \/\/ left angled brow\n\t\tnoStroke();\n\t\tfill(0);\n\t\ttriangle(204, 223, 150, 195, 221, 209);\n\t\tnoStroke();\n\t\tfill(0);\n\t\tcircle(270, 215, 20); \/\/ right angled brow\n\t\tnoStroke();\n\t\tfill(0);\n\t\ttriangle(276, 223, 330, 195, 259, 209);\n\n\t\/\/ suspicious brow\n\t} else if (eyebrows == 3) {\n\t\tnoStroke();\n\t\tfill(0);\n\t\tcircle(210, 215, 20); \/\/ left curved brow\n\t\tnoStroke();\n\t\tfill(0);\n\t\ttriangle(204, 223, 170, 190, 221, 209);\n\t\tnoStroke();\n\t\tfill(0);\n\t\ttriangle(170, 190, 130, 210, 190, 200);\n\t\tnoStroke();\n\t\tfill(0);\n\t\tcircle(270, 215, 20); \/\/ right angled brow\n\t\tnoStroke();\n\t\tfill(0);\n\t\ttriangle(276, 223, 330, 195, 259, 209);\n\n\t}\n\n\t\/\/nose\n\tstrokeWeight(4);\n\tstroke(247, 150, 107);\n\tfill(244, 218, 188);\n\tcircle(220, 355, 24);\n\tstrokeWeight(4);\n\tstroke(247, 150, 107);\n\tfill(244, 218, 188);\n\tcircle(260, 355, 24);\n\n\tstrokeWeight(5);\n\tstroke(247, 150, 107);\n\tfill(255, 237, 213);\n\tcircle(240, 355, 27);\n\n\tnoStroke();\n\tfill(255, 237, 213);\n\tellipse(240, 345, 30, 40);\n\n\t\/\/ happy mouth\n\tif (mouth == 1) {\n\t\tstrokeWeight(8);\n\t\tstroke(229, 162, 153); \/\/ lip color\n\t\tfill(255); \/\/ teeth color\n\t\tarc(240, 395, 155, 100, 0, HALF_PI)\n\t\tstrokeWeight(8);\n\t\tstroke(229, 162, 153);\n\t\tfill(255);\n\t\tarc(240, 395, 155, 100, HALF_PI, PI);\n\t\tstrokeWeight(8);\n\t\tstroke(229, 162, 153);\n\t\tline(165, 395, 319, 395);\n\n\t\/\/ surprised mouth\n\t} else if (mouth == 2) {\n\t\tstrokeWeight(8);\n\t\tstroke(229, 162, 153); \/\/ lip color\n\t\tfill(255); \/\/ teeth color\n\t\tarc (240, 430, 125, 90, 0, 0, 0);\n\n\t\/\/ nervous mouth\n\t} else if (mouth == 3) {\n\t\tstrokeWeight(8);\n\t\tstroke(229, 162, 153); \/\/ lip color\n\t\tfill(255);\n\t\trect(167, 400, 150, 45, 10);\n\n\t}\n\n\t\/\/ earrings\n\tstrokeWeight(3);\n\tstroke(224, 135, 73); \/\/ earrings edge color\n\tfill(232, 190, 64); \/\/ earrings color\n\trect(70, 350, 25, 60, 20); \/\/ left earring\n\tstrokeWeight(3);\n\tstroke(224, 135, 73);\n\tfill(232, 190, 64);\n\trect(385, 350, 25, 60, 20); \/\/ right earring\n\n\tstrokeWeight(4);\n\tstroke(255); \/\/ earrings reflection color\n\tfill(255);\n\trect(77, 360, 2, 32, 10); \/\/ left\n\tstrokeWeight(4);\n\tstroke(255);\n\tfill(255);\n\trect(392, 360, 2, 32, 10); \/\/ right\n\n\t\/\/ accessories\n\t\/\/ collar\n\tif (accessory == 1) {\n\t\tnoStroke();\n\t\tfill(0); \/\/ collar color\n\t\trect(170, 520, 145, 50);\n\n\t\/\/ bow\n\t} else if (accessory == 2) {\n\t\tstrokeWeight(4);\n\t\tstroke(10, 44, 84); \/\/ bow stroke color\n\t\tfill(30, 45, 110); \/\/ bow color\n\t\ttriangle(295, 160, 245, 110, 230, 150);\n\t\tstrokeWeight(4);\n\t\tstroke(16, 44, 84); \/\/ bow stroke color\n\t\tfill(30, 45, 110); \/\/ bow color\n\t\ttriangle(295, 160, 373, 200, 320, 220);\n\t\tstrokeWeight(4);\n\t\tstroke(16, 44, 84); \/\/ bow stroke color\n\t\tfill(30, 45, 110); \/\/ bow color\n\t\tcircle (295, 160, 35);\n\n\t\/\/ pearl earring addition\n\t} else if (accessory == 3) {\n\t\tstrokeWeight(3);\n\t\tstroke(202, 196, 176);\n\t\tfill(255);\n\t\tcircle(83, 410, 30); \/\/ left pearl\n\t\tstrokeWeight(3);\n\t\tstroke(202, 196, 176);\n\t\tfill(255);\n\t\tcircle(397, 410, 30); \/\/ right pearl\n\n\t}\n}\n\nfunction mousePressed() {\n\tfaceHeight = random (310, 375);\n\tmouth = round(random (1, 3));\n\teyebrows = round(random (1, 3));\n\taccessory = round(random (1, 3));\n}\n<\/code><\/pre><\/div><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>For our second project of the semester, I chose to edit the self-portrait from the first project, changing parts of the figure like the height of the face, shape of the mouth and eyebrows, and even added the ability to switch through some accessories. The self-portrait, after this process, feels much more lively due to &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/09\/10\/project-02-7\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project 02&#8221;<\/span><\/a><\/p>\n","protected":false},"author":744,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[97,57],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/71348"}],"collection":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/users\/744"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=71348"}],"version-history":[{"count":1,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/71348\/revisions"}],"predecessor-version":[{"id":71384,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/71348\/revisions\/71384"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=71348"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=71348"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=71348"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}