{"id":71225,"date":"2022-09-10T20:09:16","date_gmt":"2022-09-11T00:09:16","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/?p=71225"},"modified":"2022-09-10T20:09:16","modified_gmt":"2022-09-11T00:09:16","slug":"project-02-variable-faces-4","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/09\/10\/project-02-variable-faces-4\/","title":{"rendered":"Project-02: Variable Faces"},"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>My variable faces are all completely computer generated and unique. Every feature is drawn from a set of randomly generated variables. I like the variation in emotions they can express.   <\/p>\n\n\n\n<div><a class=\"p5_sketch_link\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/09\/sketch-181.js\" data-width=\"640\" data-height=\"480\">sketch<\/a><iframe src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/plugins\/p5-embedder\/p5_iframe.html\" class=\"p5_exampleFrame\" width=\"640\" height=\"480\"><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/ Evan Stuhlfire\n\/\/ estuhlfi, Section B\n\/\/ Project-02: Variable Faces; Face Variables\n\n\/\/ Declare global variables\n\n\n\/\/ variable controling head dimensions and shape\nvar headX = 0; \/\/ x value of head center\nvar headY = 0; \/\/ y value of head center\nvar minHead = 100;\nvar maxHeadW = 500; \/\/max head width\nvar maxHeadH = 420; \/\/ max head height\nvar headHeight = 300;\nvar headWidth = 350;\n\n\/\/ variables controling face dimensions and attributes\nvar eyeSize = 25;\nvar percentEyeW = 1; \/\/ value to adjust eye shape and position\nvar percentEyeH = 1; \/\/ value to adjust eye shape and position\nvar eyeVert = 2;\nvar lookAdjustLeft = .25; \/\/ Controls eye placement for look direction\nvar lookAdjustRight = .25;\nvar lookMax = .45;\n\n\/\/ variable to control nose\nvar nose1 = 1;\nvar nose2 = 1.1;\nvar nose3 = 1.1;\nvar nose4 = 1;\nvar noseEnd = 1;\nvar noseLeft1 = 1;\nvar noseLeft2 = .9;\nvar noseLeft2 = 1;\n\n\/\/ mouth variables\nvar noseMouthGap = 10;\nvar mouthStart = 1;\nvar mouth1 = 1.05;\nvar mouth2 = 1;\nvar mouthIncrease = 1.02;\n\n\/\/  color variables\nvar color1 = 0;\nvar color2 = 0;\nvar color3 = 0;\n\nfunction setup() {\n    createCanvas(640, 480);\n\n    \/\/ set head center\n    centerX = width\/2;\n    centerY = height\/2;\n\n    \/\/ get initial colors\n    getRandomColors();\n}\n\nfunction draw() {\n    var colorChange = .4; \/\/ factor to modify color\n\n    background(color1, color2, color3); \/\/ draw background from color variables\n\n    \/\/ calculate eyes\n    var eyeLeftX = centerX - headWidth * lookAdjustLeft; \/\/ x coordingate of left eye\n    \/\/ x coordinate of right eye, can look different directions\n    var eyeRightX = centerX + headWidth * lookAdjustRight; \n    var eyeHeight = min(eyeSize * percentEyeH, headHeight * .90);\n    var eyeWidth = eyeSize * percentEyeW;\n    var eyePositionY = height \/ eyeVert; \/\/ calculate vertical position of eyes \n\n    \n    \/\/ calculate pupils\n    var pupilSize = .2;\n    var pupilLook = 4;\n    var pupilX = eyeLeftX;\n    var pupilY = eyeRightX;\n\n    if (lookAdjustLeft &gt; lookAdjustRight){ \/\/ looking left move pupils left\n        pupilX -= pupilLook;\n        pupilY -= pupilLook;\n    } else { \/\/ looking right move pupils right\n        pupilX += pupilLook;\n        pupilY += pupilLook;\n    }\n\n    \/\/ variables for nose\n    var maxNose = .90;\n\n    var nose1X = (eyeLeftX + eyeRightX)\/2;\n    var nose1Y = eyePositionY; \n    if (lookAdjustLeft &gt; lookAdjustRight) { \n        \/\/ looking left point nose left\n        var nose2X = nose1X * noseLeft1;\n        var nose2Y= min(nose1Y * nose2, (centerY + headHeight\/2) * maxNose);\n        var nose3X = nose2X * noseLeft2;\n        var nose3Y= min(nose2Y * nose3, (centerY + headHeight\/2) * maxNose);\n        var nose4X= nose1X * noseLeft3;\n        var nose4Y= min(nose3Y * nose4, (centerY + headHeight\/2) * maxNose + noseMouthGap);\n    } else { \n        \/\/ looking right point nose right \n        var nose2X = nose1X * nose1;\n        var nose2Y= min(nose1Y * nose2, (centerY + headHeight\/2) * maxNose);\n        var nose3X = nose2X * nose3;\n        var nose3Y= min(nose2Y * nose3, (centerY + headHeight\/2) * maxNose);\n        var nose4X= nose1X * noseEnd;\n        var nose4Y= min(nose3Y * nose4, (centerY + headHeight\/2) * maxNose + noseMouthGap);   \n    }\n\n    \/\/ calculate mouth\n    var maxMouth = .98;\n    var mouth1X = centerX * mouthStart;\n    var mouth1Y = min(nose4Y * mouth1, (centerY + headHeight\/2) - noseMouthGap);\n    \/\/ keep mouth on face\n    if (headHeight &gt; headWidth){\n        mouth1X = centerX - noseMouthGap;\n    }\n    var mouth2X = mouth1X * mouthIncrease;\n    var mouth2Y = mouth1Y * mouth2;\n    var mouth3X = mouth2X * mouthIncrease;\n    var mouth3Y = mouth2Y;\n    var mouth4X = mouth3X * mouthIncrease;\n    var mouth4Y = mouth1Y;\n\n\n\n    \/\/ draw head\n    fill(color1 * colorChange, color2, color3);\n    ellipse(centerX, centerY, headWidth,  headHeight);\n\n    \/\/ draw eyes\n    fill(color1, color2 * colorChange, color3);\n    ellipse(eyeLeftX, eyePositionY, eyeWidth, eyeHeight);\n    ellipse(eyeRightX, eyePositionY, eyeWidth, eyeHeight);\n\n    \/\/ draw pupils\n    fill(10);\n    ellipse(pupilX, eyePositionY, eyeWidth * pupilSize, eyeHeight * pupilSize);\n    ellipse(pupilY, eyePositionY, eyeWidth * pupilSize, eyeHeight * pupilSize);\n\n    \/\/ draw mouth\n    beginShape();\n    curveVertex(mouth1X, mouth1Y);\n    curveVertex(mouth1X, mouth1Y);\n    curveVertex(mouth2X, mouth2Y);\n    curveVertex(mouth3X, mouth3Y);\n    curveVertex(mouth4X, mouth4Y);\n    curveVertex(mouth4X, mouth4Y);\n    endShape();\n\n    \/\/ draw nose \n    fill(color1 * colorChange, color2, color3);\n    beginShape();\n    curveVertex(nose1X, nose1Y);\n    curveVertex(nose1X, nose1Y);\n    curveVertex(nose2X, nose2Y);\n    curveVertex(nose3X, nose3Y);\n    curveVertex(nose4X, nose4Y);\n    curveVertex(nose4X, nose4Y);\n    endShape();\n}\n\nfunction mousePressed() {\n    \/\/ When the mouse is clicked random values are generated to control the \n    \/\/ dimensions, position, and color of a face\n\n    \/\/ randomly generate head value\n    headWidth = random(minHead, maxHeadW);\n    headHeight = random(minHead, maxHeadH);\n\n    \/\/ randomly generate eye values\n    eyeSize = headWidth * random(.1, .3);\n    percentEyeW = random(.5, 1); \n    percentEyeH = random(.5, 1);\n    eyeVert = random(2, 2.25); \/\/ vertical position of eyes\n    lookAdjustLeft = random(.01, lookMax);\n    lookAdjustRight = lookMax - lookAdjustLeft;\n\n    \/\/ generate nose values\n    nose1 = random(1, 1.1);\n    nose2 = random(1, 1.2);\n    nose3 = random(1.1, 1.15);\n    nose4 = random(.98, 1.05);\n    noseEnd = random(.95, 1.05);\n    noseLeft1 = random(.95, 1);\n    noseLeft2 = random(.85, 1);\n    noseLeft3 = random(1, 1.12);\n\n    \/\/ generate mouth values\n    mouthStart = random(.95, 1.05);\n    mouth1 = random(1.05, 1.2);\n    mouth2 = random(.98, 1.02);\n    mouthIncrease = random(1.02, 1.03);\n\n    \/\/ randomly generate a new color combination\n    getRandomColors();\n}\n\nfunction getRandomColors(){\n    \/\/ function generates a random number for color variables\n    color1 = random(80, 255); \n    color2 = random(80, 255);\n    color3 = random(80, 255);\n}\n\n\n<\/code><\/pre><\/div><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>My variable faces are all completely computer generated and unique. Every feature is drawn from a set of randomly generated variables. I like the variation in emotions they can express.<\/p>\n","protected":false},"author":760,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[97,56,1],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/71225"}],"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\/760"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=71225"}],"version-history":[{"count":2,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/71225\/revisions"}],"predecessor-version":[{"id":71233,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/71225\/revisions\/71233"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=71225"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=71225"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=71225"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}