{"id":71301,"date":"2022-09-10T22:10:10","date_gmt":"2022-09-11T02:10:10","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/?p=71301"},"modified":"2022-09-10T23:12:14","modified_gmt":"2022-09-11T03:12:14","slug":"71301","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/09\/10\/71301\/","title":{"rendered":"Project-02: 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><p>This project displays monkey&rsquo;s emotions and also uses animations like the monkey&rsquo;s eyes shaking and the monkey shedding tears.<\/p>\n\n\n\n<div class=\"wp-block-file\"><a class=\"p5-embed' data-width=\" data-height=\"640\" id=\"wp-block-file--media-02195561-5160-4a3d-8c41-452effc664d0\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/09\/sketch-193.js\">sketch<\/a><\/div>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"780\" height=\"1024\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/09\/IMG_1080-780x1024.jpg\" alt=\"\" class=\"wp-image-71340\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/09\/IMG_1080-780x1024.jpg 780w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/09\/IMG_1080-229x300.jpg 229w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/09\/IMG_1080-768x1008.jpg 768w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/09\/IMG_1080-1170x1536.jpg 1170w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/09\/IMG_1080-1200x1575.jpg 1200w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/09\/IMG_1080.jpg 1367w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px\"><figcaption>Ideation<\/figcaption><\/figure><figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"769\" height=\"1024\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/09\/Screen-Shot-2022-09-10-at-10.41.04-PM-769x1024.png\" alt=\"\" class=\"wp-image-71346\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/09\/Screen-Shot-2022-09-10-at-10.41.04-PM-769x1024.png 769w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/09\/Screen-Shot-2022-09-10-at-10.41.04-PM-225x300.png 225w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/09\/Screen-Shot-2022-09-10-at-10.41.04-PM-768x1022.png 768w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/09\/Screen-Shot-2022-09-10-at-10.41.04-PM.png 948w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px\"><\/figure><pre class=\"wp-block-code\"><code>\/\/Alicia Kim\n\/\/Section B\n\n<pre lang=\"&rdquo;javascript&rdquo;\">var w = 26+(1\/3);\nvar h = 26+(1\/3);\nvar eyeWidth = 52+(2\/3)\nvar eyeHeight =79\nvar v= 1\nvar r=255\nvar g=223\nvar b= 196\nvar change =0\nvar tear=0\nvar eyew=0\nvar eyeh=0\n\n\nfunction setup() {\n    createCanvas(480, 640);\n}\n\nfunction draw() {\n    \/\/ background(180);\n\/\/normal happy\n    if (v==1){\n    tear=0\n    background(245,245,220);\/\/ pastel yellow\n    \/\/ears\n        fill(255,223,196); \/\/skin\n        ellipse(3.7*w, 11*h, 4*w, 3*h);\n        ellipse(14.2*w,11*h, 4*w, 3*h);\n\n    \/\/inner ears \/\/pink\n        fill(222,165,164);\n        ellipse(4*w, 11.2*h, 2*w, 2*h);\n        ellipse(14*w,11.2*h, 2*w, 2*h);\n        r=255;\n        g=223;\n        b=196;\n    }\n\/\/surprised\n    else if (v==2){\n        background(153,153,204);\/\/ purple\n    \/\/ears\n        fill(255,223,196); \/\/skin\n        ellipse(3.7*w, 11*h, 6*w, 1.5*3*h);\n        ellipse(14.2*w,11*h, 6*w, 1.5*3*h);\n\n    \/\/inner ears \/\/pink\n        fill(222,165,164);\n        ellipse(4*w, 11.2*h, 3*w, 3*h);\n        ellipse(14*w,11.2*h, 3*w, 3*h);\n        r=255;\n        g=223;\n        b=196;\n\n    }\n\/\/ shy\n    else if (v==3){\n        background(250,218,221); \/\/shy pink\n    \/\/ears\n        fill(255,204,203); \/\/baby pink\n        ellipse(3.7*w, 11*h, 4*w, 3*h);\n        ellipse(14.2*w,11*h, 4*w, 3*h);\n\n    \/\/inner ears \/\/pink\n        fill(222,165,164);\n        ellipse(4*w, 11.2*h, 2*w, 2*h);\n        ellipse(14*w,11.2*h, 2*w, 2*h);\n\n        r=252;\n        g=202;\n        b=191;\n\n    }\n\/\/ sad\n    else if (v==4){\n        background(100);\n    \/\/ears\n        fill(255,223,196); \/\/skin\n        ellipse(3.7*w, 11*h, 4*w, 3*h);\n        ellipse(14.2*w,11*h, 4*w, 3*h);\n\n    \/\/inner ears \/\/pink\n        fill(222,165,164);\n        ellipse(4*w, 11.2*h, 2*w, 2*h);\n        ellipse(14*w,11.2*h, 2*w, 2*h);\n\n        r=255;\n        g=223;\n        b=196;\n\n    }\n\n\/\/face outline\n    strokeWeight(1);\n    fill(155,103,60);\n    beginShape();\n  \n    curveVertex(7*w,2*h);\n    curveVertex(7*w,2*h);\n    curveVertex(8*w,4.5*h);\n    curveVertex(10*w,4.6*h);\n    curveVertex(13*w,5*h);\n    curveVertex(15.5*w,7*h);\n    curveVertex(14*w,11*h);\n    curveVertex(16*w,14*h);\n    curveVertex(13*w,16*h);\n    curveVertex(9.5*w,16.5*h);\n    curveVertex(5*w,16*h);\n    curveVertex(2*w,14*h);\n    curveVertex(4*w,11*h);\n    curveVertex(2.8*w,8.5*h);\n    curveVertex(3*w,6*h);\n    curveVertex(5*w,4.5*h);\n    curveVertex(5.5*w,2.5*h);\n    curveVertex(6.5*w,4.5*h);\n    curveVertex(7*w,2*h);\n    curveVertex(7*w,2*h);\n    endShape();   \n\n\n\/\/inner face outline\n    strokeWeight(1);\n    fill(r,g,b);\n    beginShape();\n    curveVertex(9.5*w,8*h);\n\n    curveVertex(9.5*w,8*h);\n    curveVertex(11.3*w,7*h);\n    curveVertex(13.3*w,8.5*h);\n    curveVertex(12.8*w,12.5*h);\n    curveVertex(14*w,14*h);\n    curveVertex(12.5*w,16*h);\n    curveVertex(5.7*w,15.9*h);\n    curveVertex(4.4*w,14*h);\n\n    curveVertex(5.5*w,12.5*h);\n\n    curveVertex(5*w,8.5*h);\n    curveVertex(7*w,7*h);\n    curveVertex(9.5*w,8*h);\n\n    curveVertex(9.5*w,8*h);\n    endShape();\n\n\/\/normal happy\n    if (v==1){\n        eyeh=0\n        eyew=0\n        \/\/eyes\n        fill (255,255,255); \/\/white\n        ellipse(7.5*w,11.2*h, eyeWidth, eyeHeight);\n        ellipse(11*w, 11.2*h, eyeWidth, eyeHeight);\n\n        \/\/mouth\n        fill(255,120,144); \/\/dark pink\n        arc (9.25*w, 15*h, 2*w,1.5*h , 0, PI, CHORD);\n\n        \/\/blush\n        fill(222,165,164); \/\/pink\n        ellipse(7.1*w,14.2*h,1*w,0.5*h);\n        ellipse(11.4*w,14.2*h,1*w,0.5*h);\n\n        \/\/ inner eyes\n        fill(0,0,0);\n        ellipse(7.8*w, 11.5*h, 0.5*eyeWidth, (2\/3)*eyeHeight);\n        ellipse(10.7*w, 11.5*h, 0.5*eyeWidth, (2\/3)*eyeHeight);\n\n        \/\/nose\n        fill(0,0,0);\n        ellipse(9*w, 13.5*h, 0.3*w, 0.5*h);\n        ellipse(9.5*w, 13.5*h, 0.3*w, 0.5*h);\n\n    }\n\/\/surprised\n    else if (v==2){\n        \/\/eyes\n        fill (217,33,33); \/\/red\n        ellipse(7.5*w,11.2*h, eyeWidth*1.5, eyeHeight*1.5);\n        ellipse(11*w, 11.2*h, eyeWidth*1.5, eyeHeight*1.5);\n\n        \/\/mouth\n        fill(255,120,144); \/\/dark pink\n        arc (9.25*w, 15*h, 4.5*w,3*h , 0, PI, CHORD);\n\n        \/\/ inner eyes\n        \/\/ fill(0,0,0);\n        \/\/ ellipse(7.8*w, 11.5*h, eyeWidth, (4\/3)*eyeHeight);\n        \/\/ ellipse(10.7*w, 11.5*h, eyeWidth, (4\/3)*eyeHeight);\n\n        fill(0,0,0);\n        if (eyew&lt;eyeWidth){\n            eyew+=.4\n        }\n        \n        if (eyeh&lt;eyeHeight){\n            eyeh+=.4\n        }\n        ellipse(7.8*w, 11.5*h, eyew, eyeh);\n        ellipse(10.7*w, 11.5*h, eyew, eyeh);\n        \n        \/\/nose\n        fill(0,0,0); \/\/black\n        ellipse(8.9*w, 13.5*h, 0.7*w, 1*h);\n        ellipse(9.7*w, 13.5*h, 0.7*w, 1*h);\n    }\n\n\/\/shy\n    else if (v==3){\n        \/\/eyes\n        fill (255,255,255); \/\/white\n        ellipse(7.5*w,11.2*h, eyeWidth, eyeHeight);\n        ellipse(11*w, 11.2*h, eyeWidth, eyeHeight);\n\n        \/\/heart eyes\n\n        \/\/mouth\n        fill(255,120,144); \/\/dark pink\n        arc (9.25*w, 15*h, 2*w,1.5*h , 0, PI, CHORD);\n\n        \/\/blush\n        fill(255,204,203); \/\/baby pink\n        ellipse(7.1*w,14.2*h,3*w,1.5*h);\n        ellipse(11.4*w,14.2*h,3*w,1.5*h);\n\n        \/\/ inner eyes\n        fill(0,0,0);\n        if (change&gt;7){\n            change=-2\n        }\n        else if (change&lt;=-10){\n            change=2\n        }\n        else {\n            change+=0.5\n        }\n\n        ellipse(7.8*w+change, 11.5*h, 0.5*eyeWidth, (2\/3)*eyeHeight);\n        ellipse(10.7*w+change, 11.5*h, 0.5*eyeWidth, (2\/3)*eyeHeight);\n\n        \/\/nose\n        fill(0,0,0);\n        ellipse(9*w, 13.5*h, 0.3*w, 0.5*h);\n        ellipse(9.5*w, 13.5*h, 0.3*w, 0.5*h);\n    }\n\/\/sad\n    else if (v==4){\n        \/\/eyes\n        fill (0,255,255); \/\/cyan\n        ellipse(7.5*w,11.2*h, eyeWidth, eyeHeight);\n        ellipse(11*w, 11.2*h, eyeWidth, eyeHeight);\n\n        \/\/mouth\n        fill(255,120,144); \/\/dark pink\n        arc (9.25*w, 15*h, 2*w,1.5*h , PI, 2*PI, CHORD);\n\n        \/\/ inner eyes\n        fill(0,0,0);\n        ellipse(7.8*w, 11.5*h, 0.3*eyeWidth, (2\/3)*eyeHeight);\n        ellipse(10.7*w, 11.5*h, 0.3*eyeWidth, (2\/3)*eyeHeight);\n\n        \/\/nose\n        fill(0,0,0);\n        ellipse(9*w, 13.5*h, 0.3*w, 0.5*h);\n        ellipse(9.5*w, 13.5*h, 0.3*w, 0.5*h);\n        \/\/tears\n\n        tear+=2\n        fill (0,255,255); \/\/cyan\n        ellipse(11*w, 13*h+tear, 0.1*eyeWidth, 0.1*eyeHeight);\n        ellipse(11*w, 13.5*h+tear, 0.1*eyeWidth, 0.1*eyeHeight);\n        ellipse(11*w, 14*h+tear, 0.1*eyeWidth, 0.1*eyeHeight);\n        ellipse(11*w, 12.5*h+tear, 0.1*eyeWidth, 0.1*eyeHeight);\n        ellipse(7.5*w, 13*h+tear, 0.1*eyeWidth, 0.1*eyeHeight);\n        ellipse(7.5*w, 13.5*h+tear, 0.1*eyeWidth, 0.1*eyeHeight);\n        ellipse(7.5*w, 14*h+tear, 0.1*eyeWidth, 0.1*eyeHeight);\n        ellipse(7.5*w, 12.5*h+tear, 0.1*eyeWidth, 0.1*eyeHeight);\n\n    }\n   \n   \n\n\n\n\n\n\n \n }\n function mousePressed(){\n   \n    v+=1;\n    if (v&gt;4){\n        v=1;\n    }\n\n    }   \n<\/pre>.\n<\/code><\/pre><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>This project displays monkey&rsquo;s emotions and also uses animations like the monkey&rsquo;s eyes shaking and the monkey shedding tears. sketch<\/p>\n","protected":false},"author":726,"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\/f2022\/wp-json\/wp\/v2\/posts\/71301"}],"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\/726"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=71301"}],"version-history":[{"count":9,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/71301\/revisions"}],"predecessor-version":[{"id":71398,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/71301\/revisions\/71398"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=71301"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=71301"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=71301"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}