{"id":65479,"date":"2021-09-11T16:08:08","date_gmt":"2021-09-11T20:08:08","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=65479"},"modified":"2021-09-11T16:12:50","modified_gmt":"2021-09-11T20:12:50","slug":"project-2-variable-faces-face-variables-2","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/09\/11\/project-2-variable-faces-face-variables-2\/","title":{"rendered":"Project 2- Variable Faces; Face Variables"},"content":{"rendered":"<!DOCTYPE html PUBLIC \"-\/\/W3C\/\/DTD HTML 4.0 Transitional\/\/EN\" \"http:\/\/www.w3.org\/TR\/REC-html40\/loose.dtd\">\n<html><body><pre class=\"wp-block-code\"><code>var eyeSize = 25;\nvar faceWidth = 150;\nvar faceHeight = 180;\nvar mouthWidth = 40;\nvar mouthHeight = 15;\nvar browWidth = 10;\nvar browHeight = 3;\nvar noseColor = 230; \n \nfunction setup() {\n    createCanvas(480, 640);\n}\n \nfunction draw() {\n    background(173,216,230);\n    fill(246,232,205);\n    ellipse(width \/ 2, height \/ 2, faceWidth,  faceHeight);\n    var eyeLX = width \/ 2 - faceWidth * 0.2;\n    var eyeRX = width \/ 2 + faceWidth * 0.2;\n    fill(0,100,0);\n    ellipse(eyeLX, height \/ 2, eyeSize, eyeSize);\n    fill(0,100,0);\n    ellipse(eyeRX, height \/ 2, eyeSize, eyeSize);\n    fill(199,54,59);\n    ellipse(width\/2, (height\/2+35), mouthWidth, mouthHeight);\n    var browY = height\/2 - 30;\n    fill(0);\n    rect(eyeLX-5,browY,browWidth, browHeight);\n    fill(0);\n    rect(eyeRX-5,browY,browWidth, browHeight);\n    fill(noseColor);\n    triangle(width\/2,height\/2+5,width\/2-8,height\/2+20, width\/2+8,height\/2+20)\n}\n \nfunction mousePressed() {\n    \/\/ when the user clicks, these variables are reassigned\n    \/\/ to random values within specified ranges. For example,\n    \/\/ 'faceWidth' gets a random value between 75 and 150.\n    faceWidth = random(75, 150);\n    faceHeight = random(100, 200);\n    eyeSize = random(10, 30);\n    mouthWidth = random(10,45);\n    mouthHeight = random(10,20);\n    browWidth = random (10,20);\n    browHeight = random (3,7);\n    noseColor = random (0,255);\n}<\/code><\/pre>\n\n\n\n<p>The face that I created varies the mouth shape, eye size, and face shape, brow shape and nose shade on each click. <\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>The face that I created varies the mouth shape, eye size, and face shape, brow shape and nose shade on each click.<\/p>\n","protected":false},"author":680,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[97,57,1],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/65479"}],"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\/680"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=65479"}],"version-history":[{"count":2,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/65479\/revisions"}],"predecessor-version":[{"id":65487,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/65479\/revisions\/65487"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=65479"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=65479"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=65479"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}