{"id":71117,"date":"2022-09-10T17:48:06","date_gmt":"2022-09-10T21:48:06","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/?p=71117"},"modified":"2022-09-10T17:48:06","modified_gmt":"2022-09-10T21:48:06","slug":"variable-face-project-02","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/09\/10\/variable-face-project-02\/","title":{"rendered":"Variable Face 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>For this project, I wanted to make something cuter than last week&rsquo;s face, so I mapped everything out in illustrator and then translated the shapes to js. This workflow was much more efficient and allowed me to create cartoon facial expressions since I wasn&rsquo;t focused on generating the coordinates or RGB codes for every shape. Unfortunately wordpress cuts a bit of the right side off \ud83d\ude41 <\/p>\n<div><a class=\"p5_sketch_link\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/09\/sketch-157.js\" data-width=\"680\" data-height=\"500\">sketch<\/a><iframe src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/plugins\/p5-embedder\/p5_iframe.html\" class=\"p5_exampleFrame\" width=\"680\" height=\"500\"><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/ hfroling Hazel Froling Section C *\\\n\n    \n    var r=170;\n    var g=204;\n    var b=170;\n    var x= 300;\n    var dir= 1;\n    var speed= 5;\n    var mouth= 1;\n    \n\nfunction setup() {\n    createCanvas(640, 480);\n    text(\"p5.js vers 0.9.0 test.\", 10, 15);\n}\n\nfunction mousePressed() {\n    mouth += 1;\n    if ( mouth &gt; 3) {\n        mouth = 1;        \n    }\n}\n\nfunction draw() {\n\n    if (mouth == 1) {\n        background(r, g, b);\n        fill(107,77,38); \/\/hair color\n        strokeWeight(0);\n        rect(111,168,374,329,45); \/\/hair back\n        fill(57,91,63); \/\/green shirt\n        rect(94,509,411,168,100); \/\/shirt rect\n        fill(244,212,189); \/\/skin color\n        stroke(168,125,80) \/\/ neck line color\n        strokeWeight(2); \/\/neck stroke\n        rect(244,422,120,127,50); \/\/neck\n        ellipse(478,286,60); \/\/right ear\n        ellipse(120,286,60);  \/\/left ear\n        rect(130,130,340,340,150); \/\/face\n        fill(182,95,65); \/\/mouth fill\n        ellipse(300,394,104,85); \/\/mouth\n        strokeWeight(0);\n        fill(244,212,189); \/\/skin color\n        rect(220,334,160,52) \/\/above mouth cover\n        stroke(168,125,80) \/\/skin line color\n        strokeWeight(2); \/\/2pt stroke\n        fill(255); \/\/white\n        rect(248,386,104,11); \/\/teeth\n        fill(244,212,189); \/\/skin color\n        ellipse(303,335,41,26); \/\/nose\n        strokeWeight(0);\n        rect(254,307,52,63); \/\/nose cover\n        fill(96,57,19); \/\/eye liner brown\n        ellipse(218,279,91,83); \/\/eye liner shape left\n        ellipse(381,279,91,83); \/\/eye liner shape right\n        fill(255); \/\/white\n        ellipse(222,280,88,83); \/\/left eye white \n        fill(119,119,75); \/\/ green iris\n        ellipse(222,280,52,49); \/\/left eye iris\n        fill(0); \/\/black pupil\n        ellipse(222,280,31,29); \/\/left eye pupil\n        fill(255); \/\/white glint\n        ellipse(232,272,10,17); \/\/left glint\n        fill(255); \/\/white\n        ellipse(377,280,88,83); \/\/right eye white \n        fill(119,119,75); \/\/ green iris\n        ellipse(377,280,52,49); \/\/right eye iris\n        fill(0); \/\/black pupil\n        ellipse(377,280,31,29); \/\/right eye pupil\n        fill(255); \/\/white glint\n        ellipse(387,272,10,17); \/\/right glint\n        fill(244,212,189); \/\/skin color\n        ellipse(201,324,133,83); \/\/ left cheek cover\n        ellipse(402,324,133,83); \/\/ right cheek cover\n        fill(242,200,189); \/\/cheek color\n        ellipse(203,338,107,83); \/\/left cheek\n        ellipse(396,338,107,83); \/\/right cheek\n        fill(96,57,19); \/\/eye liner brown\n        triangle(165,280,174,279,173,286); \/\/left lower lash\n        triangle(168,273,175,273,174,278); \/\/left upper lash\n        triangle(435,280,426,279,426,285); \/\/right lower lash\n        triangle(425,273,425,278,431,273); \/\/right upper lash\n        fill(107,77,38); \/\/hair color\n        ellipse(300,140,300,83); \/\/top of hair\n        ellipse(139,202,57,115); \/\/left of hair\n        ellipse(459,202,57,115); \/\/right of hair\n        ellipse(213,165,180,105); \/\/left bangs\n        ellipse(385,165,180,105); \/\/right bangs\n    }\n    if (mouth == 2) {\n        background(221,168,181);\n        fill(107,77,38); \/\/hair color\n        strokeWeight(0);\n        rect(111,168,374,329,45); \/\/hair back\n        fill(57,91,63); \/\/green shirt\n        rect(94,509,411,168,100); \/\/shirt rect\n        fill(244,212,189); \/\/skin color\n        stroke(168,125,80) \/\/ neck line color\n        strokeWeight(2); \/\/neck stroke\n        rect(244,422,120,127,50); \/\/neck\n        ellipse(478,286,60); \/\/right ear\n        ellipse(120,286,60);  \/\/left ear\n        rect(130,130,340,340,150); \/\/face\n        fill(182,95,65); \/\/mouth fill\n        ellipse(300,394,104,85); \/\/mouth\n        strokeWeight(0);\n        fill(244,212,189); \/\/skin color\n        rect(220,344,160,57); \/\/above mouth cover\n        stroke(168,125,80); \/\/skin line color\n        strokeWeight(2); \/\/2pt stroke\n        line(249,400,351,400); \/\/top lip\n        fill(244,212,189); \/\/skin color\n        ellipse(303,335,41,26); \/\/nose\n        strokeWeight(0);\n        rect(254,307,52,63); \/\/nose cover\n        fill(96,57,19); \/\/eye liner brown\n        ellipse(218,279,91,83); \/\/eye liner shape left\n        ellipse(381,279,91,83); \/\/eye liner shape right\n        fill(255); \/\/white\n        ellipse(224,280,82,83); \/\/left eye white \n        fill(119,119,75); \/\/ green iris\n        ellipse(222,275,52,49); \/\/left eye iris\n        fill(0); \/\/black pupil\n        ellipse(222,275,31,29); \/\/left eye pupil\n        fill(255); \/\/white glint\n        ellipse(232,272,10,17); \/\/left glint\n        fill(255); \/\/white\n        ellipse(375,280,82,83); \/\/right eye white \n        fill(119,119,75); \/\/ green iris\n        ellipse(377,275,52,49); \/\/right eye iris\n        fill(0); \/\/black pupil\n        ellipse(377,275,31,29); \/\/right eye pupil\n        fill(255); \/\/white glint\n        ellipse(387,272,10,17); \/\/right glint\n        fill(244,212,189); \/\/skin color\n        ellipse(210,320,133,83); \/\/ left cheek cover\n        ellipse(393,320,133,83); \/\/ right cheek cover\n        fill(250,200,189); \/\/cheek color\n        ellipse(203,338,107,83); \/\/left cheek\n        ellipse(396,338,107,83); \/\/right cheek\n        fill(96,57,19); \/\/eye liner brown\n        triangle(165,280,174,279,173,286); \/\/left lower lash\n        triangle(168,273,175,273,174,278); \/\/left upper lash\n        triangle(435,280,426,279,426,285); \/\/right lower lash\n        triangle(425,273,425,278,431,273); \/\/right upper lash\n        fill(107,77,38); \/\/hair color\n        ellipse(300,140,300,83); \/\/top of hair\n        ellipse(139,202,57,115); \/\/left of hair\n        ellipse(459,202,57,115); \/\/right of hair\n        ellipse(213,165,180,105); \/\/left bangs\n        ellipse(385,165,180,105); \/\/right bangs\n        fill(221,168,181); \/\/ tounge color\n        ellipse(300,450,44,39); \/\/tounge shape\n        fill(182,95,65); \/\/ mouth fill\n        ellipse(300,418,63,33); \/\/tounge cover\n        strokeWeight(0);\n        fill(124,54,36); \/\/tonsil color\n        ellipse(306,431,12,24) \/\/right tonsil\n        ellipse(294,431,12,24) \/\/left tonsil\n        fill(221,168,181); \/\/ tounge color\n        rect(287,433,26,14); \/\/ tonsil cover\n        strokeWeight(3);\n        stroke(182,95,65); \/\/tounge line color\n        line(300,434,300,458) \/\/tounge groove\n        } else if (mouth == 3){ \n                background(200,200,255); \/\/light blue\n                fill(107,77,38); \/\/hair color\n                strokeWeight(0);\n                rect(111,168,374,329,45); \/\/hair back\n                fill(57,91,63); \/\/green shirt\n                rect(94,509,411,168,100); \/\/shirt rect\n                fill(244,212,189); \/\/skin color\n                stroke(168,125,80) \/\/ neck line color\n                strokeWeight(2); \/\/neck stroke\n                rect(244,422,120,127,50); \/\/neck\n                ellipse(478,286,60); \/\/right ear\n                ellipse(120,286,60);  \/\/left ear\n                rect(130,130,340,340,150); \/\/face\n                fill(244,212,189); \/\/skin color\n                ellipse(303,335,41,26); \/\/nose\n                strokeWeight(0);\n                rect(254,307,52,63); \/\/nose cover\n                fill(96,57,19); \/\/eye liner brown\n                ellipse(218,279,91,83); \/\/eye liner shape left\n                ellipse(381,279,91,83); \/\/eye liner shape right\n                fill(255); \/\/white\n                ellipse(222,280,92,87); \/\/left eye white \n                fill(119,119,75); \/\/ green iris\n                ellipse(222,280,52,49); \/\/left eye iris\n                fill(0); \/\/black pupil\n                ellipse(222,280,31,29); \/\/left eye pupil\n                fill(255); \/\/white glint\n                ellipse(232,272,10,17); \/\/left glint\n                fill(255); \/\/white\n                ellipse(377,280,92,87); \/\/right eye white \n                fill(119,119,75); \/\/ green iris\n                ellipse(377,280,52,49); \/\/right eye iris\n                fill(0); \/\/black pupil\n                ellipse(377,280,31,29); \/\/right eye pupil\n                fill(255); \/\/white glint\n                ellipse(387,272,10,17); \/\/right glint\n                fill(244,212,189); \/\/skin color\n                ellipse(201,330,133,83); \/\/ left cheek cover\n                ellipse(402,330,133,83); \/\/ right cheek cover\n                fill(242,200,189); \/\/cheek color\n                ellipse(203,338,107,83); \/\/left cheek\n                ellipse(396,338,107,83); \/\/right cheek\n                fill(96,57,19); \/\/eye liner brown\n                triangle(165,280,174,279,173,286); \/\/left lower lash\n                triangle(168,273,175,273,174,278); \/\/left upper lash\n                triangle(435,280,426,279,426,285); \/\/right lower lash\n                triangle(425,273,425,278,431,273); \/\/right upper lash\n                fill(107,77,38); \/\/hair color\n                ellipse(300,140,300,83); \/\/top of hair\n                ellipse(139,202,57,115); \/\/left of hair\n                ellipse(459,202,57,115); \/\/right of hair\n                ellipse(213,165,180,105); \/\/left bangs\n                ellipse(385,165,180,105); \/\/right bangs\n                stroke(168,125,80); \/\/ neck line color\n                strokeWeight(2);\n                fill(182,95,65); \/\/mouth fill\n                ellipse(300,412,40,53); \/\/round mouth\n        }\n\n    if (mouseX &gt; width\/2 & mouseY > height\/2){\n        strokeWeight(4);\n        stroke(119,119,75); \/\/stem green\n        line(583,300,583,350); \/\/stem\n        fill(57,91,63); \/\/dark green\n        strokeWeight(0);\n        rect(548,411,69,138,20); \/\/arm\n        fill(244,212,189); \/\/skin color\n        stroke(168,125,80); \/\/ skin line color\n        strokeWeight(2); \/\/neck stroke\n        rect(584,335,21,60,20); \/\/thumb\n        rect(552,349,60,21,20); \/\/top finger\n        rect(552,369,60,21,20); \/\/middle finger\n        rect(552,390,60,21,20); \/\/bottom finger\n        strokeWeight(0);\n        rect(583,350,21,60,20); \/\/knuckle cover\n        fill('white'); \/\/petal color\n        rect(583,292,19,19,19); \/\/petal\n        rect(564,292,19,19,19); \/\/petal\n        rect(559,275,19,19,19); \/\/petal\n        rect(573,266,19,19,19); \/\/petal\n        rect(588,275,19,19,19); \/\/petal\n        fill(255,206,0); \/\/yellow color\n        rect(573,281,19,19,19); \/\/center petal\n    }\n    if( mouseX &gt; width\/2 & mouseY < height\/2){\n            strokeWeight(4);\n            stroke(119,119,75); \/\/stem green\n            line(583,300,583,350); \/\/stem\n            fill(57,91,63); \/\/dark green\n            strokeWeight(0);\n            rect(548,411,69,138,20); \/\/arm\n            fill(244,212,189); \/\/skin color\n            stroke(168,125,80); \/\/ skin line color\n            strokeWeight(2); \/\/neck stroke\n            rect(584,335,21,60,20); \/\/thumb\n            rect(552,349,60,21,20); \/\/top finger\n            rect(552,369,60,21,20); \/\/middle finger\n            rect(552,390,60,21,20); \/\/bottom finger\n            strokeWeight(0);\n            rect(583,350,21,60,20); \/\/knuckle cover\n            fill(240,230,255); \/\/petal color\n            rect(583,292,19,19,19); \/\/petal\n            rect(564,292,19,19,19); \/\/petal\n            rect(559,275,19,19,19); \/\/petal\n            rect(573,266,19,19,19); \/\/petal\n            rect(588,275,19,19,19); \/\/petal\n            fill('white'); \/\/white\n            rect(573,281,19,19,19); \/\/center petal\n        }\n        if( mouseX &lt; width\/2 & mouseY > height\/2){\n            fill(57,91,63); \/\/dark green\n            strokeWeight(0);\n            rect(548,411,69,138,20); \/\/arm\n            fill(244,212,189); \/\/skin color\n            stroke(168,125,80); \/\/ skin line color\n            strokeWeight(2); \/\/neck stroke\n            rect(584,315,21,60,20); \/\/thumb\n            rect(552,349,60,21,20); \/\/top finger\n            rect(552,369,60,21,20); \/\/middle finger\n            rect(552,390,60,21,20); \/\/bottom finger\n            strokeWeight(0);\n            rect(583,350,21,60,20); \/\/knuckle cover\n\n        }\n            else if (mouseX &lt; width\/2 & mouseY < height\/2){\n            strokeWeight(0);\n            fill(57,91,63); \/\/dark green\n            rect(548,411,69,138,20); \/\/arm\n            fill(244,212,189); \/\/skin color\n            stroke(168,125,80); \/\/ skin line color\n            strokeWeight(2); \/\/neck stroke\n            rect(584,335,21,60,20); \/\/thumb\n            rect(552,349,60,21,20); \/\/top finger\n            rect(552,369,60,21,20); \/\/middle finger\n            rect(552,390,60,21,20); \/\/bottom finger\n            strokeWeight(0);\n            rect(583,350,21,60,20); \/\/knuckle cover\n            fill('white'); \/\/petal color\n            rect(547,259,63,90,30); \/\/bunny body\n            rect(556,217,12,58,30); \/\/bunny ear L\n            rect(588,217,12,58,30); \/\/buny ear r\n            strokeWeight(4);\n            stroke(0);\n            fill(0);\n            point(563,282); \/\/bunny eyes\n            point(592,282); \/\/bunny eyes\n            triangle(577,290,580,299,574,299); \/\/bunny nose\n            strokeWeight(2);\n            line(577,299,577,308); \/\/bun mouth\n            line(577,308,583,312); \/\/bun mouth\n            line(577,308,569,312); \/\/bun mouth\n        }\n}\n    \n\n\n\n<\/code><\/pre><\/div><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>For this project, I wanted to make something cuter than last week&rsquo;s face, so I mapped everything out in illustrator and then translated the shapes to js. This workflow was much more efficient and allowed me to create cartoon facial expressions since I wasn&rsquo;t focused on generating the coordinates or RGB codes for every shape. &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/09\/10\/variable-face-project-02\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Variable Face project 02&#8221;<\/span><\/a><\/p>\n","protected":false},"author":720,"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\/71117"}],"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\/720"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=71117"}],"version-history":[{"count":4,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/71117\/revisions"}],"predecessor-version":[{"id":71129,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/71117\/revisions\/71129"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=71117"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=71117"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=71117"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}