{"id":71621,"date":"2022-09-11T21:01:02","date_gmt":"2022-09-12T01:01:02","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/?p=71621"},"modified":"2022-09-11T21:01:02","modified_gmt":"2022-09-12T01:01:02","slug":"project-02-12","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/09\/11\/project-02-12\/","title":{"rendered":"Project-02"},"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>This is my variable face<\/p>\n\n<div><a class=\"p5_sketch_link\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/09\/sketch-236.js\" data-width=\"400\" data-height=\"600\">sketch<\/a><iframe src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/plugins\/p5-embedder\/p5_iframe.html\" class=\"p5_exampleFrame\" width=\"400\" height=\"600\"><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/ Michael\n\/\/ Section C\n\n\/\/Variables\n\/\/face\nvar faceWidth = 100;\nvar faceHeight = 100;\nvar faceround = 10\nvar randomSkin = 0\n\/\/background\nvar r = 140\nvar g = 200\nvar b = 230\n\/\/eye\nvar eyeBrow = 1\nvar browHeight = 10\nvar eyeSize = 20;\nvar pupilPos = 0\n\/\/moith\nvar mouthType = 1\nvar mouthLevel = 50\nvar noseType = 1\n\/\/hair\nhairType = 1\nstubble = 2\nhairColor = 0\n\nfunction setup() {\n    createCanvas(300, 300);\n}\n \nfunction draw() {\n    print (pupilPos.toString())\n    \/\/background color\n    background(r, g, b);\n\n    \/\/Eye Variables\n    \/\/use facewidth to determine the eye positions\n    var eyeLX = width \/ 2 - faceWidth * 0.2; \n    var eyeRX = width \/ 2 + faceWidth * 0.2;\n\n    \/\/hair color\n    \/\/Randomize hair color with different shades of grey\n    fill(hairColor)\n\n    \/\/hair back\n    \/\/Two different thicknesses of hair\n    \/\/Use FaceWidth and faceHeight to determine the hair thickness\n    if(hairType == 1){  \/\/Thick Hair\n        ellipse(width \/ 2, 1.15*height \/ 3, faceWidth*1.2,  faceHeight*1.2);\n        fill (r, g, b);\n        rect(0, height\/(faceHeight\/60), width, height)\n    } else if (hairType == 2) \/\/Thin hair\n        ellipse(width \/ 2, 1.15*height \/ 3, faceWidth*1.1,  faceHeight*1.1);\n        fill (r, g, b);\n        rect(0, height\/(faceHeight\/53), width, height)\n\n    \/\/skincolor\n    \/\/4 different skin types\n    \/\/predetermined skin colors\n    if (randomSkin == 0){\n        fill (255, 204, 153);\n    } else if (randomSkin == 1){\n        fill (226, 183, 132)\n    } else if (randomSkin == 2){\n        fill (191, 130, 70)\n    } else {\n        fill (192, 134, 79)\n    }   \n    \n    \/\/ears\n\n    ellipse(width\/2 - faceWidth\/2.4, 1.3*height \/ 3, faceHeight\/3, faceHeight\/3)\n    ellipse(width\/2 + faceWidth\/2.4, 1.3*height \/ 3, faceHeight\/3, faceHeight\/3)\n    fill(95, 44, 5)\n    ellipse(width\/2 - faceWidth\/2.2, 1.3*height \/ 3, faceHeight\/10, faceHeight\/4)\n    ellipse(width\/2 + faceWidth\/2.2, 1.3*height \/ 3, faceHeight\/10, faceHeight\/4)\n  \n    \/\/Skin Color \n    \/\/Randomize skin color \n    \/\/Fill the skin colors again due to the fill command in the ears\n    if (randomSkin == 0){\n        fill (255, 204, 153);\n    } else if (randomSkin == 1){\n        fill (226, 183, 132)\n    } else if (randomSkin == 2){\n        fill (191, 130, 70)\n    } else {\n        fill (192, 134, 79)\n    }  \n\n    \/\/neck\n    \/\/use facewidth to determin neck width\n    rect(eyeLX - faceWidth\/18, height\/2, faceWidth\/2, 70)\n\n    \/\/Face\n    \/\/Use to ellipses to draw the face\n    strokeWeight(0)\n    ellipse(width \/ 2, 1.15*height \/ 3, faceWidth,  faceHeight);\n    ellipse(width \/ 2, 1.45*height \/ 3, faceWidth\/1.25, faceHeight\/1.25)\n    fill(hairColor+30)\n\n    \/\/eyes\n    \/\/Use the eye positions variable to draw the eyes and the pupils\n    fill(255)\n    ellipse(eyeLX, 1.25*height \/ 3, eyeSize*1.3, eyeSize*1.3);\n    ellipse(eyeRX, 1.25* height \/ 3, eyeSize*1.3, eyeSize*1.3);\n    fill(0);\n    \/\/Use pupilPos to randomize the pupil position whenever mouse clicks\n    ellipse(eyeLX + eyeSize\/4 - eyeSize*pupilPos, 1.25*height \/ 3, eyeSize\/2, eyeSize\/2);\n    ellipse(eyeRX + eyeSize\/4 - eyeSize*pupilPos, 1.25*height \/ 3, eyeSize\/2, eyeSize\/2);\n    \n\n    \/\/eyebrows\n    \/\/two different eyebrows, straight and curve\n    if (eyeBrow == 1){ \/\/Curve\n        strokeWeight(5) \/\/use eyesize to determin eyebrow position\n        curve (eyeLX - eyeSize\/3, height\/2 - eyeSize\/1.5,\n               eyeLX - eyeSize\/3, 1.4*height\/3.2 - eyeSize\/1.5 - browHeight, \/\/browHeight to randomize brow when click\n               eyeLX + eyeSize\/3, 1.4*height\/3.2 - eyeSize\/1.5 - browHeight,\n               eyeLX + eyeSize\/3, height\/2 - eyeSize\/1.5)\n        curve (eyeRX - eyeSize\/3, height\/2 - eyeSize\/1.5,\n               eyeRX - eyeSize\/3, 1.4*height\/3.2 - eyeSize\/1.5 - browHeight, \n               eyeRX + eyeSize\/3, 1.4*height\/3.2 - eyeSize\/1.5 - browHeight,\n               eyeRX + eyeSize\/3, height\/2 - eyeSize\/1.5)\n        strokeWeight(0);\n    } if  (eyeBrow == 2){ \/\/straight\n        rect (eyeLX-eyeSize\/1.5 , 1.27*height \/ 3 - eyeSize\/1.5 - browHeight, eyeSize*1.2, eyeSize\/4)\n        rect (eyeRX-eyeSize\/1.8 , 1.27*height \/ 3 - eyeSize\/1.5 - browHeight, eyeSize*1.2, eyeSize\/4)\n    }\n\n    \/\/mouth\n    \/\/5 different types of mouths\n    \/\/use faceHeight and width to determine mouth position\n    if (mouthType &lt;= 2){ \/\/ Open Mouth\n        fill(255, 166, 193)\n        ellipse(width\/2, height\/2 + faceHeight\/mouthLevel, faceWidth\/3, faceHeight\/10)\n        fill(255)\n        ellipse(width\/2, height\/2.06 + faceHeight\/mouthLevel, faceWidth\/6, faceHeight\/20)\n    } else if (mouthType == 3){ \/\/Meh face No. 1\n        strokeWeight(5);\n         line(eyeLX, height\/2 + faceHeight\/mouthLevel, eyeRX, height*2.75\/5)\n        strokeWeight(0)\n    } else if (mouthType == 4){\/\/ Straight Face\n        strokeWeight(5);\n         line(eyeLX, height\/2 + faceHeight\/mouthLevel, eyeRX, height\/2 + faceHeight\/mouthLevel)\n        strokeWeight(0)\n    } else if (mouthType == 5){\/\/Meh face No.2\n        strokeWeight(5);\n         line(eyeLX, height*2.75\/5, eyeRX, height\/2 + faceHeight\/mouthLevel)\n        strokeWeight(0)\n    } else if(mouthType == 6) {\/\/Smile\n        strokeWeight(4)\n        noFill()\n        curve (eyeLX - eyeSize\/10, height\/2.7 - faceHeight\/20,\n               eyeLX - eyeSize\/10, 1.5*height\/3 - faceHeight\/50, \n               eyeRX + eyeSize\/10, 1.5*height\/3 - faceHeight\/50,\n               eyeRX + eyeSize\/10, height\/2.7 - faceHeight\/20)\n        strokeWeight(0)\n    }\n   \n    \/\/nose\n    \/\/two different types of noses\n    \/\/use faceheight and width to determine mouth position\n    if(noseType == 1) {\n        fill(95, 44, 5);\n        ellipse(width\/2, height\/2 - faceHeight\/5, faceWidth*0.05, faceHeight\/5)\n    } else if (noseType == 2) {\n        fill(95, 44, 5);\n        ellipse(width\/2, height\/2 - faceHeight\/10, faceWidth*0.1, faceWidth*0.1)\n    }\n\n}\n\n\nfunction mousePressed() {\n    \/\/ Randomize the variables when the use clicks their mouse\n    \/\/Background color, high rgb for faded colors\n    r = random (200, 250)\n    g = random (200, 250)\n    b = random (200, 250)\n    \/\/face\n    \/\/Max width less than max height\n    faceWidth = random(100, 120);\n    faceHeight = random(100, 150);\n    \/\/skin color\n    randomSkin = int(random (0, 4)) \n    \/\/eyes\n    eyeSize = random(20, 28);\n    browHeight = random(0, 10)\n    eyeBrow = int(random(1, 3))\n    pupilPos = random (0, 0.5)\n    \/\/mouth\n    mouthType = int(random(1, 7))\n    mouthLevel = random (6, 50)\n    \/\/hair\n    hairColor = random (0, 100)\n    stubble = int(random(0, 3))\n    hairType = int(random(1, 3))\n    \/\/nose\n    noseType = int(random(1, 3))\n}<\/code><\/pre><\/div><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>This is my variable face sketch \/\/ Michael \/\/ Section C \/\/Variables \/\/face var faceWidth = 100; var faceHeight = 100; var faceround = 10 var randomSkin = 0 \/\/background var r = 140 var g = 200 var b = 230 \/\/eye var eyeBrow = 1 var browHeight = 10 var eyeSize = 20; &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/09\/11\/project-02-12\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project-02&#8221;<\/span><\/a><\/p>\n","protected":false},"author":739,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[97,57],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/71621"}],"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\/739"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=71621"}],"version-history":[{"count":2,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/71621\/revisions"}],"predecessor-version":[{"id":71626,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/71621\/revisions\/71626"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=71621"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=71621"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=71621"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}