{"id":71442,"date":"2022-09-10T23:36:07","date_gmt":"2022-09-11T03:36:07","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/?p=71442"},"modified":"2022-09-10T23:53:14","modified_gmt":"2022-09-11T03:53:14","slug":"project-2-variable-face-6","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/09\/10\/project-2-variable-face-6\/","title":{"rendered":"Project 2 &#8211; Variable Face"},"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>Inspired by the popular Sumikk Gurashi characters from Japanese company San-X, this project explores the variable faces of cute 2D characters in the context of a simple text-based meme format. The occurrence of each feature (ie. body color, lack\/ type of ear, mouth, whiskers, arm position,  text) are determined by their own unique variables, allowing for a wide scope of character generation.<\/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-215.js\" data-width=\"600\" data-height=\"480\">sketch<\/a><iframe src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/plugins\/p5-embedder\/p5_iframe.html\" class=\"p5_exampleFrame\" width=\"600\" height=\"480\"><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/ Tsz Wing Clover Chau\n\/\/ Section E\n\nfunction setup() {\n    createCanvas(640, 480);\n    background(220);\n}\n\n\nvar counter = 0;\nvar ears = false;\nvar earsUp = false;\nvar r = 0;\nvar rArms = 0;\nvar rEars = 0;\nvar rMouth = 0;\nvar rWhiskers = 0;\nvar rText = 0;\n\n\n\n\nlet c = [255, 255, 255];\nlet t = [\"Is for me?\", \"A positive weed\", \"Am i even\\na penguin?\", \"Made of 1% meat, \\n99% fat\"];\n\n\nfunction mouseClicked(){\n    r = random([0,1,2,3]);\n    rEars = random([0,1,2,3]);\n    rArms = random([0,1,2,3]);\n    rMouth = random([0,1,2,3]);\n    rWhiskers = random([0,1,2,3]);\n    rText = random([0,1,2,3]);\n\n    print(\"%s\", r);\n    counter += 1;\n\n    if (counter &gt; 3){       \/\/ wrapping bounds\n        counter = 0;\n    }\n\n    if (r%2 == 0){\n        ears = true;\n    } else {\n        ears = false;\n    }\n\n    if (r == 2) {\n        whiskers = true;\n    } else {\n        whiskers = false;\n    }\n}\n\n\nfunction draw() {\n    background(220);\n    scale(1.45 *0.93);\n    ellipseMode(CENTER);\n    rectMode(CENTER);\n    \n    var cX = width\/2;\n    var cY = height\/2;\n    var sizeX = width\/3;\n    var sizeY = width\/3.75;\n    \n\n    if (r == 0){\n        c = [255, 255, 255];       \/\/ shirokuma\n    } else if (r == 1){\n        c = [202, 240, 248];       \/\/ tokage\n    } else if (r == 2){\n        c = [254, 250, 224];       \/\/ neko\n    } else {\n        c = [217, 224, 163];       \/\/ penguin\n    }\n    \n    \n    var offsetX = width\/35;\n    var offsetY = height\/10;\n\n\n    \/\/BODY\n    fill(c);\n    \n    rect(cX + offsetX, cY + (offsetY*2), sizeX - offsetX, height - (cY + offsetY), 70);\n    ellipse(cX, cY, sizeX, sizeY);\n\n    noStroke();\n    rect(cX + offsetX, cY + (offsetY*2)-2, sizeX - offsetX-2, height - (cY + offsetY)-5, 70);\n    \n    stroke(0);\n    strokeWeight(3);\n    beginShape();\n    curveVertex(cX - sizeX\/1.75, cY - sizeY*0.9);            \/\/1st control point\n    curveVertex(cX + sizeX\/2.5, cY - offsetY*1.07);\n    curveVertex(cX + sizeX\/1.5, cY + (offsetY*2));\n    curveVertex(cX + sizeX\/3.75, height - offsetY*1.02);\n    curveVertex(cX - sizeX\/1.75, cY + sizeY*0.7);            \/\/2nd control point\n    endShape();\n\n    \/\/ARMS\n    if (rArms == 0){\n        arc(cX, cY + offsetY*1.5, offsetY, offsetX*1.2, PI \/ 2, 3 * PI \/ 2, OPEN);\n        arc(cX - offsetY, cY + offsetY*1.5, offsetY, offsetX*1.2, 3*PI \/ 2, PI \/ 2, OPEN);\n    } else if (rArms %3 == 0){\n        arc(cX - offsetY, cY + offsetY*1.5, offsetY, offsetX*1.2, 3*PI \/ 2, PI \/ 2, OPEN);\n    } else if (rArms == 1){\n        arc(cX, cY + offsetY*1.5, offsetY, offsetX*1.2, PI \/ 2, 3 * PI \/ 2, OPEN);\n    } else {\n        arc(cX, cY + offsetY*1.5, offsetY, offsetX*1.2, PI \/ 2, 3*PI \/ 2, OPEN);\n        arc(cX - offsetX*4.25, cY + offsetY*1.5, offsetY, offsetX*1.2, PI \/ 2, 3*PI \/ 2, OPEN);\n    }\n    \n\n    \/\/EYES\n    push();\n    fill(0,0,0);\n    ellipse(cX - offsetY*1.2, cY - offsetY\/6, offsetX\/2, offsetX\/3);\n    ellipse(cX + offsetY*0.2, cY - offsetY\/6, offsetX\/2, offsetX\/3);\n    pop();\n\n    \/\/NOSE \/ MOUTH\n    push();\n    if (rMouth %3 == 0){                        \/\/ beak\n        fill(255, 220, 116);\n        ellipse(cX - offsetY\/2, cY+offsetX - offsetY\/6, offsetY\/1.5, offsetX);\n        line(cX - offsetY\/1.25, cY + offsetY\/5, cX - offsetY\/5, cY + offsetY\/5);\n    } else if (rMouth %2 == 0) {               \/\/ snout\n        fill(255);\n        strokeWeight(2);\n        rect(cX - offsetY\/2, cY+offsetX*1.15, offsetY*0.85, offsetX*1.4, 120);\n        fill(0);\n        ellipse(cX - offsetY\/2, cY+offsetX - offsetY\/6, offsetY\/3, offsetX\/1.75);\n    } else {\n        fill(0);\n        ellipse(cX - offsetY\/2, cY+offsetX - offsetY\/6, offsetY\/3, offsetX\/1.75);\n    }\n    pop();\n\n\n    \/\/EARS\n    fill(c);\n    if (rEars %2 == 0){           \/\/ bear\n        push();\n        rotate(radians(15));\n        arc(cX + offsetY*1.8, cY - sizeY, offsetY*1.1, offsetY, -PI*0.95, PI*0.05, OPEN); \n        fill(252, 213, 206);\n        ellipse(cX + offsetY*1.8, cY - sizeY*1.02, offsetY*0.45, offsetY\/4);\n        pop();\n\n        push();\n        rotate(radians(-20));\n        arc(cX - sizeX\/1.5, cY + offsetX\/1.75, offsetY*1.1, offsetY, -PI*1.1, -PI*0.03, OPEN);\n        fill(252, 213, 206);\n        ellipse(cX - sizeX\/1.5, cY + offsetX\/2.2, offsetY*0.45, offsetY\/4);\n        pop();\n    } else if (rEars%3 ==  0){     \/\/ cat\n        push();\n        rotate(radians(-20));\n        arc(cX - sizeX*0.85, cY + offsetX*1.5, offsetY*1.35, offsetY*1.15, -PI*0.7, -PI*0.1, PIE);\n        noStroke();\n        arc(cX - sizeX*0.837, cY + offsetX*1.6, offsetY*1.25, offsetY*1.05, -PI*0.7, -PI*0.1, PIE);\n        \n        \n        stroke(0);\n        arc(cX - sizeX*0.25, cY + offsetX*3.85, offsetY*1.35, offsetY*1.15, -PI*0.7, -PI*0.1, PIE);\n        noStroke();\n        arc(cX - sizeX*0.235, cY + offsetX*3.95, offsetY*1.25, offsetY*1.05, -PI*0.7, -PI*0.1, PIE);\n        pop();\n    }\n\n    \/\/WHISKERS\n    if (rWhiskers %3 == 0 ){\n        line(cX - offsetY*2.4, cY, cX - offsetX*5.5, cY + offsetY*0.05);\n        line(cX - offsetY*2.4, cY + offsetX\/2, cX - offsetX*5.5, cY + offsetX\/2 - offsetY*0.05);\n        line(cX + offsetY, cY, cX + offsetX*2, cY + offsetY*0.05);\n        line(cX + offsetY, cY + offsetX\/2, cX + offsetX*2, cY + offsetX\/2 - offsetY*0.05);\n    }\n    \n    \n    push();\n    textSize(18);\n    noStroke();\n    fill(255,255, 255);\n    text(t[rText], width\/14, height\/2);\n    pop();\n\n}<\/code><\/pre><\/div><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>Inspired by the popular Sumikk Gurashi characters from Japanese company San-X, this project explores the variable faces of cute 2D characters in the context of a simple text-based meme format. The occurrence of each feature (ie. body color, lack\/ type of ear, mouth, whiskers, arm position, text) are determined by their own unique variables, allowing &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/09\/10\/project-2-variable-face-6\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project 2 &#8211; Variable Face&#8221;<\/span><\/a><\/p>\n","protected":false},"author":708,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/71442"}],"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\/708"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=71442"}],"version-history":[{"count":12,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/71442\/revisions"}],"predecessor-version":[{"id":71475,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/71442\/revisions\/71475"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=71442"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=71442"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=71442"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}