My attempt at making an interactive variable face generator:<\/p>\n\n\n\n
gnmarino-project 2<\/a><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/variables to use to randomize\nvar head = 0\nvar hair = 0\nvar ear = 0\nvar nose = 0\nvar mouth = 0\n\/\/hair color\nvar color1 = 0\nvar color2 = 0\nvar color3 = 0\n\/\/variables to use to structure everything\nvar faceDetail = 2\nvar faceWidth = 300\nvar faceHeight = 450\n\/\/made my own grid system\nvar cellHeight = 80\nvar cellWidth = 80\n\nfunction setup() {\n createCanvas(480, 640);\n}\n\n function draw() {\n background(255);\n noStroke();\n \/\/base skin color\n fill(249, 224, 195);\n\/\/(the ears)there are four different ear types. \n\/\/each are associated a specific number that is randomly choosen in mouse pressed functionj\n\/\/used if statement so that when mouse is pressed it only picks one option (because only one option is true)\n if (ear == 1) {\n ellipse( 1.5 * cellWidth, 3.5 * cellHeight, 2 * cellWidth, cellHeight);\n ellipse( 4.5 * cellWidth, 3.5 * cellHeight, 2 * cellWidth, cellHeight);\n } else if (ear == 2) {\n ellipse( 1.25 * cellWidth, 3.5 * cellHeight, cellWidth, 2 * cellHeight);\n ellipse( 4.75 * cellWidth, 3.5 * cellHeight, cellWidth, 2 * cellHeight);\n } else if (ear == 3) {\n ellipse( 1.5 * cellWidth, 3.5 * cellHeight, 2 * cellWidth, 1.5 * cellHeight);\n ellipse( 4.5 * cellWidth, 3.5 * cellHeight, 2 * cellWidth, 1.5 *cellHeight);\n } else {\n ellipse( 1.5 * cellWidth, 3.5 * cellHeight, 1.25 * cellWidth, cellHeight);\n ellipse( 4.5 * cellWidth, 3.5 * cellHeight, 1.25 * cellWidth, cellHeight);\n } \n \n\/\/ (the hair) works the same as ears. has 4 different types of hair\n if (hair == 1) { \/\/mohawk\n \/\/fill color is completely randomized with variables in mouse pressed so that R, B, G is a completely random number everytime\n \/\/so it can make any color in the RBG system to colorize hair\n fill(color1, color2, color3);\n rect(2.5 * cellWidth, .6 * cellHeight, cellWidth, cellHeight);\n } else if (hair == 2) { \/\/afro\n fill(color1, color2, color3);\n ellipse(3 * cellWidth, 2 * cellHeight, 4.5 * cellWidth, 2.75 * cellHeight);\n } else if (hair == 3) { \/\/long hair\n fill(color1, color2, color3);\n ellipse(3 * cellWidth, 2 * cellHeight, 4.75 * cellWidth, 2.5 * cellHeight);\n rect(.625 * cellWidth, 2 * cellHeight, 4.75 * cellWidth, 4.25 * cellHeight);\n } else { \/\/bald\n \/\/to show baldness I put a point that is hidden behind head\n point(width\/2, height\/2);\n }\n\n fill(249, 224, 195); \/\/skin color\n\/\/heads\n\/\/same if statment system as before, 3 head types\n if (head == 1) {\n quad(cellWidth, 1.5 * cellHeight, 5 * cellWidth, 1.5 * cellHeight, 4.5 * cellWidth, 6.5 * cellHeight, 1.5 * cellWidth, 6.5 * cellHeight);\n } else if (head == 2) {\n ellipse(width\/2, height\/2, faceWidth, faceHeight);\n } else {\n quad( 1.25 * cellWidth, 3 * cellHeight, 4.75 * cellWidth, 3 * cellHeight, 4 * cellWidth, 6.5 * cellHeight, 2 * cellWidth,6.5 * cellHeight);\n circle(width\/2, 3 * cellHeight, faceWidth);\n }\n\/\/ eyes, 1 type\n fill(50);\n ellipse(2.5 * cellWidth, 3 * cellHeight, .25 * cellWidth, .5 * cellHeight);\n ellipse(3.5 * cellWidth, 3 * cellHeight, .25 * cellWidth, .5 * cellHeight);\n\n noFill();\n strokeWeight(2);\n stroke(50)\n\/\/nose, 4 nose types\n if (nose == 1) { \/\/button nose\n ellipse(width\/2, height\/2, .75 * cellWidth, .5 * cellHeight);\n } else if (nose == 2) { \/\/ big nose\n arc(width\/2, height\/2, cellWidth, .75 * cellHeight, PI + HALF_PI, TWO_PI + HALF_PI);\n } else if (nose == 3) { \/\/downwards nose\n arc(width\/2, height\/2, .5 * cellWidth, .75 * cellHeight, 0, PI);\n } else { \/\/skinny nose\n arc(width\/2, height\/2, cellWidth, .25 * cellHeight, PI + HALF_PI, TWO_PI + HALF_PI);\n }\n\n\/\/mouth, 4 types\n if (mouth == 1) { \/\/expressionless mouth\n strokeWeight(5);\n line(2.5 * cellWidth, 5 * cellHeight, 3.5 * cellWidth, 5 * cellHeight);\n } else if (mouth == 2) {\/\/open mouth\n fill(50);\n arc(3 * cellWidth, 5 * cellHeight, 1.25 * cellWidth, cellHeight, 0, PI, CHORD);\n } else if (mouth == 3) { \/\/smirk\n noFill();\n strokeWeight(5);\n beginShape();\n curveVertex(3 * cellWidth, 5.25 * cellHeight);\n curveVertex(3 * cellWidth, 5.25 * cellHeight);\n curveVertex(3.3 * cellWidth, 5.20 * cellHeight);\n curveVertex(3.5 * cellWidth, 5 * cellHeight);\n curveVertex(3.5 * cellWidth, 5 * cellHeight);\n endShape();\n } else { \/\/sad mouth\n strokeWeight(5);\n arc(3 * cellWidth, 5 * cellHeight, .75 * cellWidth, .5 * cellHeight, PI, TWO_PI);\n }\n\/\/beauty marks, 2 types\n if (faceDetail == 1) { \/\/leftside\n strokeWeight(8);\n point(2.25 * cellWidth, 5 * cellHeight);\n } else if (faceDetail == 2) {\/\/right side\n strokeWeight(8);\n point(4.25 * cellWidth, 4 * cellHeight);\n }\n}\nfunction mousePressed() {\n\/\/baracks to make random only do integars\n head = random([1, 2, 3]);\n ear = random([1, 2, 3, 4]);\n nose = random([1, 2, 3, 4]);\n mouth = random([1, 2, 3, 4]);\n hair = random([1, 2, 3, 4]);\n\/\/hair color randomizer\n color1 = random(0, 255);\n color2 = random(0, 255);\n color3 = random(0, 255);\n\/\/added extra integars to make beauty marks less frequent and only happen 1\/4 of the time\n faceDetail = random([1, 2, 3, 4, 5, 6, 7, 8]);\n}\n<\/code><\/pre><\/p>\n\n\n\n<p>Doing this project taught me a lot about the process of coding and fixing your code when it is wrong. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"772\" height=\"1024\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/09\/IMG_0131-772x1024.jpg\" alt=\"\" class=\"wp-image-65801\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/09\/IMG_0131-772x1024.jpg 772w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/09\/IMG_0131-226x300.jpg 226w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/09\/IMG_0131-768x1018.jpg 768w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/09\/IMG_0131.jpg 906w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px\"><figcaption>My Characters I created as inspiration<\/figcaption><\/figure><p>I first started off with a grandiose plan to make these 4 faces and then mix and match each part of each face so it muddles all the faces randomly. However, it was a lofty goal for the time I had.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"1013\" height=\"1024\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/09\/IMG_0130-1013x1024.jpg\" alt=\"\" class=\"wp-image-65802\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/09\/IMG_0130-1013x1024.jpg 1013w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/09\/IMG_0130-297x300.jpg 297w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/09\/IMG_0130-768x776.jpg 768w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/09\/IMG_0130-1200x1213.jpg 1200w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/09\/IMG_0130.jpg 1211w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\"><figcaption>My process of figuring out my grid system<\/figcaption><\/figure><p>This led me to settling but still constructing my code in a fully self-made variable grid structure, if statements, and using random() to choose between the the variants I created for each facial feature.<\/p>\n\n\n\n<p>Additionally, I randomized the faces even more by making hair colors able to be whatever shade in RBG it desires. <\/p>\n\n\n\n<p>Overall, I learned a lot of the simple powers of the random() function and I wish I could’ve added on more to this project. <\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>My attempt at making an interactive variable face generator: gnmarino-project 2 \/\/variables to use to randomize var head = 0 var hair = 0 var ear = 0 var nose = 0 var mouth = 0 \/\/hair color var color1 = 0 var color2 = 0 var color3 = 0 \/\/variables to use to structure … <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/09\/12\/project-2-generating-faces-by-mouse-clicking\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> “Project 2: Generating Faces by Mouse Clicking”<\/span><\/a><\/p>\n","protected":false},"author":658,"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\/f2021\/wp-json\/wp\/v2\/posts\/65796"}],"collection":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/users\/658"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=65796"}],"version-history":[{"count":2,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/65796\/revisions"}],"predecessor-version":[{"id":65803,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/65796\/revisions\/65803"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=65796"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=65796"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=65796"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}