{"id":70153,"date":"2022-09-06T22:12:22","date_gmt":"2022-09-07T02:12:22","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/?p=70153"},"modified":"2022-09-06T22:18:56","modified_gmt":"2022-09-07T02:18:56","slug":"project-1-my-self-portrait-13","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/09\/06\/project-1-my-self-portrait-13\/","title":{"rendered":"Project 1: My Self Portrait"},"content":{"rendered":"<!DOCTYPE html PUBLIC \"-\/\/W3C\/\/DTD HTML 4.0 Transitional\/\/EN\" \"http:\/\/www.w3.org\/TR\/REC-html40\/loose.dtd\">\n<html><body><div> <a class=\"p5_sketch_link\" data-width=\"500\" data-height=\"500\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/09\/sketch-52.js\">sketch<\/a><iframe src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/plugins\/p5-embedder\/p5_iframe.html\" class=\"p5_exampleFrame\" width=\"500\" height=\"500\"><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">function setup() {\r\n    createCanvas(500, 500);\r\n    background(255,138,120);\r\n}\r\nfunction draw() {\r\n    let borpX = 225;\r\n    let borpY = 170;\r\n    \/\/behind head hair\r\n    noStroke();\r\n    fill(40, 26, 34);\r\n    beginShape();\r\n    vertex(300,195);\r\n    vertex(303,200);\r\n    vertex(305,210);\r\n    vertex(302,240);\r\n    vertex(280,245);\r\n    vertex(270,220);\r\n    stroke(80, 40, 54);\r\n    endShape();\r\n    strokeWeight(1)\r\n    arc(borpX-10,borpY+40,30,50,8.5,4.5);\r\n    arc(borpX+63,borpY+50,40,60,6,8,OPEN);\r\n    arc(borpX+45,borpY+40,75,60,5.7,6.6,OPEN);\r\n    arc(borpX+55,borpY+55,40,60,6.1,8,OPEN);\r\n    arc(borpX+45,borpY+62,40,60,6.2,8,OPEN);\r\n    arc(borpX-5,borpY+53,30,50,7.6,3.7);\r\n    arc(borpX+1,borpY+60,30,50,7.6,3);\r\n    arc(borpX+4,borpY+60,30,50,7.6,3);\r\n    push();\r\n    rotate(0.1);\r\n    arc(borpX+40,borpY+40,30,50,7.6,3);\r\n    pop();\r\n\r\n\r\n    \/\/cranium and fillings\r\n    angleMode(RADIANS);\r\n    fill(255,233,199);\r\n    noStroke();\r\n    ellipse(246.8,500\/2.195-12,71.5,55.8);\r\n    stroke(0);\r\n    arc(249,500\/3+8.5,92,90,2.5,7.05,OPEN);\r\n    noStroke();\r\n    ellipse(221,500\/2.45,20,30);\r\n    ellipse(282,500\/2-42,10,10);\r\n    stroke(0);\r\n\r\n    noStroke();\r\n    fill(222, 0, 111);\r\n    ellipse(262,270,100,20);\r\n    triangle(160,500,260,260,388,500);\r\n    stroke(0);\r\n    arc(262,270,100,20,3.2,6.2);\r\n    fill(255,233,199);\r\n\r\n    \/\/neck\r\n    noStroke();\r\n    fill(255,233,199);\r\n    beginShape();\r\n    curveVertex(240,245);\r\n    curveVertex(240,245);\r\n    curveVertex(239,258);\r\n    curveVertex(240,268);\r\n    curveVertex(285,266);\r\n    curveVertex(281,250);\r\n    curveVertex(280,223);\r\n    curveVertex(280,223);\r\n    endShape();\r\n    noFill();\r\n    stroke(0);\r\n    arc(230,245,20,50,5.5,8);\r\n    arc(290,225,20,80,7.8,10);\r\n    fill(255,233,199);\r\n\r\n    \/\/clothes\r\n    fill(222, 0, 111);\r\n\r\n    beginShape();\r\n    vertex(240,258);\r\n    vertex(225,255);\r\n    vertex(205,257);\r\n    vertex(190,280);\r\n    vertex(180,350);\r\n    vertex(150,470);\r\n    vertex(162,500);\r\n    vertex(180,520);\r\n    endShape(OPEN);\r\n\r\n    beginShape();\r\n    vertex(200,400);\r\n    vertex(240,256);\r\n    vertex(250,268);\r\n    vertex(260,258);\r\n    vertex(300,255);\r\n    vertex(320,257);\r\n    vertex(350,285);\r\n    vertex(365,350);\r\n    vertex(400,440);\r\n    vertex(398,500);\r\n    vertex(360,530);\r\n    endShape(OPEN);\r\n\r\n    \r\n\r\n    curve(245,264,240,268,197,270,200,220);\r\n    curve(245,264,240,268,183,340,200,220);\r\n    curve(220,390,208,420,160,460,130,420);\r\n    curve(260,265,255,268,335,270,330,220);\r\n    curve(260,265,255,268,365,350,330,220);\r\n    curve(220,370,200,400,365,440,330,220);\r\n    fill(255,233,199);\r\n    beginShape();\r\n    vertex(239,255);\r\n    vertex(235,278);\r\n    vertex(275,256);\r\n    endShape(OPEN);\r\n    line(200,400,240,500);\r\n\r\n    \/\/chin segments\r\n    fill(255,233,199);\r\n    beginShape();\r\n    curveVertex(215,231);\r\n    curveVertex(215,231);\r\n    curveVertex(228,243);\r\n    curveVertex(250,244);\r\n    curveVertex(280,223);\r\n    curveVertex(280,223);\r\n    endShape(OPEN);\r\n    \/\/arc(246.2,500\/2.195-10,69.5,55.8,6.5,9,OPEN);\r\n    push();\r\n    translate(215, 216.43);\r\n    rotate(-0.2);\r\n    arc(3,0,15,42,8,4.45,OPEN);\r\n    pop();\r\n    \/\/ear\r\n    push();\r\n    translate(284,500\/2-32);\r\n    rotate(0.3);\r\n    arc(0,-5,13,26,4.1,8.1,OPEN);\r\n    arc(1,-5,7,15,8,4.6,OPEN);\r\n    pop();\r\n    arc(284.9,500\/2-35,4,8,4,7,OPEN);\r\n    \/\/eye1\r\n    let lefteyex = 262;\r\n    let lefteyey = 198;\r\n    noStroke();\r\n    fill(255);\r\n    ellipse(lefteyex,lefteyey+1,20,16);\r\n    fill(240);\r\n    arc(lefteyex,lefteyey-2,20,10,3.2,6.3);\r\n    fill(33,6,4);\r\n    noStroke();\r\n    ellipse(lefteyex+4,lefteyey,10,14)\r\n    fill(255,164,128);\r\n    ellipse(lefteyex+4,lefteyey+4,6,5);\r\n    fill(0);\r\n    ellipse(lefteyex+4,lefteyey,5,8);\r\n    fill(255);\r\n    ellipse(lefteyex+2,lefteyey-2,3,6);\r\n    stroke(0);\r\n    noFill();\r\n    ellipse(lefteyex+4,lefteyey,9,13);\r\n    arc(lefteyex,lefteyey-2,20,10,3.2,6.3);\r\n    \/\/eye2\r\n    let righteyex = 222;\r\n    let righteyey = 198;\r\n    noStroke();\r\n    fill(255);\r\n    ellipse(righteyex,righteyey+1,20,16);\r\n    fill(240);\r\n    arc(righteyex,righteyey-2,20,10,3.2,6.3);\r\n    fill(33,6,4);\r\n    noStroke();\r\n    ellipse(righteyex+4,righteyey,10,14)\r\n    fill(255,164,128);\r\n    ellipse(righteyex+4,righteyey+4,6,5);\r\n    fill(0);\r\n    ellipse(righteyex+4,righteyey,5,8);\r\n    fill(255);\r\n    ellipse(righteyex+2,righteyey-2,3,6);\r\n    stroke(0);\r\n    noFill();\r\n    ellipse(righteyex+4,righteyey,9,13);\r\n    arc(righteyex,righteyey-2,20,10,3.2,6.3);\r\n    \/\/mouth\r\n    stroke(0);\r\n    curve(228, 225, 233, 230, 240, 230, 245, 225);\r\n    \/\/nose\r\n    fill(255, 195, 184);\r\n    noStroke();\r\n    triangle(240,215,232,215,235,218);\r\n    stroke(0);\r\n    noFill();\r\n    arc(226,208,18,20,6.1,7.1);\r\n    arc(240,213,15,10,8.8,9.2);\r\n    \/\/eyebrows\r\n    let leftbrowx = 210;\r\n    let leftbrowy = 185;\r\n    let rightbrowx = 273;\r\n    let rightbrowy = 185;\r\n    noStroke();\r\n    fill(26, 2, 20);\r\n    beginShape();\r\n    curveVertex(leftbrowx,leftbrowy+3);\r\n    curveVertex(leftbrowx+7,leftbrowy+2);\r\n    curveVertex(leftbrowx+18,leftbrowy+4);\r\n    curveVertex(leftbrowx+25,leftbrowy+3);\r\n    curveVertex(leftbrowx+20,leftbrowy-1);\r\n    curveVertex(leftbrowx+7,leftbrowy-1);\r\n    endShape(CLOSE);\r\n\r\n    beginShape();\r\n    curveVertex(rightbrowx,rightbrowy+3);\r\n    curveVertex(rightbrowx-7,rightbrowy+2);\r\n    curveVertex(rightbrowx-18,rightbrowy+4);\r\n    curveVertex(rightbrowx-25,rightbrowy+3);\r\n    curveVertex(rightbrowx-20,rightbrowy-1);\r\n    curveVertex(rightbrowx-7,rightbrowy-1);\r\n    endShape(CLOSE);\r\n    \/\/hair\r\n    fill(40, 26, 34);\r\n\r\n    beginShape();\r\n    vertex(200,175);\r\n    vertex(220,140);\r\n    vertex(228,127);\r\n    vertex(290,139);\r\n    vertex(295,160);\r\n    vertex(295,190);\r\n    vertex(285,190);\r\n    vertex(235,162);\r\n    vertex(225,170);\r\n    endShape();\r\n\r\n    \r\n    stroke(80, 40, 54);\r\n    strokeWeight(1)\r\n    arc(borpX-15,borpY+10,20,50,8,3.5);\r\n    noStroke();\r\n    rect(borpX-16,borpY+5,5,5);\r\n    stroke(80, 40, 54);\r\n\r\n    beginShape();\r\n    curveVertex(borpX-20,borpY-2);\r\n    curveVertex(borpX-20,borpY-2);\r\n    curveVertex(borpX-28,borpY+2);\r\n    curveVertex(borpX-47,borpY-9);\r\n    curveVertex(borpX-28,borpY-7);\r\n    curveVertex(borpX-15,borpY-10);\r\n    curveVertex(borpX-15,borpY-10);\r\n    endShape();\r\n\r\n    beginShape();\r\n    curveVertex(borpX-8,borpY);\r\n    curveVertex(borpX-8,borpY);\r\n    curveVertex(borpX-12,borpY+8);\r\n    curveVertex(borpX-25,borpY+10);\r\n    curveVertex(borpX-40,borpY);\r\n    curveVertex(borpX-30,borpY+3);\r\n    curveVertex(borpX-20,borpY-2);\r\n    curveVertex(borpX-20,borpY-2);\r\n    endShape();\r\n\r\n    beginShape();\r\n    curveVertex(borpX+10,borpY-8);\r\n    curveVertex(borpX+10,borpY-8);\r\n    curveVertex(borpX-1,borpY+2);\r\n    curveVertex(borpX-5,borpY+8);\r\n    curveVertex(borpX-15,borpY+14);\r\n    curveVertex(borpX-27,borpY+15);\r\n    curveVertex(borpX-16,borpY+8);\r\n    curveVertex(borpX-8,borpY);\r\n    curveVertex(borpX-8,borpY);\r\n    endShape();\r\n\r\n    \r\n\r\n    beginShape();\r\n    curveVertex(borpX-15,borpY-10);\r\n    curveVertex(borpX-15,borpY-10);\r\n    curveVertex(borpX-28,borpY-7);\r\n    curveVertex(borpX-50,borpY-12);\r\n    curveVertex(borpX-35,borpY-16);\r\n    curveVertex(borpX-15,borpY-35);\r\n    curveVertex(borpX,borpY-30);\r\n    curveVertex(borpX,borpY-30);\r\n    endShape();\r\n\r\n    beginShape();\r\n    curveVertex(borpX,borpY-30);\r\n    curveVertex(borpX,borpY-30);\r\n    curveVertex(borpX-15,borpY-35);\r\n    curveVertex(borpX-24,borpY-50);\r\n    curveVertex(borpX-15,borpY-40);\r\n    curveVertex(borpX,borpY-40);\r\n    curveVertex(borpX,borpY-40);\r\n    endShape();\r\n\r\n    beginShape();\r\n\r\n    endShape();\r\n\r\n    arc(borpX+36,borpY+5,90,90,5.3,6.9,OPEN);\r\n    arc(borpX+28,borpY-5,90,90,4,5.8,OPEN);\r\n\r\n    beginShape();\r\n    curveVertex(borpX+55,borpY+28);\r\n    curveVertex(borpX+55,borpY+28);\r\n    curveVertex(borpX+64,borpY+33);\r\n    curveVertex(borpX+65,borpY+45);\r\n    curveVertex(borpX+72,borpY+35);\r\n    curveVertex(borpX+75,borpY+28);\r\n    curveVertex(borpX+75,borpY+28);\r\n    endShape();\r\n\r\n    \/\/sideburn\r\n    push();\r\n    rotate(-0.2);\r\n    arc(borpX+10,borpY+88,10,30,8,5.5,CLOSE);\r\n\r\n    \/\/sideswoop\r\n    pop();\r\n    push();\r\n    rotate(-1.4);\r\n    arc(borpX-365,borpY+145,15,30,7.8,4.8,CLOSE);\r\n    rotate(-0.1);\r\n    arc(borpX-390,borpY+130,15,30,7.8,4.8,CLOSE);\r\n    arc(borpX-385,borpY+125,15,30,7.8,4.8,CLOSE);\r\n    pop();\r\n\r\n    beginShape();\r\n    curveVertex(borpX+10,borpY-8);\r\n    curveVertex(borpX+10,borpY-8);\r\n    curveVertex(borpX+20,borpY-2);\r\n    curveVertex(borpX+28,borpY+6);\r\n    curveVertex(borpX+40,borpY+14);\r\n    curveVertex(borpX+65,borpY+25);\r\n    curveVertex(borpX+48,borpY+10);\r\n    curveVertex(borpX+40,borpY);\r\n    curveVertex(borpX+35,borpY-8);\r\n    curveVertex(borpX+35,borpY-8);\r\n    endShape();\r\n\r\n   \/\/ stroke(255);\r\n   \/\/ strokeWeight(4);\r\n   \/\/ point(235,268);\r\n   \/\/ point(240,245);\r\n   \/\/ point(287,264);\r\n   \/\/ point(280,223);\r\n\r\n    \r\n\r\n    noLoop();\r\n}<\/code><\/pre><\/div>\n\n\n\n<p>I found the adjusting of the vertices of the custom shapes to be extremely time consuming and frankly agonizing. Were I to do this again, I would try to take more intuitive approaches.<\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>I found the adjusting of the vertices of the custom shapes to be extremely time consuming and frankly agonizing. Were I to do this again, I would try to take more intuitive approaches.<\/p>\n","protected":false},"author":725,"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\/f2022\/wp-json\/wp\/v2\/posts\/70153"}],"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\/725"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=70153"}],"version-history":[{"count":7,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/70153\/revisions"}],"predecessor-version":[{"id":71274,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/70153\/revisions\/71274"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=70153"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=70153"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=70153"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}