{"id":71616,"date":"2022-09-11T20:59:38","date_gmt":"2022-09-12T00:59:38","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/?p=71616"},"modified":"2022-09-11T21:00:44","modified_gmt":"2022-09-12T01:00:44","slug":"project-02-11","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/09\/11\/project-02-11\/","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><div class=\"wp-block-file\"><a id=\"wp-block-file--media-95eb205b-4f9b-4c52-99a9-131c97a2ff9b\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/09\/sketch-237.js\">sketch<\/a><\/div>\n\n\n<div><a class=\"p5_sketch_link\" data-width=\"640\" data-height=\"480\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/09\/sketch-237.js\">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\">\/\/ for my design, i tried to move the eye within the face and all the other sense organs go along with it.\n\/\/ also, the eye ball move within the eye socket by itself. therefore, this people can look upwards, downwards, look to the left or to the right.\n\/\/ in addition, the mouth also change the radian by itself.\n\/\/ by having these, it can create a series of variation for the face.\nvar eyeSize = 30;\nvar faceWidth = 300;\nvar faceHeight = 200;\n\/\/variables for eyes\nvar eyeWidthVariation = 20;\nvar eyeHeightVariation = 10;\n\/\/variables for mouth\nvar mouthWidthShift = 10;\nvar mouthHeightShift = 15;\n\/\/color\nvar r = 243;\nvar g = 197;\nvar b = 194;\n\/\/eyeball movement\nvar movementX = 10;\nvar movementY = 10;\n\/\/eyebrow movement\nvar eyebrowChangeL = 5\nvar eyebrowChangeR = 5\n\nfunction setup() {\n    createCanvas(640, 480);\n}\n\nfunction draw(){\n    background(249, 233, 211);\n    \/\/face\n    noStroke();\n    fill(r, g, b);\n    ellipse(width \/ 2, height \/ 2, faceWidth, faceHeight);\n    \n    \/\/hair\n    fill(r-20,g-20,b+30);\n    rect(width\/2- faceWidth\/3, height\/2-faceHeight\/2-10,faceWidth\/1.5,faceHeight\/6)\n    \n    \/\/noise\n    noStroke();\n    fill(r-50, g-50, b-50);\n    ellipse(width \/ 2-eyeWidthVariation, height\/2+2*eyeHeightVariation, 20, 30);\n    \n    \/\/eyes socket\n    noStroke();\n    var eyeLX = width \/ 2 - faceWidth * 0.25 - eyeWidthVariation;\n    var eyeRX = width \/ 2 + faceWidth * 0.25 - eyeWidthVariation;\n    \n    \/\/blush left\n    fill(255,171,171);\n    ellipse(eyeLX, height\/2+eyeHeightVariation+eyeSize\/2+10,20+eyeSize*0.5,eyeSize*0.4);\n    \/\/blush right\n    ellipse(eyeRX, height\/2+eyeHeightVariation+eyeSize\/2+10,20+eyeSize*0.5,eyeSize*0.4);\n    fill(r+50, g+50, b+50);\n    ellipse(eyeLX, height \/ 2 + eyeHeightVariation, eyeSize, eyeSize);\n    ellipse(eyeRX, height \/ 2 + eyeHeightVariation, eyeSize, eyeSize);\n    \n    \/\/eyeball\n    fill(0);\n    ellipse(eyeLX+movementX, height\/2 +eyeHeightVariation+movementY, eyeSize \/ 2, eyeSize \/ 2);\n    ellipse(eyeRX+movementX, height\/2 +eyeHeightVariation+movementY, eyeSize \/ 2, eyeSize \/ 2);\n    \n    \/\/eyebrow left\n    fill(0)\n    rect(eyeLX- eyeSize\/2, height\/2+ eyeHeightVariation- eyeSize\/2-10-eyebrowChangeL,eyeSize,eyeHeightVariation\/2);\n    \/\/eyebrow right\n    rect(eyeRX- eyeSize\/2, height\/2+ eyeHeightVariation- eyeSize\/2-10+movementY-eyebrowChangeR,eyeSize,eyeHeightVariation\/2);\n    \n    \/\/mouth\n    noFill();\n    stroke(r-35, g-35, b-35);\n    strokeWeight(6);\n    beginShape();\n    curveVertex(width\/2 - mouthWidthShift*3-eyeWidthVariation, height \/ 2 + faceHeight * 0.38 - mouthHeightShift*7);\n    curveVertex(width\/2 - mouthWidthShift*2-eyeWidthVariation, height \/ 2 + faceHeight * 0.38 - mouthHeightShift*1.3);\n    curveVertex(width\/2-eyeWidthVariation, height \/ 2 + faceHeight * 0.40);\n    curveVertex(width\/2 + mouthWidthShift*2-eyeWidthVariation, height \/ 2 + faceHeight * 0.38 - mouthHeightShift*1.3);\n    curveVertex(width\/2 + mouthWidthShift*3-eyeWidthVariation, height \/ 2 + faceHeight * 0.38 - mouthHeightShift*7);\n    endShape();\n}\n\nfunction mousePressed() {\n    \/\/face random\n    faceWidth = random(200, 600);\n    faceHeight = random(200, 460);\n    \/\/eye random\n    eyeSize = random(30, 80);\n    eyeWidthVariation = random(-50, 50);\n    eyeHeightVariation = random(3, 25);\n    \/\/mouth random\n    mouthWidthShift = random(-20, 20);\n    mouthHeightShift = random(-20, 20);\n    \/\/color random\n    r = random(51, 204);\n    g = random(51, 204);\n    b = random(51, 204);\n    \/\/eyeball random\n    movementX = random(-eyeSize\/4,eyeSize\/4);\n    movementY = random(-eyeSize\/4,eyeSize\/4);\n    \/\/eyebrown random\n    eyebrowChangeL = random(0,30);\n    eyebrowChangeR = random(0,30)\n}<\/code><\/pre><\/div><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>sketch \/\/ for my design, i tried to move the eye within the face and all the other sense organs go along with it. \/\/ also, the eye ball move within the eye socket by itself. therefore, this people can look upwards, downwards, look to the left or to the right. \/\/ in addition, the &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/09\/11\/project-02-11\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project 02&#8221;<\/span><\/a><\/p>\n","protected":false},"author":778,"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\/71616"}],"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\/778"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=71616"}],"version-history":[{"count":2,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/71616\/revisions"}],"predecessor-version":[{"id":71627,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/71616\/revisions\/71627"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=71616"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=71616"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=71616"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}