{"id":71272,"date":"2022-09-10T21:22:47","date_gmt":"2022-09-11T01:22:47","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/?p=71272"},"modified":"2022-09-10T21:29:32","modified_gmt":"2022-09-11T01:29:32","slug":"project-2-my-variable-self-portrait","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/09\/10\/project-2-my-variable-self-portrait\/","title":{"rendered":"Project 2: My (Variable) 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><p>I took my original self portrait and modified it to be variable, as that&rsquo;s what I thought originally we were supposed to do. My bad for misinterpreting, if I did. But the idea here is that the hair length and color, as well as skin and eye color will change randomly as you click. You may also notice some weird little ditties in the code, as well as the fact that the eyes follow your mouse. Those are the animations I thought we were supposed to do (again, my bad for misinterpreting!) that are now just fun little easter eggs to play with!<\/p>\n\n\n\n<div><a class=\"p5_sketch_link\" data-width=\"500\" data-height=\"500\" id=\"wp-block-file--media-8dc552c3-479d-4227-97e1-e6fb9225ffa8\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/09\/sketch-189.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\">let leftbrowx = 210; \/\/x coordinate of the original vertex of the left brow\r\nlet browY = 185; \/\/y coordinate of both brows\r\nlet rightbrowx = 273; \/\/x coordinate of the original vertex of the right brow\r\nhaircenterX = 225; \/\/x coordinate of the point around which hair rotates and from which it originates\r\nhaircenterY = 170; \/\/y coordinate of the point around which hair rotates and from which it originates\r\n\r\nlet lefteyex = 262; \/\/x coordinate of the center of the left eye\r\nlet righteyex = lefteyex-40; \/\/x coordinate of the center of the right eye\r\nlet eyey = 198; \/\/y coordinate of the center of both eyes\r\nlet mouthY = 225; \/\/y coordinate of the vertices of the mouth\r\nlet eyeRed = 33; \/\/Red tint of the iris\r\nlet eyeGreen = 6; \/\/Green tint of the iris\r\nlet eyeBlue = 4; \/\/Blue tint of the iris\r\nlet hairRed = 40; \/\/Red tint of the hair\r\nlet hairBlue = 26; \/\/Green tint of the hair\r\nlet hairGreen = 34; \/\/Blue tint of the hair\r\nlet skinRed = 255; \/\/Red tint of the skin\r\nlet skinGreen = 233; \/\/Green tint of the skin\r\nlet skinBlue = 199; \/\/Blue tint of the skin\r\nlet hairLen = 50; \/\/Length of hair in the back of the head\r\nperformingAnim = false; \/\/determines whether or not an animation is occurring, and retains the face until the animation has stopped and the face returns to default (not default color, as in expression)\r\n\r\n\r\nfunction setup() {\r\n    createCanvas(500, 500);\r\n    background(255,138,120);\r\n}\r\nfunction draw() {\r\n    background(255,138,120);\r\n\r\n    \/\/behind head hair\r\n    noStroke();\r\n    fill(hairRed, hairGreen, hairBlue);\r\n    beginShape();\r\n    vertex(haircenterX,haircenterY);\r\n    curveVertex(haircenterX,haircenterY);\r\n    curveVertex(haircenterX-20,haircenterY+hairLen\/2)\r\n    vertex(haircenterX-10-10,haircenterY+40+(hairLen-30));\r\n    vertex(haircenterX-5-10,haircenterY+53+(hairLen-30));\r\n    vertex(haircenterX+1+10,haircenterY+60+(hairLen-30)+10);\r\n    vertex(haircenterX+4+10,haircenterY+60+(hairLen-30)+10);\r\n    vertex(haircenterX+45+15,haircenterY+62+(hairLen-20));\r\n    vertex(haircenterX+55+15,haircenterY+55+(hairLen-20));\r\n    vertex(haircenterX+63+15,haircenterY+50+(hairLen-20));\r\n    vertex(haircenterX+45+35.5,haircenterY+40+(hairLen-20));\r\n    curveVertex(haircenterX+75,haircenterY+hairLen\/2);\r\n    curveVertex(haircenterX+40,haircenterY);\r\n    curveVertex(haircenterX+20,haircenterY-10);\r\n    endShape();\r\n    stroke(hairRed+100, hairGreen+50, hairBlue+50);\r\n    strokeWeight(1)\r\n    arc(haircenterX-10,haircenterY+40+(hairLen-30),30,hairLen,8.5,4.5); \/\/15\r\n    arc(haircenterX+63,haircenterY+50+(hairLen-30),40,hairLen+10,6,8,OPEN); \/\/20\r\n    arc(haircenterX+45,haircenterY+40+(hairLen-30),75,hairLen+10,5.7,6.6,OPEN); \/\/37.5\r\n    arc(haircenterX+55,haircenterY+55+(hairLen-30),40,hairLen+10,6.1,8,OPEN); \/\/20\r\n    arc(haircenterX+45,haircenterY+62+(hairLen-30),40,hairLen+10,6.2,8,OPEN); \/\/20\r\n    arc(haircenterX-5,haircenterY+53+(hairLen-30),30,hairLen,7.6,3.7); \/\/15\r\n    arc(haircenterX+1,haircenterY+60+(hairLen-30),30,hairLen,7.6,3); \/\/15\r\n    arc(haircenterX+4,haircenterY+60+(hairLen-30),30,hairLen,7.6,3); \/\/15\r\n    push();\r\n    rotate(0.1);\r\n    arc(haircenterX+40,haircenterY+40+(hairLen-30),30,hairLen,7.6,3);\r\n    pop();\r\n\r\n\r\n    \/\/cranium and fillings\r\n    angleMode(RADIANS);\r\n    fill(skinRed,skinGreen,skinBlue);\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    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\r\n    \/\/neck\r\n    noStroke();\r\n    fill(skinRed,skinGreen,skinBlue);\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(skinRed,skinGreen,skinBlue);\r\n\r\n    \/\/clothes (it's just a blanket)\r\n    fill(222, 0, 111);\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    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    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(skinRed,skinGreen,skinBlue);\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(skinRed,skinGreen-50,skinBlue-20);\r\n    noStroke();\r\n    beginShape();\r\n    curveVertex(240,245);\r\n    curveVertex(240,245);\r\n    curveVertex(250,253);\r\n    curveVertex(260,249);\r\n    curveVertex(280,223);\r\n    curveVertex(280,223);\r\n    endShape(OPEN);\r\n    stroke(0);\r\n    fill(skinRed,skinGreen,skinBlue);\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    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\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\r\n    \/\/left eye (of body)\r\n    noStroke();\r\n    fill(255);\r\n    ellipse(lefteyex,eyey+1,20,16);\r\n    fill(240);\r\n    arc(lefteyex,eyey-2,20,10,3.2,6.3);\r\n    fill(eyeRed,eyeGreen,eyeBlue);\r\n    noStroke();\r\n    if (mouseY &gt; 208) {\r\n        irisY = eyey+2;\r\n    } else{\r\n        irisY = eyey;\r\n    }\r\n    if (mouseX &gt; 255 & mouseX < 267) {\r\n        leftposX = mouseX\r\n    }\r\n    if (mouseX > 267){\r\n        leftposX = lefteyex+5\r\n    }\r\n    if (mouseX < 255) {\r\n        leftposX = lefteyex-5\r\n    }\r\n    ellipse(leftposX,irisY,10,14) \/\/iris\r\n    fill(eyeRed+200,eyeGreen+150,eyeBlue+150);\r\n    ellipse(leftposX,irisY+4,6,5); \/\/under-pupil highlight\r\n    fill(0);\r\n    ellipse(leftposX,irisY,5,8); \/\/pupil\r\n    fill(255);\r\n    ellipse(leftposX-2,irisY-2,3,6); \/\/over pupil highlight\r\n    stroke(0);\r\n    noFill();\r\n    ellipse(leftposX,irisY,9,13);\r\n    \r\n    arc(222,196,20,10,3.2,6.3)\r\n\r\n    \/\/right eye (of body)\r\n    noStroke();\r\n    fill(255);\r\n    ellipse(righteyex,eyey+1,20,16);\r\n    fill(240);\r\n    arc(righteyex,eyey-2,20,10,3.2,6.3);\r\n    fill(eyeRed,eyeGreen,eyeBlue);\r\n    noStroke();\r\n    if (mouseX &gt; 218 & mouseX < 230) {\r\n        rightposX = mouseX;\r\n    }\r\n    if (mouseX &gt; 230){\r\n        rightposX = righteyex+6;\r\n    }\r\n    if (mouseX &lt; 218) {\r\n        rightposX = righteyex-4;\r\n    }\r\n    ellipse(rightposX,irisY,10,14) \/\/iris\r\n    fill(eyeRed+200,eyeGreen+150,eyeBlue+150);\r\n    ellipse(rightposX,irisY+4,6,5); \/\/under-pupil highlight\r\n    fill(0);\r\n    ellipse(rightposX,irisY,5,8); \/\/pupil\r\n    fill(255);\r\n    ellipse(rightposX-2,irisY-2,3,6); \/\/over-pupil highlight\r\n    stroke(0);\r\n    noFill();\r\n    ellipse(rightposX,irisY,9,13);\r\n\r\n    arc(262,196,20,10,3.2,6.3);\r\n        \r\n\r\n    \/\/mouth\r\n    stroke(0);\r\n    if(mouseX &gt; 235 & mouseX < 248 && mouseY > 183 && mouseY < 191 && mouseIsPressed === true){ \/\/frowning action\r\n        while(mouthY < 245){\r\n            mouthY = mouthY+1;\r\n        }\r\n        curve(228, mouthY, 233, 230, 240, 230, 245, mouthY);\r\n        performingAnim = true;\r\n    } \r\n    else {\r\n        curve(228, 225, 233, 230, 240, 230, 245, 225);\r\n        performingAnim = false;\r\n    }\r\n    if(mouseX &gt; 230 & mouseX < 240 && mouseY > 220 && mouseY < 235 && mouseIsPressed === true){ \/\/makes my mouth open and close randomly, for no good reason.\r\n        stroke(0);\r\n        fill(227, 85, 66);\r\n        ellipse(236.5, 230,10,8);\r\n        performingAnim = true;\r\n    } \r\n\r\n    \/\/nose\r\n    fill(skinRed,skinGreen-50,skinBlue-20);\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\r\n    \/\/eyebrows\r\n    noStroke();\r\n    fill(hairRed, hairGreen, hairBlue);\r\n    if(mouseX &gt; 235 & mouseX < 248 && mouseY > 183 && mouseY < 191 && mouseIsPressed === true){ \/\/eyebrow furrowing action\r\n        while (leftbrowx < 215 && browY < 190 && rightbrowx > 268) {\r\n            leftbrowx = leftbrowx+1\r\n            rightbrowx = rightbrowx-1\r\n            browY = browY+1\r\n\r\n            push();\r\n            rotate(0.01);\r\n            beginShape();\r\n            curveVertex(leftbrowx,browY);\r\n            curveVertex(leftbrowx+7,browY-5);\r\n            curveVertex(leftbrowx+18,browY-1);\r\n            curveVertex(leftbrowx+25,browY-2);\r\n            curveVertex(leftbrowx+20,browY-8);\r\n            curveVertex(leftbrowx+7,browY-8);\r\n            endShape(CLOSE);\r\n            pop();\r\n\r\n            push();\r\n            rotate(-0.02);\r\n            beginShape();\r\n            curveVertex(rightbrowx,browY);\r\n            curveVertex(rightbrowx-7,browY-1);\r\n            curveVertex(rightbrowx-18,browY+3);\r\n            curveVertex(rightbrowx-25,browY+2);\r\n            curveVertex(rightbrowx-20,browY-4);\r\n            curveVertex(rightbrowx-7,browY-4);\r\n            endShape(CLOSE);\r\n            pop();\r\n            performingAnim = true;\r\n        }\r\n        if (leftbrowx &gt;= 215 & browY >= 190 && rightbrowx <= 268){\r\n            push();\r\n            rotate(0.01);\r\n            beginShape();\r\n            curveVertex(leftbrowx-6,browY-5);\r\n            curveVertex(leftbrowx-0,browY-3);\r\n            curveVertex(leftbrowx+15,browY-0);\r\n            curveVertex(leftbrowx+22,browY-1);\r\n            curveVertex(leftbrowx+17,browY-6);\r\n            curveVertex(leftbrowx+4,browY-6);\r\n            endShape(CLOSE);\r\n            pop();\r\n\r\n            push();\r\n            rotate(-0.02);\r\n            beginShape();\r\n            curveVertex(rightbrowx-2,browY+2);\r\n            curveVertex(rightbrowx-8,browY+4);\r\n            curveVertex(rightbrowx-19,browY+7);\r\n            curveVertex(rightbrowx-26,browY+6);\r\n            curveVertex(rightbrowx-21,browY+1);\r\n            curveVertex(rightbrowx-8,browY+1);\r\n            endShape(CLOSE);\r\n            pop();\r\n            performingAnim = true;\r\n        }\r\n    } else {\r\n        let leftbrowx = 210;\r\n        let browY = 185;\r\n        let rightbrowx = 273;\r\n        beginShape();\r\n        curveVertex(leftbrowx,browY+3);\r\n        curveVertex(leftbrowx+7,browY+2);\r\n        curveVertex(leftbrowx+18,browY+4);\r\n        curveVertex(leftbrowx+25,browY+3);\r\n        curveVertex(leftbrowx+20,browY-1);\r\n        curveVertex(leftbrowx+7,browY-1);\r\n        endShape(CLOSE);\r\n        beginShape();\r\n        curveVertex(rightbrowx,browY+3);\r\n        curveVertex(rightbrowx-7,browY+2);\r\n        curveVertex(rightbrowx-18,browY+4);\r\n        curveVertex(rightbrowx-25,browY+3);\r\n        curveVertex(rightbrowx-20,browY-1);\r\n        curveVertex(rightbrowx-7,browY-1);\r\n        endShape(CLOSE);\r\n        performingAnim = false;\r\n    }\r\n    \r\n\r\n    \/\/hair\r\n    fill(hairRed, hairGreen, hairBlue);\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    stroke(hairRed+100, hairGreen+50, hairBlue+50);\r\n    strokeWeight(1)\r\n    arc(haircenterX-15,haircenterY+10,20,50,8,3.5);\r\n    noStroke();\r\n    rect(haircenterX-16,haircenterY+5,5,5);\r\n    stroke(hairRed+100, hairGreen+50, hairBlue+50);\r\n\r\n    beginShape();\r\n    curveVertex(haircenterX-20,haircenterY-2);\r\n    curveVertex(haircenterX-20,haircenterY-2);\r\n    curveVertex(haircenterX-28,haircenterY+2);\r\n    curveVertex(haircenterX-47,haircenterY-9);\r\n    curveVertex(haircenterX-28,haircenterY-7);\r\n    curveVertex(haircenterX-15,haircenterY-10);\r\n    curveVertex(haircenterX-15,haircenterY-10);\r\n    endShape();\r\n\r\n    beginShape();\r\n    curveVertex(haircenterX-8,haircenterY);\r\n    curveVertex(haircenterX-8,haircenterY);\r\n    curveVertex(haircenterX-12,haircenterY+8);\r\n    curveVertex(haircenterX-25,haircenterY+10);\r\n    curveVertex(haircenterX-40,haircenterY);\r\n    curveVertex(haircenterX-30,haircenterY+3);\r\n    curveVertex(haircenterX-20,haircenterY-2);\r\n    curveVertex(haircenterX-20,haircenterY-2);\r\n    endShape();\r\n\r\n    beginShape();\r\n    curveVertex(haircenterX+10,haircenterY-8);\r\n    curveVertex(haircenterX+10,haircenterY-8);\r\n    curveVertex(haircenterX-1,haircenterY+2);\r\n    curveVertex(haircenterX-5,haircenterY+8);\r\n    curveVertex(haircenterX-15,haircenterY+14);\r\n    curveVertex(haircenterX-27,haircenterY+15);\r\n    curveVertex(haircenterX-16,haircenterY+8);\r\n    curveVertex(haircenterX-8,haircenterY);\r\n    curveVertex(haircenterX-8,haircenterY);\r\n    endShape();\r\n\r\n    beginShape();\r\n    curveVertex(haircenterX-15,haircenterY-10);\r\n    curveVertex(haircenterX-15,haircenterY-10);\r\n    curveVertex(haircenterX-28,haircenterY-7);\r\n    curveVertex(haircenterX-50,haircenterY-12);\r\n    curveVertex(haircenterX-35,haircenterY-16);\r\n    curveVertex(haircenterX-15,haircenterY-35);\r\n    curveVertex(haircenterX,haircenterY-30);\r\n    curveVertex(haircenterX,haircenterY-30);\r\n    endShape();\r\n\r\n    beginShape();\r\n    curveVertex(haircenterX,haircenterY-30);\r\n    curveVertex(haircenterX,haircenterY-30);\r\n    curveVertex(haircenterX-15,haircenterY-35);\r\n    curveVertex(haircenterX-24,haircenterY-50);\r\n    curveVertex(haircenterX-15,haircenterY-40);\r\n    curveVertex(haircenterX,haircenterY-40);\r\n    curveVertex(haircenterX,haircenterY-40);\r\n    endShape();\r\n\r\n    arc(haircenterX+36,haircenterY+5,90,90,5.3,6.9,OPEN);\r\n    arc(haircenterX+28,haircenterY-5,90,90,4,5.8,OPEN);\r\n\r\n    beginShape();\r\n    curveVertex(haircenterX+55,haircenterY+28);\r\n    curveVertex(haircenterX+55,haircenterY+28);\r\n    curveVertex(haircenterX+64,haircenterY+33);\r\n    curveVertex(haircenterX+65,haircenterY+45);\r\n    curveVertex(haircenterX+72,haircenterY+35);\r\n    curveVertex(haircenterX+75,haircenterY+28);\r\n    curveVertex(haircenterX+75,haircenterY+28);\r\n    endShape();\r\n\r\n    \/\/sideburn\r\n    push();\r\n    rotate(-0.2);\r\n    arc(haircenterX+10,haircenterY+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(haircenterX-365,haircenterY+145,15,30,7.8,4.8,CLOSE);\r\n    rotate(-0.1);\r\n    arc(haircenterX-390,haircenterY+130,15,30,7.8,4.8,CLOSE);\r\n    arc(haircenterX-385,haircenterY+125,15,30,7.8,4.8,CLOSE);\r\n    pop();\r\n\r\n    beginShape();\r\n    curveVertex(haircenterX+10,haircenterY-8);\r\n    curveVertex(haircenterX+10,haircenterY-8);\r\n    curveVertex(haircenterX+20,haircenterY-2);\r\n    curveVertex(haircenterX+28,haircenterY+6);\r\n    curveVertex(haircenterX+40,haircenterY+14);\r\n    curveVertex(haircenterX+65,haircenterY+25);\r\n    curveVertex(haircenterX+48,haircenterY+10);\r\n    curveVertex(haircenterX+40,haircenterY);\r\n    curveVertex(haircenterX+35,haircenterY-8);\r\n    curveVertex(haircenterX+35,haircenterY-8);\r\n    endShape();\r\n\r\n}\r\nfunction mousePressed() {\r\n    if (performingAnim === false) { \/\/runs the code which changes all the variables\r\n        eyeBlue = random(0,100);\r\n        eyeRed = random(0,100);\r\n        eyeGreen = random(0,100);\r\n        hairRed = random(0,80);\r\n        hairGreen = random(0,80);\r\n        hairBlue = random(0,80);\r\n        skinBlue = random(155,215);\r\n        skinGreen = random(skinBlue,245);\r\n        skinRed = random(skinGreen,255);\r\n        hairLen = random(10,100);\r\n    } else { \/\/prevents it from doing that while the mouse is pressed down over the two animation spots\r\n        eyeBlue = eyeBlue;\r\n        eyeRed = eyeRed;\r\n        eyeGreen = eyeGreen;\r\n        hairRed = hairRed;\r\n        hairGreen = hairGreen;\r\n        hairBlue = hairBlue;\r\n        skinBlue = skinBlue;\r\n        skinGreen = skinGreen;\r\n        skinRed = skinRed;\r\n        hairLen = hairLen;\r\n    }\r\n    \r\n}<\/code><\/pre><\/div>\n\n\n\n<p><\/p>\n\n\n\n<p>I misinterpreted the original directions of the project and instead of making the face change, I made it interactive. Because (in all honesty) I was too lazy and didn&rsquo;t want all my hard work to go to waste, I just left it and incorporated it into the portrait.<\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>I took my original self portrait and modified it to be variable, as that&rsquo;s what I thought originally we were supposed to do. My bad for misinterpreting, if I did. But the idea here is that the hair length and color, as well as skin and eye color will change randomly as you click. You &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/09\/10\/project-2-my-variable-self-portrait\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project 2: My (Variable) Self Portrait&#8221;<\/span><\/a><\/p>\n","protected":false},"author":725,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[97,58],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/71272"}],"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=71272"}],"version-history":[{"count":4,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/71272\/revisions"}],"predecessor-version":[{"id":72999,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/71272\/revisions\/72999"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=71272"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=71272"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=71272"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}