{"id":65655,"date":"2021-09-11T22:15:35","date_gmt":"2021-09-12T02:15:35","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=65655"},"modified":"2021-09-11T22:15:35","modified_gmt":"2021-09-12T02:15:35","slug":"project-02-variable-faces-2","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/09\/11\/project-02-variable-faces-2\/","title":{"rendered":"Project-02: Variable Faces"},"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>Since I did not use the environmental variables to write my function, it took me a while at first to rewrite parts of my code. Then I re-define some variables by using the var &hellip;=random(num1, num2) to approach to the final generative faces. It is frustrating during the process when debugging it, but I feel super proud of myself when I finally get my code working.&nbsp;<\/div>\n<div class=\"wp-block-file\"><a class=\"p5_sketch_link\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/09\/sketch-103.js\" data-width=\"480\" data-height=\"640\">siyunw-Generative faces<\/a><iframe src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/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 eyeSize = 10;\nvar faceWidth = 100;\nvar faceHeight = 150;\nvar hairWidth =350;\nvar hairHeight =350;\nvar neckWidth = width \/ 2;\nvar neckHeight= 4*neckWidth \/ 3;\nvar mouthSize= 40;\nvar mouthHeight = 30;\nvar backgroundR=250;\nvar backgroundG=150;\nvar backgroundB=100;\n\nfunction setup() {\n    createCanvas(480, 640);\n}\n\nfunction draw() {\n    background(backgroundR,backgroundG,backgroundB);\n\n    fill(255,204,153);\n    circle((width-hairWidth) \/ 2,height \/ 2,50);  \n    circle(width-(width-hairWidth) \/ 2,height \/ 2,50);\/\/ears\n\n    fill(255,153,51);\n    ellipse(width \/ 2, height \/ 2, hairWidth, hairHeight);\n    rect((width-hairWidth) \/ 2,(height \/ 2),hairWidth,4*(hairHeight \/ 2) \/ 3);\/\/face\n    \n    var eyeLX = width \/ 2 - faceWidth * 0.15;\n    var eyeRX = width \/ 2 + faceWidth * 0.15;\n    fill(0);\n    ellipse(eyeLX, height \/ 2, eyeSize, eyeSize);\n    ellipse(eyeRX, height \/ 2, eyeSize, eyeSize);\/\/eyes\n\n\n    fill(0);\n    ellipse(width\/2,3*height \/ 4,mouthSize,mouthHeight);\n    \/\/mouse\n\n}\n\nfunction mousePressed() {\n    \/\/ when the user clicks, these variables are reassigned\n    \/\/ to random values within specified ranges. For example,\n    \/\/ 'faceWidth' gets a random value between 75 and 150.\n    backgroundR=random(200,300);\n    backgroundG=random(100,200);\n    backgroundB=random(50,150);\n    faceWidth = random(75, 150);\n    faceHeight = random(100, 200);\n    eyeSize = random(10, 30);\n    hairWidth = random(300,400)\n    hairHeight = random(300,400);\n    neckWidth = random(150,250);\n    mouthSize = random(35,80);\n    mouthHeight = random(25,70);\n}<\/code><\/pre><\/div>\n\n\n<p><\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>Since I did not use the environmental variables to write my function, it took me a while at first to rewrite parts of my code. Then I re-define some variables by using the var &hellip;=random(num1, num2) to approach to the final generative faces. It is frustrating during the process when debugging it, but I feel &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/09\/11\/project-02-variable-faces-2\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project-02: Variable Faces&#8221;<\/span><\/a><\/p>\n","protected":false},"author":676,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[97,57],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/65655"}],"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\/676"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=65655"}],"version-history":[{"count":4,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/65655\/revisions"}],"predecessor-version":[{"id":65661,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/65655\/revisions\/65661"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=65655"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=65655"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=65655"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}