{"id":71342,"date":"2022-09-10T22:44:22","date_gmt":"2022-09-11T02:44:22","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/?p=71342"},"modified":"2022-09-10T22:44:22","modified_gmt":"2022-09-11T02:44:22","slug":"anabelles-project-02","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/09\/10\/anabelles-project-02\/","title":{"rendered":"anabelle&#8217;s 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>My project is based on a video game I like called &ldquo;Omori.&rdquo; Click on the upper left corner to control eyes, upper right to control eyebrows, lower left for accessories, and lower right for mouths. Click on the purple button to get a completely randomized face. @.@ <\/p>\n\n\n\n<div><a class=\"p5_sketch_link\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/09\/sketch-196.js\" data-width=\"480\" data-height=\"640\">sketch<\/a><iframe src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/plugins\/p5-embedder\/p5_iframe.html\" class=\"p5_exampleFrame\" width=\"480\" height=\"640\"><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/ kayla anabelle lee &lt;3\n\/\/ section c\n\/\/ kaylalee\n\nlet radiusHead = 125;\nlet shoulderWidth = 175;\n\nlet counterEye = 0;\nlet counterBrow = 0;\nlet counterMouth = 0;\nlet counterExtra = 0;\n\n\nfunction happyMouth(x, y, w, h, color) {\n    var r = (w \/ 8);\n\n    \/\/rectangle\n    fill(50, 230);\n    noStroke();\n    rect(x-w\/2+r, y-r, w-2*r, r);\n\n    \/\/ bottom arc\n    arc(x, y, w, h, 0, radians(180));\n\n    \/\/ right quarter circle\n    arc((x-(w\/2)+r), y, 2*r, 2*r, radians(180), radians(270));\n\n    \/\/ left quarter circle\n    arc(x+(w\/2)-r, y, 2*r, 2*r, radians(270), 0);\n    line(x-(w\/2)+r, y-r, x+(w\/2)-r, y-r); \n}\n\nfunction curvyStar(x, y, r) {\n    noStroke();\n    push();\n    translate(x, y);\n    angleMode(DEGREES);\n    beginShape();\n    for(var i = -90; i &lt; 0; i += 1) {\n        vertex( r*cos(i), \n                -r*sin(i) );\n    } for(var i = 0; i &lt; 90; i += 1) {\n        vertex(r*cos(i), \n               2*r - r*sin(i));\n    } for (var i = 90; i &lt; 180; i += 1) {\n        vertex(2*r + r*cos(i),\n               2*r - r*sin(i));   \n    } for(var i = 180; i &lt; 270; i += 1) {\n        vertex(2*r + r*cos(i), \n               0 - r*sin(i));\n    } endShape();\n    pop();\n\n    angleMode(RADIANS);\n}\n\nfunction setup() {\n    createCanvas(480, 640);\n}\n\nfunction draw() {\n    background(230);\n    stroke(50, 255);\n    strokeWeight(1);\n    noFill();\n\n    \/\/ head\n    stroke(50, 230);\n    strokeWeight(5);\n    noFill();\n\n    beginShape();\n    curveVertex(width\/2 - radiusHead, height\/2 - 100);\n    curveVertex(width\/2 - radiusHead, height\/2 - 100);\n    curveVertex(width\/2 - 100, height\/2 + 20);\n    curveVertex(width\/2, height\/2 + 80);\n    curveVertex(width\/2 + 100, height\/2 + 20);\n    curveVertex(width\/2 + radiusHead, height\/2 - 100);\n    curveVertex(width\/2 + radiusHead, height\/2 - 100);\n    endShape();\n\n    \/\/ ears\n    arc(width\/2 - radiusHead, height\/2 - 40, 50, 50, radians(60), radians(290));\n    arc(width\/2 + radiusHead, height\/2 - 40, 50, 50, radians(250), radians(110));\n\n    \/\/ neck and shoulders\n    beginShape(); \/\/left side\n    curveVertex(width\/2 - 35, height\/2 + 75);\n    curveVertex(width\/2 - 35, height\/2 + 75);\n    curveVertex(width\/2 - 35, height\/2 + 150);\n    curveVertex(width\/2 - 85, height\/2 + 175);\n    curveVertex(width\/2 - shoulderWidth, height\/2 + 180);\n    curveVertex(width\/2 - shoulderWidth, height\/2 + 180);\n    endShape();  \n\n    beginShape();\n    curveVertex(width\/2 - shoulderWidth, height\/2 + 180);\n    curveVertex(width\/2 - shoulderWidth, height\/2 + 180);\n    curveVertex(width\/2 - 210, height\/2 + 200);\n    curveVertex(width\/2 - 225, height\/2 + 250);\n    curveVertex(width\/2 - 230, height\/2 + 350);     \n    curveVertex(width\/2 - 230, height\/2 + 350); \n    endShape();   \n\n    beginShape(); \/\/right side\n    curveVertex(width\/2 + 35, height\/2 + 75);\n    curveVertex(width\/2 + 35, height\/2 + 75);\n    curveVertex(width\/2 + 35, height\/2 + 150);\n    curveVertex(width\/2 + 85, height\/2 + 175);\n    curveVertex(width\/2 + shoulderWidth, height\/2 + 180);\n    curveVertex(width\/2 + shoulderWidth, height\/2 + 180);\n    endShape();\n\n    beginShape();\n    curveVertex(width\/2 + shoulderWidth, height\/2 + 180);\n    curveVertex(width\/2 + shoulderWidth, height\/2 + 180);\n    curveVertex(width\/2 + 210, height\/2 + 200);\n    curveVertex(width\/2 + 225, height\/2 + 250);\n    curveVertex(width\/2 + 230, height\/2 + 350);     \n    curveVertex(width\/2 + 230, height\/2 + 350); \n    endShape();   \n\n    \/\/hair\n    fill(50, 240);\n    arc(width\/2+90, height\/2-140, 150, 200, radians(250), radians(70), OPEN);\n    arc(width\/2-20, height\/2-95, 300, 310, radians(150), radians(300), OPEN);\n    noStroke();\n    triangle(300, 88, 140, 249, 318, 135);\n    quad(318, 134, 350, 203, 268, 217, 266, 167);\n    quad(212, 201, 207, 236, 270, 210, 266, 167);\n\n    \/\/bangs\n    stroke(50, 230);\n    beginShape();\n    curveVertex(width\/2-130, height\/2-50);\n    curveVertex(width\/2-130, height\/2-50);\n    curveVertex(width\/2-100, height\/2-50);\n    curveVertex(width\/2-65, height\/2-70);\n    curveVertex(width\/2-30, height\/2-120);\n    curveVertex(width\/2-30, height\/2-120);\n    endShape();\n\n    beginShape();\n    curveVertex(width\/2-30, height\/2-120);\n    curveVertex(width\/2-30, height\/2-120);\n    curveVertex(width\/2-30, height\/2-100);\n    curveVertex(width\/2-40, height\/2-75);\n    curveVertex(width\/2-60, height\/2-55);\n    curveVertex(width\/2-60, height\/2-55);\n    endShape();\n\n    beginShape();\n    curveVertex(width\/2-60, height\/2-55);\n    curveVertex(width\/2-60, height\/2-55);\n    curveVertex(width\/2-30, height\/2-60);\n    curveVertex(width\/2-10, height\/2-80);\n    curveVertex(width\/2+10, height\/2-130);\n    curveVertex(width\/2+10, height\/2-130);\n    endShape();\n\n    beginShape(); \n    curveVertex(width\/2+10, height\/2-130);\n    curveVertex(width\/2+10, height\/2-130);\n    curveVertex(width\/2+10, height\/2-100);\n    curveVertex(width\/2-10, height\/2-60);\n    curveVertex(width\/2-25, height\/2-45);\n    curveVertex(width\/2-25, height\/2-45);\n    endShape();\n\n    beginShape();\n    curveVertex(width\/2-25, height\/2-45);\n    curveVertex(width\/2-25, height\/2-45);\n    curveVertex(width\/2+10, height\/2-70);\n    curveVertex(width\/2+25, height\/2-100);\n    curveVertex(width\/2+30, height\/2-130);\n    curveVertex(width\/2+30, height\/2-130);\n    endShape();\n\n    arc(width\/2+125, height\/2-120, 200, 150, radians(90), radians(170));\n\n    \/\/ tank top\n    noFill();\n    line(width\/2-150, height\/2+180, width\/2-150, height\/2+350);\n    line(width\/2+150, height\/2+180, width\/2+150, height\/2+350);\n    arc(width\/2, height\/2+180, 200, 180, radians(0), radians(180));\n\n    \/\/ collarbones\n    strokeWeight(2);\n    bezier(width\/2-20, height\/2+220, width\/2-70, height\/2+190, width\/2-70, height\/2+200, width\/2-85, height\/2+200);\n    bezier(width\/2+20, height\/2+220, width\/2+70, height\/2+190, width\/2+70, height\/2+200, width\/2+85, height\/2+200);\n\n    \/\/ nose\n    line(width\/2-1, height\/2-1, width\/2+1, height\/2+1);\n\n    \/\/this section is to control eye-type from the first quadrant\n    if (counterEye == 1) {\n        fill(50, 230);\n        circle(width\/2 - 65, height\/2 - 50, 35);\n        circle(width\/2 + 65, height\/2 - 50, 35);\n\n        strokeWeight(8);\n        noFill();\n        arc(width\/2 - 65, height\/2 - 15, 175, 105, radians(240), radians(300));\n        arc(width\/2 + 65, height\/2 - 15, 175, 105, radians(240), radians(300));\n\n    } if (counterEye == 2) {\n        strokeWeight(4);\n        fill(50, 230);\n        circle(width\/2 - 65, height\/2 - 50, 35);\n        circle(width\/2 + 65, height\/2 - 50, 35);\n\n        fill(253, 253, 150, 200);\n        curvyStar(165, 258, 10);\n        curvyStar(295, 258, 10);\n\n        noFill();\n        strokeWeight(4);\n        stroke(50, 230);\n        bezier(width\/2-100, height\/2-55, width\/2-90, height\/2-70, width\/2-65, height\/2-85, width\/2-50, height\/2-70); \n        bezier(width\/2+100, height\/2-55, width\/2+90, height\/2-70, width\/2+65, height\/2-85, width\/2+50, height\/2-70);\n   \n    } if (counterEye == 3) {\n        strokeWeight(4);\n        noFill();\n        bezier(width\/2-100, height\/2-63, width\/2-90, height\/2-65, width\/2-65, height\/2-65, width\/2-45, height\/2-65);\n        arc(width\/2 - 70, height\/2 - 55, 50, 30, radians(10), radians(120));\n        bezier(width\/2+100, height\/2-63, width\/2+90, height\/2-65, width\/2+65, height\/2-65, width\/2+45, height\/2-65);\n        arc(width\/2 + 70, height\/2 - 55, 50, 30, radians(60), radians(170));\n\n        arc(width\/2 - 65, height\/2 - 53, 30, 25, radians(120), radians(240));\n        arc(width\/2 - 60, height\/2 - 55, 20, 20, radians(300), radians(60));\n        arc(width\/2 + 65, height\/2 - 53, 30, 25, radians(240), radians(120));\n        arc(width\/2 + 60, height\/2 - 55, 20, 20, radians(100), radians(220));\n\n        strokeWeight(3);\n        arc(width\/2 - 65, height\/2 - 50, 100, 50, radians(240), radians(300));\n        arc(width\/2 + 65, height\/2 - 50, 100, 50, radians(240), radians(300));\n\n        line(width\/2 - 45, height\/2 - 40, width\/2 - 55, height\/2 - 35);\n        line(width\/2 - 60, height\/2 - 20, width\/2 - 45, height\/2 - 35);\n        line(width\/2 + 45, height\/2 - 40, width\/2 + 55, height\/2 - 35);\n        line(width\/2 + 60, height\/2 - 20, width\/2 + 45, height\/2 - 35);\n    }\n\n\/\/ this section is to control eyebrow type from quadrant 2\n        noFill();\n        strokeWeight(2);\n\n        if (counterBrow == 1) {\n            strokeWeight(3);\n            arc(width\/2 - 65, height\/2 - 75, 80, 30, radians(210), radians(330));\n            arc(width\/2 + 65, height\/2 - 75, 80, 30, radians(210), radians(330));\n\n        } if (counterBrow == 2) {\n            bezier(width\/2-95, height\/2-80, width\/2-80, height\/2-80, width\/2-50, height\/2-80, width\/2-20, height\/2-95);\n            bezier(width\/2+95, height\/2-80, width\/2+80, height\/2-80, width\/2+50, height\/2-80, width\/2+20, height\/2-95);\n\n        } if (counterBrow == 3) {\n            line(width\/2-80, height\/2-100, width\/2-30, height\/2-80);\n            line(width\/2+80, height\/2-100, width\/2+30, height\/2-80);    \n        }\n\n\/\/ this section is to control mouth type from quadrant 3\n    noFill();\n    strokeWeight(3);\n\n    if (counterMouth == 1) {\n        strokeWeight(2);\n        arc(width\/2, height\/2 + 40, 40, 20, radians(210), radians(330));\n    } if (counterMouth == 2) {\n        bezier(width\/2 - 20, height\/2 + 25, width\/2, height\/2 + 40, width\/2, height\/2 + 40, width\/2 + 20, height\/2 + 25);\n    } if (counterMouth == 3) {\n        noStroke();\n        happyMouth(width\/2, height\/2 + 20, 80, 60, 100); \n    }\n\n\/\/ this section is to control accessories from quadrant 4\n\n    if (counterExtra == 1) {\n        fill(50, 255);\n        noStroke();\n\n        beginShape(); \n        curveVertex(width\/2 - radiusHead, height\/2 - 100);\n        curveVertex(width\/2 - radiusHead, height\/2 - 100);\n        curveVertex(width\/2 - 115, height\/2 - 50);\n        curveVertex(width\/2 - 100, height\/2 + 10);\n        curveVertex(width\/2, height\/2 - 20);\n        curveVertex(width\/2 + 100, height\/2 + 10);\n        curveVertex(width\/2 + 115, height\/2 - 50);\n        curveVertex(width\/2 + radiusHead, height\/2 - 100);    \n        curveVertex(width\/2 + radiusHead, height\/2 - 100); \n        endShape(); \n\n    } if (counterExtra == 2) {\n        strokeWeight(2);\n        line(width\/2 - 70, height\/2 - 10, width\/2 - 60, height\/2 - 20); \n        line(width\/2 - 90, height\/2 - 12, width\/2 - 85, height\/2 - 20);\n        line(width\/2 - 50, height\/2 - 12, width\/2 - 40, height\/2 - 20);\n        line(width\/2 + 70, height\/2 - 10, width\/2 + 80, height\/2 - 20); \n        line(width\/2 + 90, height\/2 - 12, width\/2 + 95, height\/2 - 20);\n        line(width\/2 + 50, height\/2 - 12, width\/2 + 60, height\/2 - 20);\n    }\n\n    if (counterExtra == 3) {\n        fill(50, 230);\n        strokeWeight(3);\n        arc(width\/2+15, height\/2-250, 100, 100, radians(240), radians(30), CHORD);\n    }\n\n\/\/ this section is to make a randomized button for all features\n    fill(176, 156, 217);\n    noStroke();\n    circle(50, 50, 75);\n}\n\nfunction mousePressed() {\n    if (mouseX &lt; width\/2 & mouseY < height\/2) {\n        if (counterEye < 3) {\n            counterEye += 1;\n        } else {\n            counterEye = 1;\n        } \n    }  \n\n    if (mouseX &gt; width\/2 & mouseY < width\/2) {\n        if (counterBrow < 3) {\n            counterBrow += 1;\n        } else {\n            counterBrow = 1;\n        }\n    }\n\n    if (mouseX &gt; width\/2 & mouseY > height\/2) {\n        if(counterMouth < 3) {\n            counterMouth += 1;\n        } else {\n            counterMouth = 1;\n        }\n    }\n\n    if (mouseX &lt; width\/2 & mouseY > height\/2) {\n        if(counterExtra < 3) {\n            counterExtra += 1;\n        } else {\n            counterExtra = 1;\n        }\n    }\n\n    if (25 &lt; mouseX & mouseX < 125 && 25 < mouseY && mouseY < 125) {\n        counterEye = round(random(1,3));\n        print(counterEye);\n\n        counterBrow = round(random(1,3));\n        counterMouth = round(random(1,3));\n        counterExtra = round(random(1,3));\n\n\n\n    }\n}<\/code><\/pre><\/div><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>My project is based on a video game I like called &ldquo;Omori.&rdquo; Click on the upper left corner to control eyes, upper right to control eyebrows, lower left for accessories, and lower right for mouths. Click on the purple button to get a completely randomized face. @.@ sketch \/\/ kayla anabelle lee &lt;3 \/\/ section &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/09\/10\/anabelles-project-02\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;anabelle&#8217;s project 02&#8221;<\/span><\/a><\/p>\n","protected":false},"author":734,"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\/f2022\/wp-json\/wp\/v2\/posts\/71342"}],"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\/734"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=71342"}],"version-history":[{"count":1,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/71342\/revisions"}],"predecessor-version":[{"id":71354,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/71342\/revisions\/71354"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=71342"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=71342"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=71342"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}