{"id":65723,"date":"2021-09-12T00:21:21","date_gmt":"2021-09-12T04:21:21","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=65723"},"modified":"2021-09-23T20:22:03","modified_gmt":"2021-09-24T00:22:03","slug":"project-02-variable-face-4","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/09\/12\/project-02-variable-face-4\/","title":{"rendered":"Project-02: Variable-Face"},"content":{"rendered":"\n

My Project<\/a><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/sets up ability to make different backgrounds;\nvar backgroundSelector = 1;\n\/\/global variables for background 1 (morning) and 2 (night);\nvar cloudX1 = 100;\nvar cloudX2 = 300;\nvar cloudX3 = 180;\nvar cloudX4 = 220;\n\/\/sets up global variables for backround 2 (night);\nvar saucerX = 60;\nvar saucerY = 100;\nvar dir = 1;\nvar dirSaucer = 1;\n\/\/global variables for background 3 (evening);\nvar background3r = 231;\nvar background3g = 148;\nvar background3b = 20;\nvar sunY = 80;\nvar moonY = 720;\n\/\/sets up ability to make different face shapes;\nvar face = 1;\n\/\/sets up global variables for face shapes;\nvar rectWidth = 150;\nvar rectHeight = 250;\nvar circleRad = 300;\nvar ellipseWidth = 260;\nvar ellipseHeight = 320;\n\/\/sets up ability to use different Skin Tones;\nvar skinPreset = 0;\n\/\/sets up global variables for skin color;\nvar skinR = 224;\nvar skinG = 172;\nvar skinB = 105;\n\/\/sets up variables for facial features;\n\/\/creates initial x-coordinates of eyes that;\n\/\/fits all initial face shapes;\nvar leftEye = 195;\nvar rightEye = 285;\n\/\/sets up ability to have different Eye Colors;\nvar eyeColorPreset = 1;\n\/\/sets up global variables for Eye Colors;\nvar eyeColorR = 99;\nvar eyeColorG = 78;\nvar eyeColorB = 52;\n\/\/sets up global variables for noses;\nvar noseX2 = 220;\nvar noseY1 = 240;\nvar noseY2 = 340;\n\/\/sets up smile size;\nvar smileW = 20;\nvar smileH = 30;\n\n\nfunction setup() {\n \/\/I went with the Portrait Dimensions;\n createCanvas(480, 640);\n background(220);\n text(\"p5.js vers 0.9.0 test.\", 10, 15);\n}\n\nfunction draw() {\n \n \/\/changes the background between morning (1), night(2), and sunset(3 or almost 3);\n \/\/morning background;\n if (backgroundSelector <= 1){\n background(135, 206, 235);\n noStroke();\n \/\/creates clouds;\n fill(243, 242, 231);\n rect(cloudX1, 120, 60, 30);\n ellipse(cloudX1+30, 135, 80, 30);\n ellipse(cloudX1+17, 135, 30, 60);\n ellipse(cloudX1+42, 135, 30, 60);\n rect(cloudX2, 90, 60, 30);\n ellipse(cloudX2+30, 105, 80, 30);\n ellipse(cloudX2+17, 105, 30, 60);\n ellipse(cloudX2+42, 105, 30, 60);\n rect(cloudX3, 60, 60, 30);\n ellipse(cloudX3+30, 75, 80, 30);\n ellipse(cloudX3+17, 75, 30, 60);\n ellipse(cloudX3+42, 75, 30, 60);\n rect(cloudX4, 130, 60, 30);\n ellipse(cloudX4+30, 145, 80, 30);\n ellipse(cloudX4+17, 145, 30, 60);\n ellipse(cloudX4+42, 145, 30, 60);\n \/\/causes the Clouds to move;\n cloudX1 = cloudX1 - 1.5;\n if (cloudX1 < -width){\n cloudX1 = width;\n }\n cloudX2 = cloudX2 - 1.5;\n if (cloudX2 < -width){\n cloudX2 = width;\n }\n cloudX3 = cloudX3 - 1;\n if (cloudX3 < -width){\n cloudX3 = width;\n }\n cloudX4 = cloudX4 - 1.2;\n if (cloudX4 < -width){\n cloudX4 = width;\n }\n \/\/creates sun;\n fill(252, 290, 77);\n circle(80, 80, 80);\n }\n \/\/night background;\n else if (backgroundSelector > 1 & backgroundSelector <= 2){\n background(76, 64, 142);\n noStroke();\n \/\/creates moon\n fill(244, 246, 240);\n circle(400, 80, 80);\n \/\/creates saucer;\n fill(180, 229, 175);\n rect(saucerX, saucerY, 70, 20);\n fill(180);\n rect(saucerX+15, saucerY-10, 40, 10);\n rect(saucerX+15, saucerY+10, 40, 10);\n fill(180, 20, 30);\n rect(saucerX+5, saucerY+5, 5, 5);\n fill(20, 30, 180);\n rect(saucerX+60, saucerY+5, 5, 5);\n fill(224, 55, 45);\n quad(saucerX, saucerY+20, saucerX+10, saucerY+30, saucerX+60, saucerY+30, saucerX+70, saucerY+20);\n \/\/causes saucer to move;\n saucerX = saucerX + (dir*1.7);\n if (saucerX > width){\n dir = -dir;\n }\n if (saucerX < -width){\n dir = -dir;\n }\n \/\/causes the Saucer to move up and down cartoonishly;\n saucerY = saucerY - (dirSaucer*0.5);\n if (saucerY < 80){\n dirSaucer = -dirSaucer;\n }\n else if (saucerY > 120){\n dirSaucer = -dirSaucer;\n }\n \/\/adds clouds;\n fill(243, 242, 231);\n rect(cloudX1, 120, 60, 30);\n ellipse(cloudX1+30, 135, 80, 30);\n ellipse(cloudX1+17, 135, 30, 60);\n ellipse(cloudX1+42, 135, 30, 60);\n rect(cloudX3, 60, 60, 30);\n ellipse(cloudX3+30, 75, 80, 30);\n ellipse(cloudX3+17, 75, 30, 60);\n ellipse(cloudX3+42, 75, 30, 60);\n \/\/causes clouds to move;\n cloudX1 = cloudX1 - 1.5;\n if (cloudX1 < -width){\n cloudX1 = width;\n }\n cloudX3 = cloudX3 - 1;\n if (cloudX3 < -width){\n cloudX3 = width;\n }\n }\n \/\/evening background;\n else if (backgroundSelector > 2 & backgroundSelector < 3){\n background(background3r, background3g, background3b);\n noStroke();\n \/\/changes background to night and causes sun to go down;\n if (background3r != 76){\n background3r = background3r-1;\n }\n if (background3g != 64){\n background3g = background3g-1;\n }\n if (background3b != 142){\n background3b = background3b+1;\n }\n fill(252, 290, 77);\n circle(80, sunY, 80);\n if (sunY != 720){\n sunY = sunY + 4;\n }\n fill(244, 246, 240);\n circle(400, moonY, 80);\n if (moonY != 80){\n moonY = moonY - 4;\n }\n }\n \/\/creates different skinPresets;\n if (skinPreset <= 1){\n skinR = 224;\n skinG = 172;\n skinB = 105;\n }\n else if (skinPreset > 1 & skinPreset <= 2) {\n skinR = 198;\n skinG = 134;\n skinB = 66;\n }\n else if (skinPreset > 2 & skinPreset <= 3) {\n skinR = 141;\n skinG = 85;\n skinB = 36;\n }\n else if (skinPreset > 3 & skinPreset <= 4) {\n skinR = 255;\n skinG = 219;\n skinB = 172;\n }\n \/\/creates different eye colors;\n if (eyeColorPreset <= 1){\n eyeColorR = 99;\n eyeColorG = 78;\n eyeColorB = 52;\n }\n else if (eyeColorPreset > 1 & eyeColorPreset <= 2){\n eyeColorR = 46;\n eyeColorG = 83;\n eyeColorB = 111;\n }\n else if (eyeColorPreset > 2 & eyeColorPreset <= 3){\n eyeColorR = 61;\n eyeColorG = 103;\n eyeColorB = 29;\n }\n else if (eyeColorPreset > 3 & eyeColorPreset <= 4){\n eyeColorR = 28;\n eyeColorG = 120;\n eyeColorB = 71;\n }\n else if (eyeColorPreset > 4){\n eyeColorR = 73;\n eyeColorG = 118;\n eyeColorB = 101;\n }\n \/\/creates different faceShapes and by extension, the faces;\n \/\/each faceShape will also have features that are specific to it;\n \/\/rectangle faceShape;\n if (face <= 1){\n fill(skinR, skinG, skinB);\n stroke(40);\n rect( ((width\/2) - (rectWidth\/2)), ((height\/2) - (rectHeight\/2) + 30), rectWidth, rectHeight);\n \/\/creates eyes;\n fill(230);\n leftEye = ( (width\/2) - (rectWidth\/2) + 30 );\n rightEye = ( (width\/2) + (rectWidth\/2) - 30 );\n circle(leftEye, 260, 40);\n circle(rightEye, 260, 40);\n fill(eyeColorR, eyeColorG, eyeColorB);\n circle(leftEye, 260, 20);\n circle(rightEye, 260, 20);\n \/\/creates nose;\n stroke(20);\n line(240, noseY1, noseX2, noseY2);\n line(noseX2, noseY2, 240, noseY2);\n \/\/creates smile;\n noFill();\n arc(200, 430, smileH, smileW, HALF_PI, PI);\n }\n \/\/circle faceShape;\n else if (face > 1 & face <= 2){\n fill(skinR, skinG, skinB);\n stroke(40);\n circle(240, 380, circleRad);\n \/\/creates eyes;\n fill(230);\n leftEye = ( (width\/2) - (rectWidth\/2) + 30 );\n rightEye = ( (width\/2) + (rectWidth\/2) - 30 );\n circle(leftEye, 280, 40);\n circle(rightEye, 280, 40);\n fill(eyeColorR, eyeColorG, eyeColorB);\n circle(leftEye, 280, 20);\n circle(rightEye, 280, 20);\n \/\/creates nose;\n stroke(20);\n line(240, noseY1, noseX2, noseY2);\n line(noseX2, noseY2, 240, noseY2);\n \/\/creates smile;\n noFill();\n arc(200, 430, smileW, smileH, HALF_PI, PI);\n }\n \/\/ellipse faceShape;\n else if (face > 2 & face < 3){\n fill(skinR, skinG, skinB);\n stroke(40);\n ellipse(240, 380, ellipseWidth, ellipseHeight);\n \/\/creates eyes\n fill(230);\n leftEye = ( (width\/2) - (rectWidth\/2) + 30 );\n rightEye = ( (width\/2) + (rectWidth\/2) - 30 );\n circle(leftEye, 260, 40);\n circle(rightEye, 260, 40);\n fill(eyeColorR, eyeColorG, eyeColorB);\n circle(leftEye, 260, 20);\n circle(rightEye, 260, 20);\n \/\/creates nose;\n stroke(20);\n line(240, noseY1, noseX2, noseY2);\n line(noseX2, noseY2, 240, noseY2);\n \/\/creates smile;\n noFill();\n arc(200, 430, smileH, smileW, HALF_PI, PI);\n }\n \/\/creates pictureframe-like border;\n fill(160, 82, 45);\n stroke(160, 82, 45);\n rect(0, 0, 480, 10);\n rect(0, 630, 480, 10);\n rect(0, 10, 10, 620);\n rect(470, 10, 10, 620);\n}\n\nfunction mousePressed(){\n \/\/randomly determines background, faceShape, skinPresets, and eyeColors;\n \/\/also randomly determines faceShapeSize, Nose Size (through Coordinates);\n backgroundSelector = random(3);\n face = random(3);\n skinPreset = random(4);\n eyeColorPreset = random(5);\n circleRad = random(300, 420);\n ellipseWidth = (260, 310);\n ellipseHeight = (320, 400);\n rectWidth = random(150, 230);\n rectHeight = random(250, 330);\n noseX2 = random(180,230);\n noseY1 = random(240, 300);\n noseY2 = random(320, 420);\n smileW = random(20, 80);\n smileH = random(30, 50);\n\n \/\/resets background 3 (evening) to initial conditions;\n background3r = 231;\n background3g = 148;\n background3b = 20;\n sunY = 80;\n moonY = 720;\n}\n\n<\/code><\/pre><\/p>\n\n\n\n<\/p>\n\n\n\n<\/p>\n\n\n\nI created this with about 8 hours of work. I had a lot of fun. However, the WordPress Posting was terrible.<\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"My Project \/\/sets up ability to make different backgrounds; var backgroundSelector = 1; \/\/global variables for background 1 (morning) and 2 (night); var cloudX1 = 100; var cloudX2 = 300; var cloudX3 = 180; var cloudX4 = 220; \/\/sets up global variables for backround 2 (night); var saucerX = 60; var saucerY = 100; var … <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/09\/12\/project-02-variable-face-4\/\" class=\"more-link\">Continue reading “Project-02: Variable-Face”<\/span><\/a><\/p>\n","protected":false},"author":675,"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\/65723"}],"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\/675"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=65723"}],"version-history":[{"count":8,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/65723\/revisions"}],"predecessor-version":[{"id":66350,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/65723\/revisions\/66350"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=65723"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=65723"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=65723"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}