{"id":68543,"date":"2021-11-01T15:09:40","date_gmt":"2021-11-01T19:09:40","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=68543"},"modified":"2021-11-01T15:10:26","modified_gmt":"2021-11-01T19:10:26","slug":"project-9-computational-portrait-4","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/11\/01\/project-9-computational-portrait-4\/","title":{"rendered":"Project 9: Computational Portrait"},"content":{"rendered":"\n

For my portrait, I knew I wanted to do something where the user of my program could participate in while creating the portrait. I really enjoy active interactions in my pieces within design, so I’ve been trying to bring that into my coding work as well. So, I decided that the way to do that was to create a click and drag style generator, where the user drags around their mouse to “paint” my portrait. From there, I created randomly generated “pixels” within a certain radius of the mouse, to add an element of randomization to the “painting”. Finally, because it was taking me a long time to actually paint the portrait and I found that annoying, I added in a larger “brush” size through the use of larger random pixels. I think the final outcome is pretty cool, I like how it came out.<\/p>\n\n\n\n

Original photo from this last Monday<\/figcaption><\/figure>
$\"\"$ <\/figure><\/li>
$\"\"$ <\/figure><\/li><\/ul>
Portrait with just the large pixels (L) and with the smaller pixels added (R)<\/figcaption><\/figure>
sketch<\/a><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/Elise Chapman\n\/\/ejchapma\n\/\/ejchapma@andrew.cmu.edu\n\/\/Section D\n\nvar erSelfie; \/\/image storage\n\n\/\/loads the image to be used\nfunction preload() {\n erSelfie = loadImage('https:\/\/i.imgur.com\/GbuQVul.jpg?1');\n}\n\nfunction setup() {\n createCanvas(340,480);\n imageMode(CENTER);\n noStroke();\n background(200);\n}\n\nfunction draw() {\n \/\/ gives radius to the area in which random pixels can appear\n var xPos=random(-10,10);\n var yPos=random(-10,10);\n \/\/ gives the mouse access to the entire image's pixels\n var x = map(mouseX, 0, width, 0, 2117);\n var y = map(mouseY, 0, height, 0, 3000);\n var pixSize;\n var pix = erSelfie.get(x, y); \/\/color of pixel\n if (mouseIsPressed) {\n push();\n translate(mouseX,mouseY);\n fill(pix);\n \/\/ option for large or small pixel generation\n if (keyIsPressed) {\n pixSize=random(10,20);\n } else {\n pixSize=random(1,10);\n }\n ellipse(xPos, yPos, pixSize);\n pop();\n }\n}\n<\/code><\/pre><\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>For my portrait, I knew I wanted to do something where the user of my program could participate in while creating the portrait. I really enjoy active interactions in my pieces within design, so I’ve been trying to bring that into my coding work as well. So, I decided that the way to do that … <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/11\/01\/project-9-computational-portrait-4\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> “Project 9: Computational Portrait”<\/span><\/a><\/p>\n","protected":false},"author":644,"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\/68543"}],"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\/644"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=68543"}],"version-history":[{"count":2,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/68543\/revisions"}],"predecessor-version":[{"id":68551,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/68543\/revisions\/68551"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=68543"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=68543"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=68543"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

Original photo from this last Monday<\/figcaption><\/figure>
$\"\"$ <\/figure><\/li>
$\"\"$ <\/figure><\/li><\/ul>
Portrait with just the large pixels (L) and with the smaller pixels added (R)<\/figcaption><\/figure>
sketch<\/a><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/Elise Chapman\n\/\/ejchapma\n\/\/ejchapma@andrew.cmu.edu\n\/\/Section D\n\nvar erSelfie; \/\/image storage\n\n\/\/loads the image to be used\nfunction preload() {\n erSelfie = loadImage('https:\/\/i.imgur.com\/GbuQVul.jpg?1');\n}\n\nfunction setup() {\n createCanvas(340,480);\n imageMode(CENTER);\n noStroke();\n background(200);\n}\n\nfunction draw() {\n \/\/ gives radius to the area in which random pixels can appear\n var xPos=random(-10,10);\n var yPos=random(-10,10);\n \/\/ gives the mouse access to the entire image's pixels\n var x = map(mouseX, 0, width, 0, 2117);\n var y = map(mouseY, 0, height, 0, 3000);\n var pixSize;\n var pix = erSelfie.get(x, y); \/\/color of pixel\n if (mouseIsPressed) {\n push();\n translate(mouseX,mouseY);\n fill(pix);\n \/\/ option for large or small pixel generation\n if (keyIsPressed) {\n pixSize=random(10,20);\n } else {\n pixSize=random(1,10);\n }\n ellipse(xPos, yPos, pixSize);\n pop();\n }\n}\n<\/code><\/pre><\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>For my portrait, I knew I wanted to do something where the user of my program could participate in while creating the portrait. I really enjoy active interactions in my pieces within design, so I’ve been trying to bring that into my coding work as well. So, I decided that the way to do that … <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/11\/01\/project-9-computational-portrait-4\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> “Project 9: Computational Portrait”<\/span><\/a><\/p>\n","protected":false},"author":644,"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\/68543"}],"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\/644"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=68543"}],"version-history":[{"count":2,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/68543\/revisions"}],"predecessor-version":[{"id":68551,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/68543\/revisions\/68551"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=68543"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=68543"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=68543"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}