{"id":68586,"date":"2021-11-06T11:43:33","date_gmt":"2021-11-06T15:43:33","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=68586"},"modified":"2021-11-06T11:43:33","modified_gmt":"2021-11-06T15:43:33","slug":"project-09-computational-portrait-5","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/11\/06\/project-09-computational-portrait-5\/","title":{"rendered":"Project 09: Computational Portrait"},"content":{"rendered":"\n

For this project, I wanted to create an interactive portrait. I was inspired by Ryan Alexander’s work and wanted to have the portrait show up based on where you clicked your mouse. I wasn’t able to get that working fully, but I still think the final product is pretty cool as the way the portrait shows up changes based on where you click the mouse. I also added randomness to each pixel width and height to make the portrait more animated. <\/p>\n\n\n\n

Final portrait<\/figcaption><\/figure>
$\"\"$
beginning screen<\/figcaption><\/figure>
$\"\"$
image showing up<\/figcaption><\/figure>
sketch<\/a>Download<\/a><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/Catherine Liu\n\/\/jianingl_andrew.cmu.edu\n\/\/Section D\n\/\/project_09\n\n\/\/image shows up in pixels and spreads out on canvas\n\nvar img;\nvar xStart; \/\/stores mouseX\nvar yStart; \/\/stores mouseY\nvar click = true; \/\/checks for mousePressed and removes text\nvar radianSize = 0; \/\/increases area of expansion\nvar clickCol = false; \/\/checks color of background\n\nfunction preload() {\n img = loadImage(\"https:\/\/i.imgur.com\/mzVFTDQ.jpg\");\n}\nfunction setup() {\n img.resize(img.width\/2, img.height\/2);\n createCanvas(img.width, img.height);\n frameRate(50);\n print (img.width\/2);\n print(img.height\/2)\n}\n\nfunction draw() {\n\n \/\/redraws background every mousePressed\n if (clickCol) {\n fill(203, 195, 227);\n rect(0,0,width,height);\n clickCol == false;\n }\n \/\/sets up text that only shows up at beginning\n if(click) {\n background(203, 195, 227)\n push();\n fill(255);\n textAlign(CENTER);\n textSize(20)\n text(\"Click anywhere to draw image\",width\/2, height\/2)\n pop();\n }\n pixelExpand();\n}\n\n\nfunction pixelExpand() {\n for (var vert = yStart; vert < radianSize; vert += 3) {\n for (var hor = xStart; hor < radianSize; hor += 3) {\n noStroke();\n\n \/\/expands right downwards\n var c = img.get(hor, vert); \n fill(c);\n ellipse(hor, vert, random(5), random(5));\n\n \/\/expands right upwards\n var c2 = img.get(hor, height-vert); \n fill(c2);\n ellipse(hor, height-vert, random(5), random(5));\n\n \/\/expands left upwards\n var c3 = img.get(width-hor, height-vert);\n fill(c3);\n ellipse(width-hor, height-vert, random(5), random(5));\n\n \/\/expands left downwards\n var c4 = img.get(width-hor, vert);\n fill(c4);\n ellipse(width-hor, vert, random(5), random(5));\n }\n }\n radianSize += 5; \/\/increase expansion size\n}\n\n\/\/returns starting point for pixels to show\nfunction mousePressed() {\n radianSize = 0;\n clickCol = true;\n click = false; \/\/text disappears\n xStart = constrain(mouseX, 0, width\/4);\n yStart = constrain(mouseY, 0, height\/4);\n}<\/code><\/pre><\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>For this project, I wanted to create an interactive portrait. I was inspired by Ryan Alexander’s work and wanted to have the portrait show up based on where you clicked your mouse. I wasn’t able to get that working fully, but I still think the final product is pretty cool as the way the portrait … <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/11\/06\/project-09-computational-portrait-5\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> “Project 09: Computational Portrait”<\/span><\/a><\/p>\n","protected":false},"author":654,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[111,58],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/68586"}],"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\/654"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=68586"}],"version-history":[{"count":4,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/68586\/revisions"}],"predecessor-version":[{"id":68596,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/68586\/revisions\/68596"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=68586"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=68586"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=68586"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

Final portrait<\/figcaption><\/figure>
$\"\"$
beginning screen<\/figcaption><\/figure>
$\"\"$
image showing up<\/figcaption><\/figure>
sketch<\/a>Download<\/a><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/Catherine Liu\n\/\/jianingl_andrew.cmu.edu\n\/\/Section D\n\/\/project_09\n\n\/\/image shows up in pixels and spreads out on canvas\n\nvar img;\nvar xStart; \/\/stores mouseX\nvar yStart; \/\/stores mouseY\nvar click = true; \/\/checks for mousePressed and removes text\nvar radianSize = 0; \/\/increases area of expansion\nvar clickCol = false; \/\/checks color of background\n\nfunction preload() {\n img = loadImage(\"https:\/\/i.imgur.com\/mzVFTDQ.jpg\");\n}\nfunction setup() {\n img.resize(img.width\/2, img.height\/2);\n createCanvas(img.width, img.height);\n frameRate(50);\n print (img.width\/2);\n print(img.height\/2)\n}\n\nfunction draw() {\n\n \/\/redraws background every mousePressed\n if (clickCol) {\n fill(203, 195, 227);\n rect(0,0,width,height);\n clickCol == false;\n }\n \/\/sets up text that only shows up at beginning\n if(click) {\n background(203, 195, 227)\n push();\n fill(255);\n textAlign(CENTER);\n textSize(20)\n text(\"Click anywhere to draw image\",width\/2, height\/2)\n pop();\n }\n pixelExpand();\n}\n\n\nfunction pixelExpand() {\n for (var vert = yStart; vert < radianSize; vert += 3) {\n for (var hor = xStart; hor < radianSize; hor += 3) {\n noStroke();\n\n \/\/expands right downwards\n var c = img.get(hor, vert); \n fill(c);\n ellipse(hor, vert, random(5), random(5));\n\n \/\/expands right upwards\n var c2 = img.get(hor, height-vert); \n fill(c2);\n ellipse(hor, height-vert, random(5), random(5));\n\n \/\/expands left upwards\n var c3 = img.get(width-hor, height-vert);\n fill(c3);\n ellipse(width-hor, height-vert, random(5), random(5));\n\n \/\/expands left downwards\n var c4 = img.get(width-hor, vert);\n fill(c4);\n ellipse(width-hor, vert, random(5), random(5));\n }\n }\n radianSize += 5; \/\/increase expansion size\n}\n\n\/\/returns starting point for pixels to show\nfunction mousePressed() {\n radianSize = 0;\n clickCol = true;\n click = false; \/\/text disappears\n xStart = constrain(mouseX, 0, width\/4);\n yStart = constrain(mouseY, 0, height\/4);\n}<\/code><\/pre><\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>For this project, I wanted to create an interactive portrait. I was inspired by Ryan Alexander’s work and wanted to have the portrait show up based on where you clicked your mouse. I wasn’t able to get that working fully, but I still think the final product is pretty cool as the way the portrait … <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/11\/06\/project-09-computational-portrait-5\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> “Project 09: Computational Portrait”<\/span><\/a><\/p>\n","protected":false},"author":654,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[111,58],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/68586"}],"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\/654"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=68586"}],"version-history":[{"count":4,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/68586\/revisions"}],"predecessor-version":[{"id":68596,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/68586\/revisions\/68596"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=68586"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=68586"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=68586"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}