{"id":65537,"date":"2021-09-11T17:16:12","date_gmt":"2021-09-11T21:16:12","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=65537"},"modified":"2021-09-11T17:16:12","modified_gmt":"2021-09-11T21:16:12","slug":"project-2-variable-faces-4","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/09\/11\/project-2-variable-faces-4\/","title":{"rendered":"Project 2 &#8211; Variable Faces"},"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><a class=\"p5_sketch_link\" data-width=\"420\" data-height=\"400\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/09\/yonvarfaces.js\"><\/a><iframe src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/plugins\/p5-embedder\/p5_iframe.html\" class=\"p5_exampleFrame\" width=\"420\" height=\"400\"><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">var c = 0.1;\nvar x;\nvar y;\nvar r = 100;\n\nfunction setup() {\n    createCanvas(420, 400);\n    background(220);\n}\n\nfunction draw() {\n\n  x = width \/ 2;\n  y = height \/ 2;\n\n  \/\/filled head\n  noStroke();\n  fill(255,226,226);\n  ellipse(x+20,y-20,2*r);\n\n  \/\/hair\n  stroke(100);\n  strokeWeight(35);\n  line(((x-r\/3)+5),(y-r-5),((x+2*r\/3)+5), (y-r-5));\n  stroke(40);\n  line((x-r\/3),(y-r),(x+2*r\/3),(y-r));\n\n  \/\/outline head\n  noFill();\n  strokeWeight(10);\n  stroke(230, 168,168);\n  ellipse(x, y, 2*r);\n\n  \/\/earrings\n  fill(182);\n  noStroke();\n  ellipse(x-(r+10),y-40,15);\n  ellipse(x-(r+6),y+10,15);\n\n  stroke(230, 168,168);\n  strokeWeight(6);\n  noFill();\n  arc(x-(r\/2),y-(r\/2), 15,15,0, PI);\n  arc(x+(r\/3),y-(r\/2), 15,15,0, PI);\n  arc(x-r\/6,y+(r\/3), 30,15,PI\/6, PI-PI\/6);\n\n  noLoop()\n}\n\nfunction mousePressed(){\n    c = random(7);\n    print(c.toString())\n\n    if (c &lt; 1) {\n        background(220);\n        \/\/filled head\n        noStroke();\n        fill(255,226,226);\n        ellipse(x+20,y-20,2*r);\n        print(\"face1\")\n\n        \/\/hair\n        stroke(100);\n        strokeWeight(35);\n        line(((x-r\/3)+5),(y-r-5),((x+2*r\/3)+5), (y-r-5));\n        stroke(40);\n        line((x-r\/3),(y-r),(x+2*r\/3),(y-r));\n\n        \/\/outline head\n        noFill();\n        strokeWeight(10);\n        stroke(230, 168,168);\n        ellipse(x, y, 2*r);\n\n        \/\/earrings\n        fill(182);\n        noStroke();\n        ellipse(x-(r+10),y-40,15);\n        ellipse(x-(r+6),y+10,15);\n\n        \/\/face\n        stroke(230, 168,168);\n        strokeWeight(6);\n        noFill();\n        ellipse(x-(r\/2),y-(r\/2), 15, 15);\n        ellipse(x+(r\/3),y-(r\/2), 15, 15);\n        ellipse(x-r\/6,y+(r\/3), 30, 30);\n    }\n  else if (c &gt; 1 & c < 2) {\n      background(220);\n      \/\/filled head\n      noStroke();\n      fill(255,226,226);\n      ellipse(x+20,y-20,2*r);\n\n      \/\/hair\n      stroke(100);\n      strokeWeight(35);\n      line(((x-r\/3)+5),(y-r-5),((x+2*r\/3)+5), (y-r-5));\n      stroke(40);\n      line((x-r\/3),(y-r),(x+2*r\/3),(y-r));\n\n      \/\/outline head\n      noFill();\n      strokeWeight(10);\n      stroke(230, 168,168);\n      ellipse(x, y, 2*r);\n\n      \/\/earrings\n      fill(182);\n      noStroke();\n      ellipse(x-(r+10),y-40,15);\n      ellipse(x-(r+6),y+10,15);\n\n      print(\"face2\")\n      stroke(230, 168,168);\n      strokeWeight(6);\n      noFill();\n      ellipse(x-(r\/2),y-(r\/2), 15, 15);\n      ellipse(x+(r\/3),y-(r\/2), 15, 15);\n      arc(x-r\/6,y+(r\/3), 30,15, PI+PI\/6, 0-PI\/6);\n      stroke(40);\n      strokeWeight(12);\n      line(x-(r\/2),y-(r\/2)-15\/2-15, x-(r\/2)+15\/2+10, y-(r\/2)-10);\n      line(x+(r\/3),y-(r\/2)-15\/2-15, x+(r\/3)-15\/2-10,y-(r\/2)-10);\n  }\n  else if(c &gt; 2 & c < 3){\n      background(220);\n\n      \/\/filled head\n      noStroke();\n      fill(255,226,226);\n      ellipse(x-20,y-20,2*r);\n\n      \/\/hair\n      stroke(100);\n      strokeWeight(35);\n      line(((x-r\/3)+5)-80,(y-r-5)+40,((x+2*r\/3)+5)-80, (y-r-5)-20);\n      stroke(40);\n      line((x-r\/3)-80,(y-r)+40,(x+2*r\/3)-80,(y-r)-20);\n\n      \/\/outline head\n      noFill();\n      strokeWeight(10);\n      stroke(230, 168,168);\n      ellipse(x, y, 2*r);\n\n      \/\/earrings\n      fill(182);\n      noStroke();\n      ellipse(x-(r+10),y-40,15);\n      ellipse(x-(r+6),y+10,15);\n\n      print(\"face3\")\n      stroke(230, 168,168);\n      strokeWeight(6);\n      noFill();\n      arc(x-(r\/2),y-(r\/2), 15,15,0, PI);\n      arc(x+(r\/3),y-(r\/2), 15,15,0, PI);\n      line(x-r\/6, y+(r\/3), (x-r\/6)+20, y+(r\/3));\n  }\n  else if (c &gt; 3 & c < 4) {\n      background(220);\n      \/\/filled head\n      noStroke();\n      fill(255,226,226);\n      ellipse(x-20,y+20,2*r);\n\n      \/\/hair\n      stroke(100);\n      strokeWeight(35);\n      line(((x-r\/3)+5)-80,(y-r-5)+40,((x+2*r\/3)+5)-80, (y-r-5)-20);\n      stroke(40);\n      line((x-r\/3)-80,(y-r)+40,(x+2*r\/3)-80,(y-r)-20);\n\n      \/\/outline head\n      noFill();\n      strokeWeight(10);\n      stroke(230, 168,168);\n      ellipse(x, y, 2*r);\n\n      \/\/earrings\n      fill(182);\n      noStroke();\n      ellipse(x-(r+10),y-40,15);\n      ellipse(x-(r+6),y+10,15);\n\n      print(\"face4\")\n      stroke(230, 168,168);\n      strokeWeight(6);\n      noFill();\n      ellipse(x-(r\/2),y-(r\/2), 15, 15);\n      ellipse(x+(r\/3),y-(r\/2), 15, 15);\n      arc(x-r\/6,y+(r\/3), 30,15, PI+PI\/6, 0-PI\/6);\n      stroke(40);\n      strokeWeight(12);\n  }\n  else if(c &gt; 4 & c < 5){\n      background(220);\n\n      \/\/filled head\n      noStroke();\n      fill(255,226,226);\n      ellipse(x-20,y-20,2*r);\n\n      \/\/hair\n      stroke(100);\n      strokeWeight(35);\n      line(((x-r\/3)+5)-80,(y-r-5)+40,((x+2*r\/3)+5)-80, (y-r-5)-20);\n      stroke(40);\n      line((x-r\/3)-80,(y-r)+40,(x+2*r\/3)-80,(y-r)-20);\n\n      \/\/outline head\n      noFill();\n      strokeWeight(10);\n      stroke(230, 168,168);\n      ellipse(x, y, 2*r);\n\n      \/\/earrings\n      fill(182);\n      noStroke();\n      ellipse(x-(r+10),y-40,15);\n      ellipse(x-(r+6),y+10,15);\n\n      print(\"face5\")\n      stroke(230, 168,168);\n      strokeWeight(6);\n      noFill();\n      arc(x-(r\/2),y-(r\/2), 15,15,0, PI);\n      arc(x+(r\/3),y-(r\/2), 15,15,0, PI);\n  }\n  else if(c &gt; 5 & c < 6){\n      background(220);\n\n      \/\/filled head\n      noStroke();\n      fill(255,226,226);\n      ellipse(x+20,y+20,2*r);\n\n      \/\/hair\n      stroke(100);\n      strokeWeight(35);\n      line(((x-r\/3)+5),(y-r-5),((x+2*r\/3)+5), (y-r-5));\n      stroke(40);\n      line((x-r\/3),(y-r),(x+2*r\/3),(y-r));\n\n      \/\/outline head\n      noFill();\n      strokeWeight(10);\n      stroke(230, 168,168);\n      ellipse(x, y, 2*r);\n\n      \/\/earrings\n      fill(182);\n      noStroke();\n      ellipse(x-(r+10),y-40,15);\n      ellipse(x-(r+6),y+10,15);\n\n      print(\"face6\")\n      stroke(230, 168,168);\n      strokeWeight(6);\n      noFill();\n      ellipse(x-(r\/2),y-(r\/2), 15, 15);\n      ellipse(x+(r\/3),y-(r\/2), 15, 15);\n      arc(x+(r\/3),y+(r\/2), 30,30,0, PI);\n      line(x-(r\/3),y+(r\/2),x+(r\/3)+15,y+(r\/2));\n  }\n  else{\n      background(220);\n      \/\/filled head\n      noStroke();\n      fill(255,226,226);\n      ellipse(x+20,y-20,2*r);\n\n      \/\/hair\n      stroke(100);\n      strokeWeight(35);\n      line(((x-r\/3)+5)+20,(y-r-5),((x+2*r\/3)+5)+20, (y-r-5)+20);\n      stroke(40);\n      line((x-r\/3)+20,(y-r),(x+2*r\/3)+20,(y-r)+20);\n\n      \/\/outline head\n      noFill();\n      strokeWeight(10);\n      stroke(230, 168,168);\n      ellipse(x, y, 2*r);\n\n      \/\/earrings\n      fill(182);\n      noStroke();\n      ellipse(x-(r+10),y-40,15);\n      ellipse(x-(r+6),y+10,15);\n\n      print(\"face7\")\n      stroke(230, 168,168);\n      strokeWeight(6);\n      noFill();\n      arc(x-(r\/2),y-(r\/2), 15,15,0, PI);\n      arc(x+(r\/3),y-(r\/2), 15,15,0, PI);\n      arc(x-r\/6,y+(r\/3), 30,15,PI\/6, PI-PI\/6);\n  }\n}\n<\/code><\/pre><\/div><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>var c = 0.1; var x; var y; var r = 100; function setup() { createCanvas(420, 400); background(220); } function draw() { x = width \/ 2; y = height \/ 2; \/\/filled head noStroke(); fill(255,226,226); ellipse(x+20,y-20,2*r); \/\/hair stroke(100); strokeWeight(35); line(((x-r\/3)+5),(y-r-5),((x+2*r\/3)+5), (y-r-5)); stroke(40); line((x-r\/3),(y-r),(x+2*r\/3),(y-r)); \/\/outline head noFill(); strokeWeight(10); stroke(230, 168,168); ellipse(x, y, 2*r); \/\/earrings fill(182); &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/09\/11\/project-2-variable-faces-4\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project 2 &#8211; Variable Faces&#8221;<\/span><\/a><\/p>\n","protected":false},"author":657,"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\/f2021\/wp-json\/wp\/v2\/posts\/65537"}],"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\/657"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=65537"}],"version-history":[{"count":6,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/65537\/revisions"}],"predecessor-version":[{"id":65547,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/65537\/revisions\/65547"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=65537"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=65537"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=65537"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}