sketch<\/a>\n\n\n\n

The pupils follows your cursor!<\/p><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">function setup() {\n createCanvas(400, 400);\n background(220);\n text(\"p5.js vers 0.9.0 test.\", 10, 15);\n}\nvar r = 220;\nvar g = 220;\nvar b = 220;\nvar faceW = 150; \nvar faceH = 150;\nvar randomR = 221;\nvar randomG = 161;\nvar randomB = 119;\nvar eyeSize = 5;\nvar eyeGap = 50\nvar noseW = 30;\nvar noseH = 30;\nvar mouthType = 1;\nvar mouthSize = 50;\nvar bodyW = 200;\n\n\nfunction draw() {\n\n\tbackground(r, g, b);\n\t\/\/body\n\tfill(255 - r, 255 - g, 255 - b);\n\tellipse(width \/ 2, height, bodyW, height);\n\n\t\/\/face\n\tnoStroke();\n\tfill(randomR, randomG, randomB);\n\tellipse(width \/ 2, height \/ 2, faceW, faceH);\n\n\t\/\/eye\n\tfill(255);\n\tellipse((width \/ 2) - (eyeGap \/ 2), height \/ 2, eyeSize * 2);\n\tellipse((width \/ 2) + (eyeGap \/ 2), height \/ 2, eyeSize * 2);\n\tfill(0);\n\tvar y;\n\tif (mouseY >= (height \/ 2) + (eyeSize \/ 2)) {\t\t\t\/\/if pupil goes past top of eye\n\t\ty = min(mouseY, (height \/ 2) + (eyeSize \/ 2));\n\t} else if (mouseY <= (height \/ 2) - eyeSize \/ 2) {\t\t\/\/if pupil goes past bottom of eye\n\t\ty = max(mouseY, (height \/ 2) - (eyeSize \/ 2));\n\t} else {\t\t\t\t\t\t\t\t\t\t\t\t\/\/if pupil is in eye gap\n\t\ty = height \/ 2;\n\t}\n\n\tvar xL; \n\tvar xR;\n\tif (mouseX >= (width \/ 2) + (eyeGap \/ 2)) {\t\t\t\t\t\t\t\t\/\/if pupil goes past right eye\n\t\txR = min(mouseX, (width \/ 2) + (eyeGap \/ 2) + (eyeSize \/ 2));\n\t\txL = min(mouseX, (width \/ 2) - (eyeGap \/ 2) + (eyeSize \/ 2));\n\t} else if (mouseX <= (width \/ 2) - (eyeGap \/ 2)) {\t\t\t\t\t\t\/\/if pupil goes past left eye\n\t\txL = max(mouseX, (width \/ 2) - (eyeGap \/ 2) - (eyeSize \/ 2));\n\t\txR = max(mouseX, (width \/ 2) + (eyeGap \/ 2) - (eyeSize \/ 2));\n\t} else {\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\/\/if pupil is in eye gap\n\t\txL = (width \/ 2) - (eyeGap \/ 2);\n\t\txR = (width \/ 2) + (eyeGap \/ 2);\n\t}\n\n\tellipse(xL, y, eyeSize);\t\/\/leftEye\n\tellipse(xR, y, eyeSize);\t\/\/rightEye\n\n\t\/\/nose\n\tfill(randomR - 20, randomG - 20, randomB - 20);\n\tellipse(width \/ 2, (height \/ 2) + (faceH \/ 5), noseW, noseH);\n\tfill(randomR, randomG, randomB);\n\tellipse(width \/ 2, (height \/ 2) + (faceH \/ 5) - 10, noseW, noseH);\n\n\t\/\/mouth\n\tfill(0);\n\tif (mouthType <= 2 & mouthType >= 1) {\n\t rect((width \/ 2) - (mouthSize \/ 2), (height \/ 2) + (faceH \/ 5) * 2, mouthSize, 3);\n\t} else {\n\t\tcircle(width \/ 2, (height \/ 2) + (faceH \/ 5) * 2, mouthSize * 0.25);\n\t}\n\n}\n\nfunction mousePressed() {\n\tbodyW = random(width \/ 1.5, width \/ 3);\n\n\tfaceW = random(width \/ 4, width \/ 2);\n\tfaceH = random(height \/ 4, height \/ 2);\n\n\trandomR = random(150, 200);\n\trandomG = random(110, 130);\n\trandomB = random(70, 90);\n\n\teyeGap = random(faceW \/ 2, faceW \/ 5);\n\teyeSize = random(5, 20);\n\n\tnoseW = random(20, 40);\n\tnoseH = random(30, 50);\n\n\tmouthType = random(0, 2);\n\tmouthSize = random(faceW \/ 2, faceW \/ 10);\n\n\tr = random(255);\n\tg = random(255);\n\tb = random(255);\n\n}<\/code><\/pre><\/div><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>sketch The pupils follows your cursor! function setup() { createCanvas(400, 400); background(220); text(“p5.js vers 0.9.0 test.”, 10, 15); } var r = 220; var g = 220; var b = 220; var faceW = 150; var faceH = 150; var randomR = 221; var randomG = 161; var randomB = 119; var eyeSize = 5; … <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/09\/10\/aarnavp-project-2-variable-face\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> “aarnavp \u2013\u00a0Project 2 Variable Face”<\/span><\/a><\/p>\n","protected":false},"author":750,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[97,58,1],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/70977"}],"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\/750"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=70977"}],"version-history":[{"count":4,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/70977\/revisions"}],"predecessor-version":[{"id":71012,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/70977\/revisions\/71012"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=70977"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=70977"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=70977"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}