{"id":65181,"date":"2021-09-07T21:22:10","date_gmt":"2021-09-08T01:22:10","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=65181"},"modified":"2021-09-07T21:23:00","modified_gmt":"2021-09-08T01:23:00","slug":"project-1-my-self-portrait-29","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/09\/07\/project-1-my-self-portrait-29\/","title":{"rendered":"Project 1: My Self-Portrait"},"content":{"rendered":"\n

luca-portrait<\/a><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">function setup() {\n createCanvas(1000, 1000);\n background(180);\n}\n\nfunction draw() {\n background(171,130,130)\n text(\"Luca's portrait\",15,20)\n\n \/\/hoodie\n fill(61,64,91)\n ellipse(500,700,500,200)\n fill(229,229,229)\n ellipse(500,700,450,200)\n\n\n \/\/body\n fill(244,241,222)\n rect(450,765,100,245)\/\/shirt\n fill(61,64,91)\n rect(280,765,200,245)\/\/bodyr\n fill(61,64,91)\n rect(550,765,200,245)\/\/bodyl\n fill(61,64,91)\n ellipse(270,840,150,150)\/\/shoulderr\n fill(61,64,91)\n ellipse(738,840,150,150)\/\/shoulderl\n fill(61,64,91)\n rect(210,850,120,200)\/\/armr\n fill(61,64,91)\n rect(730,780,190,120)\/\/upperarm\n fill(61,64,91)\n rect(800,500,120,290)\/\/arm\n fill(255,215,215)\n rect(800,400,100,100)\/\/hand\n fill(34,19,17)\n rect(580,900,100,10)\/\/pocket\n fill(224,122,95)\n rect(600,850,10,50)\/\/pen\n\n \/\/facefeatures\n fill(34,19,17)\n ellipse(500,420,500,400)\/\/hair1\n fill(255,215,215)\n ellipse(500,520,450,470)\/\/head\n fill(255,255,255)\n ellipse(400,525,100,50)\/\/eyeright\n fill(34,19,17)\n ellipse(380,525,40,30)\/\/pupilright\n fill(255,255,255)\n ellipse(600,525,100,50)\/\/eyeleft \n fill(34,19,17)\n ellipse(580,525,40,30)\/\/pupilleft\n fill(34,19,17)\n rect(345,455,100,20)\/\/browr\n fill(34,19,17)\n rect(550,440,100,20)\/\/browl\n fill(255,210,218)\n rect(480,510,50,100)\/\/noseb\n fill(255,210,218)\n ellipse(506,600,60,55)\/\/nose\n\n fill(34,19,17)\/\/hair\n ellipse(500,310,60,60)\n ellipse(480,330,60,60)\n ellipse(530,310,60,60)\n ellipse(560,320,60,60)\n ellipse(600,300,60,70)\n ellipse(460,300,60,60)\n ellipse(430,300,60,60)\n ellipse(400,310,60,60)\n ellipse(370,300,60,60)\n ellipse(320,360,60,60)\n ellipse(340,330,60,60)\n ellipse(600,330,60,60)\n ellipse(620,330,60,60)\n ellipse(630,340,60,60)\n ellipse(650,330,60,60)\n ellipse(680,350,60,60)\n ellipse(690,370,60,60)\n ellipse(700,400,60,60)\n ellipse(710,420,60,60)\n ellipse(300,400,60,60)\n\n fill(34,19,17)\n stroke(0)\n strokeWeight(5)\n line(450,700,550,700)\n noloop();\n\n}\n\n\n<\/code><\/pre><\/p>\n\n\n\n<p>Locating and finding the right coordinates on the canvas was quite challenging for me. I also spent a lot of time trying to find the right lines of code when I was making changes. However, I made things easier when I used “\/\/” to label each graphic element. <\/p>\n\n\n\n<p>Also, I checked my HTML code used to embed p5.js, and the data-width and data-height match with my canvas size, but I don’t know why my self-portrait shows up like this in WordPress.<\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>luca-portrait function setup() { createCanvas(1000, 1000); background(180); } function draw() { background(171,130,130) text(“Luca’s portrait”,15,20) \/\/hoodie fill(61,64,91) ellipse(500,700,500,200) fill(229,229,229) ellipse(500,700,450,200) \/\/body fill(244,241,222) rect(450,765,100,245)\/\/shirt fill(61,64,91) rect(280,765,200,245)\/\/bodyr fill(61,64,91) rect(550,765,200,245)\/\/bodyl fill(61,64,91) ellipse(270,840,150,150)\/\/shoulderr fill(61,64,91) ellipse(738,840,150,150)\/\/shoulderl fill(61,64,91) rect(210,850,120,200)\/\/armr fill(61,64,91) rect(730,780,190,120)\/\/upperarm fill(61,64,91) rect(800,500,120,290)\/\/arm fill(255,215,215) rect(800,400,100,100)\/\/hand fill(34,19,17) rect(580,900,100,10)\/\/pocket fill(224,122,95) rect(600,850,10,50)\/\/pen \/\/facefeatures fill(34,19,17) ellipse(500,420,500,400)\/\/hair1 fill(255,215,215) ellipse(500,520,450,470)\/\/head fill(255,255,255) ellipse(400,525,100,50)\/\/eyeright fill(34,19,17) ellipse(380,525,40,30)\/\/pupilright fill(255,255,255) ellipse(600,525,100,50)\/\/eyeleft fill(34,19,17) ellipse(580,525,40,30)\/\/pupilleft … <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/09\/07\/project-1-my-self-portrait-29\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> “Project 1: My Self-Portrait”<\/span><\/a><\/p>\n","protected":false},"author":642,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[10,58],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/65181"}],"collection":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/users\/642"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=65181"}],"version-history":[{"count":7,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/65181\/revisions"}],"predecessor-version":[{"id":65281,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/65181\/revisions\/65281"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=65181"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=65181"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=65181"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}