{"id":70217,"date":"2022-09-06T22:39:40","date_gmt":"2022-09-07T02:39:40","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/?p=70217"},"modified":"2022-09-06T22:39:40","modified_gmt":"2022-09-07T02:39:40","slug":"project-01","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/09\/06\/project-01\/","title":{"rendered":"Project 01"},"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>This is my self portrait<\/p>\n<div><a class=\"p5_sketch_link\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/09\/sketch-56.js\" data-width=\"800\" data-height=\"750\">sketch<\/a><iframe src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/plugins\/p5-embedder\/p5_iframe.html\" class=\"p5_exampleFrame\" width=\"800\" height=\"750\"><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/Michael Li\n\/\/Section C\nfunction setup() {\n    createCanvas(800, 750);\n    background(220);\n    text(\"p5.js vers 0.9.0 test.\", 10, 15);\n}\n\nfunction draw() {\n    \/\/Background If Condition\n    var buildingcolor = 150;\/\/default buildin color light grey\n    var windowcolor = 70;\/\/default window color dark grey\n    if (mouseY &lt; height * 0.33) {\n        background(189, 184, 220);\/\/purple\n        fill(25, 53, 79);\n        noStroke()\n        rect (0, height*0.66, width, height\/3); \/\/uses default building and window color\n\n\n    } else if (mouseY &gt; height * 0.66) {\n        background (60, 73, 120) \/\/dark blue\n        fill(25, 53, 79);\n        noStroke()\n        rect (0, height*0.66, width, height\/3);\n        buildingcolor = 20 \/\/changes building color to dark grey\n        windowcolor = 255 \/\/change window color to white\n\n    } else {\n        background (58, 126, 146); \/\/Light blue\n        fill(25, 53, 79); \n        noStroke()\n        rect (0, height*0.66, width, height\/3);\n        buildingcolor = 120 \/\/changes building color to grey\n        windowcolor = 150 \/\/changes window color to light grey\n    \/\/depends  on mouse position on canvas, change background from early morning, mid day to night\n    }\n\n    \/\/ Building 1 in Background (right building)\n\n        fill(buildingcolor)\n        noStroke()\n        rect(520, height*0.33, 130, height\/3);\n        fill(windowcolor)\n\n        \/\/windows\n        var row1 = 530\n        var row2 = 570\n        var row3 = 610\n        \n        rect(row1, (height*0.33)+10, 30, 20)\n        rect(row1, (height*0.33)+50, 30, 20)\n        rect(row1, (height*0.33)+90, 30, 20)\n        rect(row1, (height*0.33)+130, 30, 20)\n        rect(row1, (height*0.33)+170, 30, 20)\n\n        rect(row2, (height*0.33)+10, 30, 20)\n        rect(row2, (height*0.33)+50, 30, 20)\n        rect(row2, (height*0.33)+90, 30, 20)\n        rect(row2, (height*0.33)+130, 30, 20)\n        rect(row2, (height*0.33)+170, 30, 20)\n\n        rect(row3, (height*0.33)+10, 30, 20)\n        rect(row3, (height*0.33)+50, 30, 20)\n        rect(row3, (height*0.33)+90, 30, 20)\n        rect(row3, (height*0.33)+130, 30, 20)\n        rect(row3, (height*0.33)+170, 30, 20)\n\n    \/\/ Building 2 in Background (left taller building)\n\n        fill(buildingcolor)\n        noStroke()\n        rect(170, height*0.05, 170, height\/1.64);\n        fill(windowcolor)\n\n        \/\/windows\n        row1 = 180 \/\/changes window row variable since second building\n        row2 = 220\n        row3 = 260\n        var row4 = 300\n\n        rect(row1, (height*0.33)-190, 30, 20)\n        rect(row1, (height*0.33)-150, 30, 20)\n        rect(row1, (height*0.33)-110, 30, 20)\n        rect(row1, (height*0.33)-70, 30, 20)\n        rect(row1, (height*0.33)-30, 30, 20)\n        rect(row1, (height*0.33)+10, 30, 20)\n        rect(row1, (height*0.33)+50, 30, 20)\n        rect(row1, (height*0.33)+90, 30, 20)\n        rect(row1, (height*0.33)+130, 30, 20)\n        \n        rect(row2, (height*0.33)-190, 30, 20)\n        rect(row2, (height*0.33)-150, 30, 20)\n        rect(row2, (height*0.33)-110, 30, 20)\n        rect(row2, (height*0.33)-70, 30, 20)\n        rect(row2, (height*0.33)-30, 30, 20)\n        rect(row2, (height*0.33)+10, 30, 20)\n        rect(row2, (height*0.33)+50, 30, 20)\n        rect(row2, (height*0.33)+90, 30, 20)\n        rect(row2, (height*0.33)+130, 30, 20)\n        \n        rect(row3, (height*0.33)-190, 30, 20)\n        rect(row3, (height*0.33)-150, 30, 20)\n        rect(row3, (height*0.33)-110, 30, 20)\n        rect(row3, (height*0.33)-70, 30, 20)\n        rect(row3, (height*0.33)-30, 30, 20)\n        rect(row3, (height*0.33)+10, 30, 20)\n        rect(row3, (height*0.33)+50, 30, 20)\n        rect(row3, (height*0.33)+90, 30, 20)\n        rect(row3, (height*0.33)+130, 30, 20)\n\n        rect(row4, (height*0.33)-190, 30, 20)\n        rect(row4, (height*0.33)-150, 30, 20)\n        rect(row4, (height*0.33)-110, 30, 20)\n        rect(row4, (height*0.33)-70, 30, 20)\n        rect(row4, (height*0.33)-30, 30, 20)\n        rect(row4, (height*0.33)+10, 30, 20)\n        rect(row4, (height*0.33)+50, 30, 20)\n        rect(row4, (height*0.33)+90, 30, 20)\n        rect(row4, (height*0.33)+130, 30, 20)\n\n    strokeWeight(0) \/\/No stroke for the main portrait\n\n    \/\/neck\n    fill(204, 172, 125);\n    rect(335, 300, 130, 140)\n\n    \/\/head part 1 circle\n    fill(235, 209, 168); \/\/skin color\n    ellipse(387, 200, 260, 236); \n    stroke(235, 209, 168)\n\n    \/\/head part 2 chin\n    bezier(257, 200, 244, 453, 411, 398, 487, 269);\n    \n    \/\/Eyes whites\n    fill(255);\n    ellipse(286, 218, 36, 42)\/\/left eye\n    fill(255);\n    ellipse(373, 218, 36, 42)\/\/right eye\n\n    \/\/eyes pupils\n    fill(70, 50, 21)\n    ellipse(294, 218, 20, 32);\n    fill(70, 50, 21)\n    ellipse(383, 218, 20, 32);\n    \n    \/\/Eyes Highlights\n    fill(255)\n    ellipse(297, 209, 3, 7);\n    fill(255)\n    ellipse(387, 209, 3, 7);\n\n    \/\/nose\n    fill(204, 172, 125)\n    beginShape()\n        vertex(327, 225);\n        vertex(327, 286);\n        vertex(306, 284);\n        vertex(303, 276);\n    endShape(CLOSE);\n\n\n    \/\/Hair\n    fill(50)\n    beginShape();\n        vertex(238, 218); \/\/bottom left\n        vertex(238, 163);\n        vertex(233, 140);\n        vertex(288, 68);\n        vertex(349, 52);\n        vertex(400, 47);\n        vertex(469, 77);\n        vertex(515, 110);\n        vertex(537, 164);\n        vertex(524, 221);\n        vertex(521, 258);\n        vertex(493, 296);\n        vertex(498, 211);\n        vertex(480, 205);\n        vertex(473, 231);\n        vertex(462, 247);\n        vertex(462, 219);\n        vertex(455, 207);\n        vertex(441, 200);\n        vertex(421, 164);\n        vertex(394, 172);\n        vertex(356, 162);\n        vertex(319, 200);\n        vertex(298, 160);\n        vertex(291, 166);\n        vertex(280, 164);\n    endShape(CLOSE);\n\n    \/\/Ears\n    fill(204, 172, 125);\n    bezier(478, 212, 515, 211, 515, 259, 464, 279);\n    fill(235, 209, 168);\n    bezier(478, 218, 497, 211, 497, 259, 464, 267);\n\n    \/\/mouth\n    fill (0);\n    bezier(314, 324, 327, 333, 373, 330, 381, 315);\n    fill(255);\n    beginShape();\n        vertex(319, 323);\n        vertex(319, 325);\n        vertex(377, 318);\n        vertex(377, 315.5);\n        \n    endShape(CLOSE);\n\n    \/\/Arms\n\n    fill(235, 209, 168);\n    beginShape();\n        vertex(216, 659);\n        vertex(207, height)\n        vertex(125, height);\n        vertex(154, 650);\n    endShape(CLOSE);\n\n    beginShape();\n        vertex(623, 667);\n        vertex(643, height);\n        vertex(728, height);\n        vertex(695, 655);\n    endShape(CLOSE);\n\n\n\n    \/\/Shirt\n\n    fill(230);\n    beginShape();\n        vertex(207, height);\n        vertex(235, 463);\n        vertex(318, 411);\n        vertex(358, 438);\n        vertex(471, 399);\n        vertex(567, 455);\n        vertex(615, height);\n    endShape(CLOSE);\n\n    \/\/Sleeves\n\n    fill(180);\n    beginShape();\n        vertex(235, 463);\n        vertex(147, 520);\n        vertex(110, 641);\n        vertex(216, 659);\n    endShape(CLOSE);\n\n    beginShape();\n        vertex(567, 455);\n        vertex(674, 515);\n        vertex(703, 656);\n        vertex(588, 676);\n    endShape(CLOSE);\n\n    \/\/Eye brows\n    fill(0);\n    bezier(270, 195, 273, 182, 303, 182, 308, 208);\n    bezier(357, 199, 362, 184, 391, 184, 401, 203);\n\n    \/\/Glasses\n    noFill();\n    stroke(154, 136, 49);\n    strokeWeight(6);\n    ellipse(276, 225, 77, 59); \/\/frame left\n    ellipse(392, 225, 92, 59); \/\/frame right\n\n    beginShape(); \/\/Glasses connecting the Framse\n        vertex (317, 220);\n        vertex(330, 218);\n        vertex (342, 220);\n    endShape();\n\n    stroke(49, 42, 19); \/\/Glasses legs\n    line(436, 218, 480, 210);\n\n}\n\n<\/code><\/pre><\/div><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>This is my self portrait sketch \/\/Michael Li \/\/Section C function setup() { createCanvas(800, 750); background(220); text(&#8220;p5.js vers 0.9.0 test.&#8221;, 10, 15); } function draw() { \/\/Background If Condition var buildingcolor = 150;\/\/default buildin color light grey var windowcolor = 70;\/\/default window color dark grey if (mouseY &lt; height * 0.33) { background(189, 184, 220);\/\/purple &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/09\/06\/project-01\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project 01&#8221;<\/span><\/a><\/p>\n","protected":false},"author":739,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[10,57],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/70217"}],"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\/739"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=70217"}],"version-history":[{"count":5,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/70217\/revisions"}],"predecessor-version":[{"id":70222,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/70217\/revisions\/70222"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=70217"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=70217"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=70217"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}