I want to create a simple cartoon face that has many expressions. Therefore, I add many variables including the mouth, hair, eyebrow, and so on. The outcome looks good.<\/p>\n\n\n\n
Variable Face<\/a><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/ Setting variables for coding facial actions\nvar eyeSizeX = 20;\nvar eyeSizeY = 20;\nvar faceWidth = 100;\nvar faceHeight = 150;\nvar mouthExpression = 1;\nvar noseExpression = 1;\nvar hairExpression = 1;\nvar hairSize = 0.4;\nvar mouthSize = 0.1;\nvar r = 225\nvar g = 175\nvar b = 125\nvar rot = 0; \nvar eyeOffAry = [-1, -0.5, 0, 0.5, 1];\nvar eyeOffs = 0;\n\nfunction setup() {\n createCanvas(480, 640);\n angleMode(DEGREES);\n}\n\nfunction draw() {\n background(180);\n \n \/\/draw face\n fill(r, g, b);\n strokeWeight(0);\n ellipse(width \/ 2, height \/ 2, faceWidth, faceHeight);\n \n \/\/draw hair\n \/\/hair\n if (hairExpression <= 1) {\n fill(r-100, g-100, b-100);\n arc(width \/ 2, height \/ 2, faceWidth, faceHeight, faceWidth*hairSize-160, -faceWidth*hairSize-20, CHORD);\n } \n \/\/beard\n else if (hairExpression >= 1 & hairExpression <= 2) {\n stroke(r-100, g-100, b-100);\n strokeWeight(faceWidth\/5);\n arc(width \/ 2, height \/ 2, faceWidth, faceHeight, faceWidth*hairSize+40, 140-faceWidth*hairSize);\n }\n \/\/hair line\n else if (hairExpression >= 2 & hairExpression <= 3) {\n stroke(r-100, g-100, b-100);\n strokeWeight(faceWidth\/5);\n arc(width \/ 2, height \/ 2, faceWidth, faceHeight, -180+faceWidth*hairSize, -faceWidth*hairSize);\n }\n \/\/long hair\n else if (hairExpression >= 3 & hairExpression <= 4) {\n \/\/draw long hair behind face\n rectMode(CORNER);\n fill(r-100, g-100, b-100);\n stroke(r-100, g-100, b-100);\n strokeWeight(faceWidth\/6);\n rect(width\/2-faceWidth\/2, height\/2, faceWidth, faceHeight);\n \/\/draw face forward\n fill(r, g, b); \n strokeWeight(0);\n ellipse(width \/ 2, height \/ 2, faceWidth, faceHeight);\n \/\/draw hair forward\n fill(r-100, g-100, b-100);\n arc(width \/ 2, height \/ 2, faceWidth, faceHeight, faceWidth*hairSize-160, -faceWidth*hairSize-20, CHORD);\n noFill();\n stroke(r-100, g-100, b-100);\n strokeWeight(faceWidth\/5);\n arc(width \/ 2, height \/ 2, faceWidth, faceHeight, -180, 0);\n }\n\n\n \/\/draw eyes\n stroke(0);\n strokeWeight(0);\n var eyeLX = width \/ 2 - faceWidth * 0.15;\n var eyeRX = width \/ 2 + faceWidth * 0.15;\n fill(255);\n ellipse(eyeLX, height \/ 2, eyeSizeX, eyeSizeY);\n ellipse(eyeRX, height \/ 2, eyeSizeX, eyeSizeY);\n fill(0);\n ellipse(eyeLX + eyeOffs*(eyeSizeX \/ 4), height \/ 2, eyeSizeX \/ 2, eyeSizeY \/ 2);\n ellipse(eyeRX + eyeOffs*(eyeSizeX \/ 4), height \/ 2, eyeSizeX \/ 2, eyeSizeY \/ 2);\n\n \/\/draw noses\n fill(r-100,g-100,b-100);\n if (noseExpression <= 1) {\n ellipse(width\/2, height\/2 + faceHeight*0.05, faceWidth\/20, faceHeight\/20);\n } else if(noseExpression >= 1 & noseExpression <=2) {\n rectMode(CENTER);\n rect (width\/2, height\/2 + faceHeight*0.08, faceWidth\/20, 1.3*faceHeight\/20);\n } else {\n triangle(width\/2, height\/2 + faceHeight*0.05, width\/2-faceWidth\/20, height\/2 + faceHeight*0.1, width\/2+faceWidth\/20, height\/2 + faceHeight*0.1)\n }\n \n \/\/draw eyebrows\n var ebrowLX1 = width \/ 2 - faceWidth * 0.2;\n var ebrowLY1 = height \/ 2 - faceHeight * 0.15;\n var ebrowLX2 = width \/ 2 - faceWidth * 0.35;\n var ebrowLY2 = height \/ 2 - faceHeight * 0.15;\n var ebrowRX1 = width \/ 2 + faceWidth * 0.2;\n var ebrowRY1 = height \/ 2 - faceHeight * 0.15;\n var ebrowRX2 = width \/ 2 + faceWidth * 0.35;\n var ebrowRY2 = height \/ 2 - faceHeight * 0.15;\n noFill();\n stroke(0);\n strokeWeight(5);\n \n translate((ebrowLX1+ebrowLX1)\/2, (ebrowLY1+ebrowLY2)\/2);\n rotate(rot);\n line(10, 0, -10, 0);\n rotate(-rot);\n translate(-(ebrowLX1+ebrowLX1)\/2, -(ebrowLY1+ebrowLY2)\/2);\n\n translate((ebrowRX1+ebrowRX1)\/2, (ebrowRY1+ebrowRY2)\/2);\n rotate(-rot);\n line(10, 0, -10, 0);\n rotate(rot);\n translate(-(ebrowRX1+ebrowRX1)\/2, -(ebrowRY1+ebrowRY2)\/2);\n\n \/\/draw mouth\n var mouthLX = width \/ 2 - faceWidth * 0.25;\n var mouthLY = height \/ 2 + faceHeight * 0.25;\n var mouthRX = width \/ 2 + faceWidth * 0.25;\n var mouthRY = height \/ 2 + faceHeight * 0.25;\n noFill();\n strokeWeight(0);\n if (mouthExpression <= 1) {\n \/\/open happy mouth \n fill(255);\n beginShape();\n curveVertex(mouthLX, mouthLY);\n curveVertex(mouthLX, mouthLY);\n curveVertex(0.5*(mouthLX+mouthRX)-faceWidth*0.1, mouthLY+faceHeight*0.1);\n curveVertex(0.5*(mouthLX+mouthRX)+faceWidth*0.1, mouthLY+faceHeight*0.1);\n curveVertex(mouthRX, mouthRY);\n curveVertex(0.5*(mouthLX+mouthRX)+faceWidth*0.1, mouthLY+faceHeight*mouthSize\/2);\n curveVertex(0.5*(mouthLX+mouthRX)-faceWidth*0.1, mouthLY+faceHeight*mouthSize\/2);\n curveVertex(mouthLX, mouthLY);\n curveVertex(mouthLX, mouthLY);\n endShape(); \n } else if (mouthExpression >= 1 & mouthExpression <= 2) {\n \/\/open sad mouth \n fill(255);\n beginShape();\n curveVertex(mouthLX, mouthLY);\n curveVertex(mouthLX, mouthLY);\n curveVertex(0.5*(mouthLX+mouthRX)-faceWidth*0.1, mouthLY-faceHeight*0.1);\n curveVertex(0.5*(mouthLX+mouthRX)+faceWidth*0.1, mouthLY-faceHeight*0.1);\n curveVertex(mouthRX, mouthRY);\n curveVertex(0.5*(mouthLX+mouthRX)+faceWidth*0.1, mouthLY-faceHeight*mouthSize\/2);\n curveVertex(0.5*(mouthLX+mouthRX)-faceWidth*0.1, mouthLY-faceHeight*mouthSize\/2);\n curveVertex(mouthLX, mouthLY);\n curveVertex(mouthLX, mouthLY);\n endShape();\n } else if (mouthExpression >= 2 & mouthExpression <= 3){\n \/\/closed mouth\n strokeWeight(5);\n beginShape();\n curveVertex(mouthLX, mouthLY);\n curveVertex(mouthLX, mouthLY);\n curveVertex(0.5*(mouthLX+mouthRX)-faceWidth*0.1, mouthRY-faceHeight*mouthSize);\n curveVertex(0.5*(mouthLX+mouthRX)+faceWidth*0.1, mouthLY-faceHeight*mouthSize);\n curveVertex(mouthRX, mouthRY);\n curveVertex(mouthRX, mouthRY);\n endShape();\n } else if (mouthExpression >= 3 & mouthExpression <= 4){\n \/\/no expression\n strokeWeight(5);\n beginShape();\n curveVertex(mouthLX, mouthLY);\n curveVertex(mouthLX, mouthLY);\n curveVertex(mouthRX, mouthRY);\n curveVertex(mouthRX, mouthRY);\n endShape();\n }\n} \n\n\/\/Randomize the value of variables when the user clicks to generate a new random face\nfunction mousePressed() {\n faceWidth = random(100, 200);\n faceHeight = random(150, 250);\n eyeSizeX = random(20, 30);\n eyeSizeY = random(10, 30);\n mouthExpression = random(0, 4);\n noseExpression = random(0, 3);\n hairExpression = random(0, 5);\/\/give some chance between 4-5 for no hair\n mouthSize = random(-0.1, 0.1);\n hairSize = random(0.1, 0.2);\n eyeOffs = random(eyeOffAry);\n r = random(100, 255);\n g = random(100, 255);\n b = random(100, 255);\n rot = random(-45, 45);\n}<\/code><\/pre><\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>I want to create a simple cartoon face that has many expressions. Therefore, I add many variables including the mouth, hair, eyebrow, and so on. The outcome looks good. Variable Face \/\/ Setting variables for coding facial actions var eyeSizeX = 20; var eyeSizeY = 20; var faceWidth = 100; var faceHeight = 150; var … <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/09\/10\/variable-face\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> “Variable Face”<\/span><\/a><\/p>\n","protected":false},"author":723,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[97,121],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/70893"}],"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\/723"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=70893"}],"version-history":[{"count":11,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/70893\/revisions"}],"predecessor-version":[{"id":70936,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/70893\/revisions\/70936"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=70893"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=70893"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=70893"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}