{"id":71311,"date":"2022-09-10T22:15:19","date_gmt":"2022-09-11T02:15:19","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/?p=71311"},"modified":"2022-09-16T15:16:59","modified_gmt":"2022-09-16T19:16:59","slug":"project-02-face-generator","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/09\/10\/project-02-face-generator\/","title":{"rendered":"Project 02 &#8211; face generator &#8211; srauch"},"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>This face generator makes lots of cool folks to chill with! About half of the characteristics of each person &mdash; for instance, the shirt size and color, the background, and the skin tone &mdash; are completely random, while other components such as the eye color or headwear\/hairstyle are randomly selected from a list of options. Writing this code really dusted off the ol&rsquo; middle school algebra. Some of said algebra is visible in the positively chicken-scratch notebook hieroglyphs I made while figuring out some of the first few variables. Once I had those established, though, I found I wasn&rsquo;t writing anything down, instead just relying on the variables I&rsquo;d already defined to write the next ones&ndash;quite the departure from how I worked through last week&rsquo;s homework.<\/p>\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"1024\" height=\"768\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/09\/project-2-notes-1024x768.jpg\" alt=\"\" class=\"wp-image-71323\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/09\/project-2-notes-1024x768.jpg 1024w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/09\/project-2-notes-300x225.jpg 300w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/09\/project-2-notes-768x576.jpg 768w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/09\/project-2-notes-1536x1152.jpg 1536w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/09\/project-2-notes-2048x1536.jpg 2048w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/09\/project-2-notes-1200x900.jpg 1200w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\"><\/figure><div><a class=\"p5_sketch_link\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/09\/sketch-195.js\" data-width=\"480\" data-height=\"640\">sketch<\/a>\n\n\n\n<p><\/p><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\">var width = 480;\nvar height = 640;\n\n\/\/background color\nvar backgroundR = 100;\nvar backgroundG = 0;\nvar backgroundB = 0;\n\n\/\/shirt color and size\nvar shirtR = 200;\nvar shirtG = 200;\nvar shirtB = 0;\nvar shirtWide = 400;\nvar shirtTall = 100;\n\n\/\/skintone\nvar skinR = 47;\nvar skinG = 39;\nvar skinB = 32;\n\n\/\/neck\nvar neckTall = 250;\nvar neckWide = 100;\nvar neckY = 200;\n\n\/\/head\nvar headWide = 250;\nvar headTall = 300;\nvar headX = width\/2;\nvar headY = 200;\n\n\/\/ears\nvar earSize = 40;\n\n\/\/eyes\nvar eyeColor = 1;\nvar eyeSize = 30;\nvar eyeDistance = 30;\n\n\/\/nose\nvar noseLong = 20;\nvar noseWide = 10;\n\n\/\/mouth\nvar mouthSelector = 1;\n\n\/\/eyebrows\nvar eyebrowTall = 30;\nvar eyebrowWide = 30;\nvar eyebrowColorSelector = 1;\nvar eyebrowWeight = 10;\n\n\/\/hair\nvar hairstyle = 1;\n\nfunction setup() {\n    createCanvas(480, 640);\n    background(220);\n    text(\"p5.js vers 0.9.0 test.\", 10, 15);\n}\n\nfunction draw() {\n    noStroke();\n    background(backgroundR, backgroundG, backgroundB);\n\n    \/\/ sleeve location variables -- have to be here (not global) so will update with new shirtWide values \n    var shirtCornerStar = ((width-shirtWide)\/2)+((shirtWide\/4)\/2); \/\/x coord of starboard sleeve\n    var shirtCornerPort = width-shirtCornerStar; \/\/x coord of port sleeve\n\n    \/\/shirt\n    fill(shirtR, shirtG, shirtB);\n    \/\/rect(((width-shirtWide)\/2), (height-shirtTall), shirtWide, shirtTall); \n    rect(shirtCornerStar, (height-shirtTall), (shirtWide-(shirtWide\/4)), shirtTall);\n\n    \/\/sleeves\n    fill(shirtR-20, shirtG-20, shirtB-20); \/\/makes sleeves slightly darker than shirt\n    triangle(shirtCornerStar, (height-shirtTall), shirtCornerStar, height, (shirtCornerStar-((shirtWide\/4)\/2)), height); \/\/starboard sleeve\n    triangle( shirtCornerPort, (height-shirtTall), shirtCornerPort, height, (shirtCornerPort+((shirtWide\/4)\/2)), height); \/\/port sleeve\n\n    \/\/neck\n    neckWide = shirtWide\/3\n    neckY = height-neckTall-shirtTall+(shirtTall\/6);\n    fill(skinR-20, skinG-20, skinB-20);\n    rect(width\/2-neckWide\/2, neckY, neckWide, neckTall);\n    ellipse(width\/2, neckY+neckTall, neckWide, neckTall\/4);\n\n    \/\/head\n    headX = width\/2\n    headY = neckY\n    fill(skinR, skinG, skinB);\n    ellipse(headX, headY, headWide, headTall);\n\n    \/\/ears\n    fill(skinR-10, skinG-10, skinB-10);\n    ellipse(headX-(headWide\/2), headY, earSize, earSize*1.5); \/\/starboard ear\n    ellipse(width-(headX-(headWide\/2)), headY, earSize, earSize*1.5); \/\/port ear\n\n    \/\/redraw head to cover ears, theres prob a better way to do this but ears rely on the head variables\n    fill(skinR, skinG, skinB);\n    ellipse(headX, headY, headWide, headTall);\n\n    \/\/nose (length and width)\n    strokeWeight(noseWide);\n    stroke(skinR, skinG-20, skinB-20);\n    line(headX, headY, headX, headY+noseLong);\n    noStroke();\n\n    \/\/eyes (color and distance from center of head)\n    if (eyeColor &lt;= 1) {\n        fill(54, 43, 17); \/\/brown\n    } else if (eyeColor &lt;= 2) {\n        fill(52, 95, 45); \/\/green\n    } else if (eyeColor &lt;= 2.8) {\n        fill(13, 200, 200); \/\/blue\n    } else {\n        fill(255, 20, 0); \/\/red!\n    }\n    ellipse((width\/2)-eyeDistance, headY, eyeSize);\n    ellipse((width\/2)+eyeDistance, headY, eyeSize);\n\n\n    \/\/mouth (arc of different size and stroke color)\n    if (mouthSelector &lt;= 1) { \/\/open smile\n        fill(61, 32, 31);\n        arc(headX, headY+noseLong*2, headWide\/3, headTall\/4, radians(0), radians(180));\n    } else if (mouthSelector &lt;= 2) { \/\/closed smile\n        noFill();\n        stroke(skinR+20, skinG-20, skinB-20);\n        strokeWeight(20);\n        arc(headX, headY+noseLong*2, headWide\/3, headTall\/5, radians(10), radians(170));\n        noStroke();\n    } else { \/\/bubblegum\n        fill(40, 0, 0);\n        ellipse(headX+10, headY+(headTall\/2)-(headTall\/6), 30); \/\/mouth\n        fill(238, 168, 234, 70); \/\/pink transparent\n        ellipse(headX+10, headY+(headTall\/2)-(headTall\/6), 175, 175); \/\/bubble1\n        ellipse(headX+10, headY+(headTall\/2)-(headTall\/6), 180, 180); \/\/bubble 2\n        fill(255, 240, 240, 90);\n        ellipse(headX+40, headY+(headTall\/2)-headTall\/3, 30, 30); \/\/highlight\n    }\n\n    \/\/and finally, hair!\n    if (hairstyle &lt;=1) { \/\/bald\n        \/\/do nothing\n    } else if (hairstyle &lt;=2) { \/\/beanie\n    strokeWeight(12);\n    strokeCap(ROUND);\n        if (hairstyle &lt;= 1.3){\n            fill(168, 47, 47); \/\/red hat\n            stroke(168-10, 47-10, 47-10);\n        } else if (hairstyle &lt;=1.6) {\n            fill(200 , 120, 218); \/\/pink hat\n            stroke(200-10, 120-10, 218-10);\n        } else {\n            fill(86, 93, 200); \/\/perriwinkle hat\n            stroke(86-10, 93-10, 200-10);\n        }\n        arc(headX, headY-(headTall\/2)+40, headWide+5, headTall-60, radians(180), radians(360));\n        rect(headX-(headWide\/2)-10, headY-(headTall\/2)+40, headWide+20, 60);\n    } else { \/\/bowl cut\n        if (hairstyle &lt;= 2.3){\n            fill(45, 40, 30); \/\/dark brown\n            stroke(45, 40, 30);\n        } else if (hairstyle &lt;=2.8) {\n            fill(130, 96, 57); \/\/light brown\n            stroke(130, 96, 57);\n        } else if (hairstyle &lt;=2.9 & skinR > 80 && skinG > 80 && skinB >30) {\n            fill(222, 129, 25); \/\/red\n            stroke(222, 129, 25);\n        } else {\n            fill(25, 183, 222); \/\/blue\n            stroke(25, 183, 222);\n        }\n        arc(headX, headY-headY\/4, headWide+5, headTall-60, radians(180), radians(360));\n    }\n\n    \/\/eyebrows\n    if (eyebrowColorSelector &lt;=1) {\n        stroke(40, 35, 20); \/\/dark brown\n    } else if (eyebrowColorSelector &lt;=2) {\n        stroke(230, 230, 138); \/\/blonde\n    } else {\n        stroke(140, 230, 200); \/\/blue\n    }\n\n    noFill();\n    strokeWeight(eyebrowWeight);\n    arc((width\/2)-eyeDistance, headY-eyebrowTall, eyebrowWide, 20, radians(200), radians(340));\n    arc((width\/2)+eyeDistance, headY-eyebrowTall, eyebrowWide, 20, radians(200), radians(340));\n    noStroke();\n\n}\n\nfunction mousePressed() {\n    \/\/background color change\n    backgroundR = random(0, 255);\n    backgroundG = random(0, 255);\n    backgroundB = random(0, 255);\n\n    \/\/shirt color and size change\n    shirtR = random(0, 255);\n    shirtG = random(0, 255);\n    shirtB = random(0, 255);\n    shirtWide = random((width-(width\/3)), (width-20));\n    shirtTall = random((height\/6), (height\/4));\n\n    \/\/neck and skin changes\n    skinR = random(60, 200);\n    skinG = random(skinR, skinR-10);\n    skinB = random(skinR-20, skinR-30);\n    neckTall = random(200, 250);\n\n    \/\/head\n    headWide = random(neckWide+100, neckWide+150);\n    headTall = random(headWide, headWide*1.4);\n    earSize = random(50, 60);\n\n    \/\/eyes\n    eyeColor = random(0,3); \n    eyeSize = random(20, 40);\n    eyeDistance = random(30, headWide\/2-30);\n\n    \/\/nose\n    noseLong = random(headTall\/10, headTall\/6);\n    noseWide = random(25, 40);\n\n    \/\/mouth\n    mouthSelector = random(0, 3);\n\n    \/\/eyebrows\n    eyebrowColorSelector = random(0,2.1);\n    eyebrowWeight = random(10, 18);\n    eyebrowTall = random(20, 40);\n\n    \/\/hair\n    hairstyle = random(0,3);\n}\n<\/code><\/pre><\/div><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>This face generator makes lots of cool folks to chill with! About half of the characteristics of each person &mdash; for instance, the shirt size and color, the background, and the skin tone &mdash; are completely random, while other components such as the eye color or headwear\/hairstyle are randomly selected from a list of options. &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/09\/10\/project-02-face-generator\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project 02 &#8211; face generator &#8211; srauch&#8221;<\/span><\/a><\/p>\n","protected":false},"author":754,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[97,56],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/71311"}],"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\/754"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=71311"}],"version-history":[{"count":6,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/71311\/revisions"}],"predecessor-version":[{"id":71918,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/71311\/revisions\/71918"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=71311"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=71311"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=71311"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}