{"id":71022,"date":"2022-09-10T16:01:34","date_gmt":"2022-09-10T20:01:34","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/?p=71022"},"modified":"2022-09-10T16:02:06","modified_gmt":"2022-09-10T20:02:06","slug":"generative-face","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/09\/10\/generative-face\/","title":{"rendered":"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><div class=\"wp-block-file\"><a class=\"p5_sketch_link\" data-height=\"480\" data-width=\"680\" id=\"wp-block-file--media-b3f448c0-82b5-408e-be2e-a1e1588ba42f\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/09\/sketch-149.js\">generative face<\/a><iframe src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/plugins\/p5-embedder\/p5_iframe.html\" class=\"p5_exampleFrame\" width=\"680\" height=\"480\"><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">var x = 150;\nvar y = 220;\nvar faceWidth = 150;\nvar faceHeight = 200;\nvar hairLength = 180;\nvar mouthSize = 20;\nvar eyeL = 40;\nvar eyeW = 20;\nvar pupiL = 15;\nvar bgR = 225;\nvar bgG = 123;\nvar bgB = 138;\nvar bodThic = 100;\n\n\n\nfunction setup() {\n    createCanvas(480, 640);\n}\n\nfunction draw() {\n\n    \/\/original face but made dependant on itself not coords make teh stuff in relation to the face width\n    background(bgR, bgG, bgB);\n\n    fill(0)\n    rect(width\/2-0.6*faceWidth, height\/2-0.2*faceHeight, (width\/2+0.6*faceWidth)-(width\/2-0.6*faceWidth), hairLength)\n\n    fill(255-bgR, 225-bgG,225-bgB);\n    ellipse(width \/ 2, height, bodThic, height);\n\n    fill(253,227,220);\n    strokeWeight(0);\n    ellipse(width\/2, height\/2, faceWidth, faceHeight);    \/\/face\n\n    fill(0);\n    quad(width\/2-0.25*faceWidth, height\/2-0.5*faceHeight, width\/2+0.25*faceWidth, height\/2-0.5*faceHeight, width\/2+0.6*faceWidth, height\/2-0.2*faceHeight, width\/2-0.6*faceWidth, height\/2-0.2*faceHeight)    \/\/trap bang\n\n    fill(225,199,190);\n    triangle(width\/2, height\/2 ,width\/2-0.07*faceWidth,height\/2+0.23*faceHeight,width\/2+0.07*faceWidth,height\/2+0.23*faceHeight);    \/\/nose\n\n    strokeWeight(3);\n    stroke(239,94,94);\n    noFill();\n    ellipse(width\/2, height\/2+0.35*faceHeight, mouthSize);\n\n\n    fill(245,249,255); \n    strokeWeight(0);\n    ellipse(width\/2-0.25*faceWidth, height\/2-0.0025*faceHeight, eyeL, eyeW);    \/\/eye left\n    ellipse(width\/2+0.25*faceWidth, height\/2+0.0025*faceHeight, eyeL, eyeW);    \/\/ eye right\n\n    fill(127,71,42);\n    strokeWeight(0);\n    ellipse(width\/2-0.25*faceWidth, height\/2-0.0025*faceHeight, pupiL);   \/\/pupil left\n    ellipse(width\/2+0.25*faceWidth, height\/2+0.0025*faceHeight, pupiL);    \/\/ pupil right \n\n    fill(253,227,220);\n   \/\/ rect((width\/2-0.25*faceWidth) - (eyeL \/ 2), (height\/2-0.0025*faceHeight) - (eyeW \/ 2), eyeL, eyeW \/ 2);    \/\/lids left\n  \n    fill(10)\n    rect ((width\/2-0.25*faceWidth) - (eyeL \/ 2), (height\/2-0.0025*faceHeight) - (eyeW \/ 2), eyeL, 2);   \/\/eyebrow left\n    rect ((width\/2+0.25*faceWidth) - (eyeL \/ 2), (height\/2+0.0025*faceHeight) - (eyeW \/ 2), eyeL, 2);   \/\/eyebrow left\n\n}\n\n\nfunction mousePressed(){\n    faceWidth = random(75, 200);\n    faceHeight = random(100, 300);\n    hairLength = random(100, 300);\n    mouthSize = random(5, 40);\n    eyeL = random(20, 50);\n    eyeW = random(10, 50);\n    pupiL = random(5, 20);\n    bgR = random(0, 225);\n    bgG = random(0, 225);\n    bgB = random(0, 225);\n    bodThic = random(100, width);\n}\n<\/code><\/pre><\/div><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>generative face var x = 150; var y = 220; var faceWidth = 150; var faceHeight = 200; var hairLength = 180; var mouthSize = 20; var eyeL = 40; var eyeW = 20; var pupiL = 15; var bgR = 225; var bgG = 123; var bgB = 138; var bodThic = 100; function &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/09\/10\/generative-face\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Variable Face&#8221;<\/span><\/a><\/p>\n","protected":false},"author":747,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[97,58],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/71022"}],"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\/747"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=71022"}],"version-history":[{"count":2,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/71022\/revisions"}],"predecessor-version":[{"id":71026,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/71022\/revisions\/71026"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=71022"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=71022"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=71022"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}