{"id":65702,"date":"2021-09-11T23:29:54","date_gmt":"2021-09-12T03:29:54","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=65702"},"modified":"2021-09-18T23:13:02","modified_gmt":"2021-09-19T03:13:02","slug":"variable-faces-2","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/09\/11\/variable-faces-2\/","title":{"rendered":"Variable Faces"},"content":{"rendered":"\n

sketch<\/a><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/Yanina Shavialenka\n\/\/Section B\n\nvar flipped = false;\n\nvar hairLength = 260;\n\nvar mouthShape = 0;\nvar mouthY = 350;\nvar mouthX = 330;\nvar mouthWidth = 105;\nvar mouthHeight = 70;\n\nvar eyeBrowsXL = 270;\nvar eyeBrowsXR = 390;\nvar eyeBrowsWidth = 90;\nvar eyeBrowsHeight = 40;\nvar eyebrowY = 235;\nvar rEyebrows = 82;\nvar gEyebrows = 60;\nvar bEyebrows = 7;\n\nvar rShirt = 107;\nvar gShirt = 142;\nvar bShirt = 35;\n\nvar rEyes1 = 0;\nvar gEyes1 = 0;\nvar bEyes1 = 255;\n\nvar rEyes2 = 30;\nvar gEyes2 = 144;\nvar bEyes2 = 255;\n\nvar earXR = 455;\nvar earXL = 203;\nvar earY = 283;\nvar earWidth =60;\nvar earHeight = 100;\n\nvar earringXL = 195;\nvar earringXR = 462;\nvar earringY = 325;\nvar earringWidth = 2;\nvar earringHeight = 15;\n\nvar earringLongXR = 458;\nvar earringLongXL = 191;\nvar earringLongY = 335;\nvar earringLongWidth = 10;\nvar earringLongHeight = 25;\n\nvar studSmallX = 478;\nvar studBigX= 472;\nvar studSmallY = 302;\nvar studBigY = 310;\nvar studSmallWidth = 4;\nvar studBigWidth = 6;\nvar studBSmallHeight = 4;\nvar studBigHeight = 6;\n\nvar faceX = 330;\nvar faceY = 250;\nvar faceWidth = 280;\nvar faceHeight = 330;\n\nvar bangsXL = 250;\nvar bangsXR = 415;\nvar bangsY = 160;\nvar bangsWidth = 120;\nvar bangsHeight = 80;\n\nvar eyeXL = 270;\nvar eyeXR = 390;\nvar eyeY = 255;\nvar eyeWidth = 65;\nvar eyeHeight = 55;\n\nvar eyeXL1 = 270;\nvar eyeXR1 = 390;\nvar eyeY1 = 255;\nvar eyeWidth1 = 50;\nvar eyeHeight1 = 50;\n\nvar reflectionBigX = 273;\nvar reflectionBigY = 252;\nvar reflectionBigWidth = 8;\nvar reflectionBigHeight = 8;\n\nvar reflectionSmallX = 393;\nvar reflectionSmallY = 252;\nvar reflectionSmallWidth = 4;\nvar reflectionSmallHeight =4;\n\nvar glassesXL = 270;\nvar glassesXR = 390;\nvar glassesY = 255;\nvar glassesWidth = 90;\nvar glassesHeight = 80;\n\nvar noseX = 330;\nvar noseY = 315;\nvar noseWidth = 35;\nvar noseHeight = 40;\n\nvar tX1 = 280;\nvar tY1 = 450;\nvar tX2 = 325;\nvar tY2 = 500;\nvar tX3 = 280;\nvar tY3 = 500;\n\nvar tXX1 = 325;\nvar tYY1 = 500;\nvar tXX2 = 370;\nvar tYY2 = 450;\nvar tXX3 = 370;\nvar tYY3 = 500; \n\nvar tXXX1 = 475;\nvar tYYY1 = 450;\nvar tXXX2 = 575;\nvar tYYY2 = 550;\nvar tXXX3 = 475;\nvar tYYY3 = 550;\n\nvar tXXXX1 = 175;\nvar tYYYY1 = 450;\nvar tXXXX2 = 70;\nvar tYYYY2 = 550;\nvar tXXXX3 = 175;\nvar tYYYY3 = 550;\n\nvar rectX1 = 370;\nvar rectX2 = 175;\nvar rectY = 450;\nvar rectWidth = 105;\nvar rectHeight = 150;\n\nfunction setup() {\n createCanvas(640, 480);\n background(65, 105, 225);\n text(\"p5.js vers 0.9.0 test.\", 10, 15); \n}\n\nfunction draw() {\n background(5, 105, 225);\n noStroke(30, 144, 255);\n fill(30, 144, 255);\n rect(width\/8-30, height\/10+2, width-100, height-100);\n\n noStroke();\n fill(100, 149, 237, 130);\n rect(width\/6.4, height\/4.8, width-200, height-200);\n\n noStroke();\n fill(135, 206, 250, 50);\n rect(width\/4-10, height\/3-10, width-300, height-300);\n\n noStroke();\n fill(176, 196, 222, 50);\n rect(width\/4+4*10, height\/2-4*10, width-400, height-400);\n\n noStroke();\n fill(240, 248, 255, 20);\n rect(width\/2-10*2, height\/2-10*2, width-500, height-440);\n\n \/\/Hair\n noStroke();\n fill(160, 82, 45);\n rect(width\/5+30, height\/2-10*4, width-300, hairLength);\n ellipse(width\/2+8, height\/3+10*3, width-300, height-200);\n\n \/\/Neck\n noStroke();\n fill(255, 218, 185);\n rect(width\/2-10*4+2, height-10*8, width\/8+10, height\/4.8);\n\n \/\/Ears\n stroke(1);\n fill(255, 218, 185);\n arc(earXR, earY, earWidth, earHeight, PI, PI, CHORD);\n arc(earXL, earY, earWidth, earHeight, PI, PI, CHORD);\n\n \/\/Earrings\n stroke(1);\n fill(211, 211, 211);\n rect(earringXL, earringY, earringWidth, earringHeight);\n rect(earringXR, earringY, earringWidth, earringHeight);\n fill(192, 192, 192);\n ellipse(width\/4+36, height\/1.5, width\/64, height\/48);\n ellipse(width\/1.6+10*6+3, height\/1.5, width\/64, height\/48);\n rect(earringLongXL, earringLongY, earringLongWidth, earringLongHeight);\n rect(earringLongXR, earringLongY, earringLongWidth, earringLongHeight);\n\n \/\/studs\n ellipse(studBigX, studBigY, studBigWidth, studBigHeight);\n ellipse(studSmallX, studSmallY, studSmallWidth, studBSmallHeight);\n\n \/\/Face\n stroke(1);\n fill(255, 218, 185);\n ellipse(faceX, faceY, faceWidth, faceHeight);\n\n \/\/Hair(Bangs)\n noStroke();\n fill(160, 82, 45);\n ellipse(330, 130, 200, 150);\n ellipse(bangsXL, bangsY, bangsWidth, bangsHeight);\n ellipse(bangsXR, bangsY, bangsWidth, bangsHeight);\n\n \/\/Eyes(Shape)\n stroke(1);\n fill(255, 255, 255);\n ellipse(eyeXL, eyeY, eyeWidth, eyeHeight);\n ellipse(eyeXR, eyeY, eyeWidth, eyeHeight);\n\n \/\/Eyes(Color)\n noStroke();\n fill(rEyes1, gEyes1, bEyes1, 170);\n ellipse(eyeXL1, eyeY1, eyeWidth1, eyeHeight1);\n ellipse(eyeXR1, eyeY1, eyeWidth1, eyeHeight1);\n\n \/\/Eyes(Color)\n noStroke();\n fill(rEyes2, gEyes2, bEyes2, 100);\n ellipse(eyeXL1, eyeY1, eyeWidth1-15, eyeHeight-15);\n ellipse(eyeXR1, eyeY1, eyeWidth1-15, eyeHeight1-15);\n\n \/\/Eyes(Pupils)\n noStroke();\n fill(0, 0, 0);\n ellipse(eyeXL1, eyeY1, eyeWidth1-15*2, eyeHeight1-15*2);\n ellipse(eyeXR1, eyeY1, eyeWidth1-15*2, eyeHeight1-15*2);\n\n \/\/Eyes(Reflection)\n noStroke();\n fill(255, 255, 255);\n ellipse(reflectionBigX, reflectionBigY, reflectionBigWidth, reflectionBigHeight);\n ellipse(reflectionBigX+6, reflectionBigY+6, reflectionSmallWidth, reflectionSmallHeight);\n ellipse(reflectionSmallX, reflectionSmallY, reflectionBigWidth, reflectionBigHeight);\n ellipse(reflectionSmallX+6, reflectionSmallY+6, reflectionSmallWidth, reflectionSmallHeight);\n\n \/\/Eyebrows\n fill(rEyebrows, gEyebrows, bEyebrows);\n arc(eyeBrowsXL, eyebrowY, eyeBrowsWidth, eyeBrowsHeight, PI, PI + HALF_PI + QUARTER_PI, CHORD);\n arc(eyeBrowsXR, eyebrowY, eyeBrowsWidth, eyeBrowsHeight, PI + QUARTER_PI, 2*PI, CHORD);\n\n \/\/Glassses\n stroke(1);\n fill(240, 248, 255, 100);\n ellipse(glassesXL, glassesY, glassesWidth, glassesHeight);\n ellipse(glassesXR, glassesY, glassesWidth, glassesHeight);\n\n line(width\/2-5, height\/2+5*3, width\/2+5*5, height\/2+5*3);\n line(width\/1.6+5*7, height\/2+5*3, width\/1.6+10*7, height\/2);\n line(width\/2.5-3*10-2, height\/2+5*3, width\/4+3*10+1, height\/2-1);\n\n \/\/Mouth\n noStroke();\n fill(205, 92, 92);\n arc(mouthX, mouthY, mouthWidth, mouthHeight, mouthShape, mouthShape+PI, CHORD);\n\n \/\/Nose\n noStroke();\n fill(228, 167, 187);\n arc(noseX, noseY, noseWidth, noseHeight, PI, 2*PI, PIE);\n\n \/\/Tshirt\n stroke(1);\n fill(rShirt,gShirt,bShirt);\n line(width\/2-10*4, height-10*3, width\/2+5, height+20);\n line(width\/2+5, height+20, width\/2+5*10, height-10*3);\n line(width\/2-10*4, height-10*3, width\/4+5*3, height-10*3);\n line(width\/4+5*3, height-10*3, width\/8 + 2*5, height*1.1+30);\n line(width\/2+5*10, height-10*3, width-165, height-10*3);\n line(width-165, height-10*3, width-3*20, height*1.1 + 2*13);\n \n noStroke();\n triangle(tX1, tY1, tX2, tY2, tX3, tY3);\n triangle(tXX1, tYY1, tXX2, tYY2, tXX3, tYY3);\n triangle(tXXX1, tYYY1, tXXX2, tYYY2, tXXX3, tYYY3);\n triangle(tXXXX1, tYYYY1, tXXXX2, tYYYY2, tXXXX3, tYYYY3);\n rect(rectX1, rectY, rectWidth, rectHeight);\n rect(rectX2, rectY, rectWidth, rectHeight);\n\n}\n\nfunction mousePressed() {\n hairLength = random(100, 280);\n\n flipped =! flipped; \n if(flipped) {\n mouthShape += PI;\n mouthY = 380;\n }\n else {\n mouthShape -= PI;\n mouthY = 350;\n }\n \n rShirt = random(255);\n gShirt = random(255);\n bShirt = random(255);\n\n rEyes1 = random(255);\n gEyes1 = random(255);\n bEyes1 = random(255);\n\n rEyes2 = random(255);\n gEyes2 = random(255);\n bEyes2 = random(255);\n\n rEyebrows = random(255);\n gEyebrows = random(255);\n bEyebrows = random(255);\n\n eyebrowY = random(210, 245);\n}<\/code><\/pre><\/p>\n\n\n\n<p>I used my Self-Portrait from the previous assignment to make this Face Variables such as I randomly change the length of the hair, color of the eyes\/eyebrows\/shirt. The hardest part for me was to change the colors because I had trouble figuring out how it works. <\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>sketch \/\/Yanina Shavialenka \/\/Section B var flipped = false; var hairLength = 260; var mouthShape = 0; var mouthY = 350; var mouthX = 330; var mouthWidth = 105; var mouthHeight = 70; var eyeBrowsXL = 270; var eyeBrowsXR = 390; var eyeBrowsWidth = 90; var eyeBrowsHeight = 40; var eyebrowY = 235; var rEyebrows … <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/09\/11\/variable-faces-2\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> “Variable Faces”<\/span><\/a><\/p>\n","protected":false},"author":670,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[97,56],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/65702"}],"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\/670"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=65702"}],"version-history":[{"count":4,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/65702\/revisions"}],"predecessor-version":[{"id":66128,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/65702\/revisions\/66128"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=65702"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=65702"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=65702"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}