{"id":75104,"date":"2022-11-05T14:37:10","date_gmt":"2022-11-05T18:37:10","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/?p=75104"},"modified":"2022-11-05T14:37:33","modified_gmt":"2022-11-05T18:37:33","slug":"project-09-computational-portrait","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/11\/05\/project-09-computational-portrait\/","title":{"rendered":"Project 09: Computational Portrait"},"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>For my image, I noticed that the background lights were blurry, and I wanted to implement that in the code with mousPressesed. So each time you use you press the mouse, a filter is applied to the whole canvas and the whole canvas gets a bit blurry. Additionally, I wanted there to be a difference in shapes for the background and the person.  <\/p>\n\n\n\n<div class=\"wp-block-media-text alignwide is-stacked-on-mobile\" style=\"grid-template-columns:51% auto\"><figure class=\"wp-block-media-text__media\"><img loading=\"lazy\" width=\"616\" height=\"610\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/11\/image-7.png\" alt=\"\" class=\"wp-image-75108 size-full\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/11\/image-7.png 616w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/11\/image-7-300x297.png 300w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/11\/image-7-150x150.png 150w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px\"><\/figure><div class=\"wp-block-media-text__content\">\n<p>Small Blur<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-media-text alignwide is-stacked-on-mobile\" style=\"grid-template-columns:52% auto\"><figure class=\"wp-block-media-text__media\"><img loading=\"lazy\" width=\"607\" height=\"608\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/11\/image-5.png\" alt=\"\" class=\"wp-image-75106 size-full\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/11\/image-5.png 607w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/11\/image-5-300x300.png 300w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/11\/image-5-150x150.png 150w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px\"><\/figure><div class=\"wp-block-media-text__content\">\n<p>No Blur<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-media-text alignwide is-stacked-on-mobile\" style=\"grid-template-columns:52% auto\"><figure class=\"wp-block-media-text__media\"><img loading=\"lazy\" width=\"612\" height=\"613\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/11\/image-8.png\" alt=\"\" class=\"wp-image-75109 size-full\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/11\/image-8.png 612w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/11\/image-8-300x300.png 300w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/11\/image-8-150x150.png 150w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px\"><\/figure><div class=\"wp-block-media-text__content\">\n<p>Medium Blur<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-media-text alignwide is-stacked-on-mobile\" style=\"grid-template-columns:52% auto\"><figure class=\"wp-block-media-text__media\"><img loading=\"lazy\" width=\"610\" height=\"607\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/11\/image-4.png\" alt=\"\" class=\"wp-image-75105 size-full\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/11\/image-4.png 610w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/11\/image-4-300x300.png 300w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/11\/image-4-150x150.png 150w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px\"><\/figure><div class=\"wp-block-media-text__content\">\n<p>Lots of Blur <\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-media-text alignwide is-stacked-on-mobile\"><figure class=\"wp-block-media-text__media\"><img loading=\"lazy\" width=\"488\" height=\"488\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/11\/image-9.png\" alt=\"\" class=\"wp-image-75110 size-full\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/11\/image-9.png 488w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/11\/image-9-300x300.png 300w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/11\/image-9-150x150.png 150w\" sizes=\"(max-width: 488px) 85vw, 488px\"><\/figure><div class=\"wp-block-media-text__content\">\n<p>Image<\/p>\n<\/div><\/div>\n\n\n\n<p><a class=\"p5_sketch_link\" data-width=\"480\" data-height=\"480\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/11\/sketch-5.js\">asuSketch<\/a><a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/11\/sketch-5.js\"><\/a><iframe src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/plugins\/p5-embedder\/p5_iframe.html\" class=\"p5_exampleFrame\" width=\"480\" height=\"480\"><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/ Your name: Ashley Su\n\/\/ Your andrew ID: ashleysu\n\/\/ Your section (C):  \n\n\nvar img;\nvar stars = [\" &#9733; \", \" &#9734; \",\" &#10026; \",\" &#10022; \", \" &#10023; \"]\nvar faces = ['( &#865;&bull;&#8239;&#860;&#662; &#865;&bull;)', '( &#865;&#7508;&#8239;&#860;&#662; &#865;&#7508;)', '( &#865;~&#8239;&#860;&#662; &#865;&deg;)', '( &#865;&#9697;_&#10659; &#865;&#9697;)']\n\nfunction preload() {\n    img = loadImage(\"https:\/\/i.imgur.com\/spqIDsb.jpeg\")\n}\n\nfunction setup() {\n    createCanvas(480, 480);\n    imageMode(CENTER);\n    img.loadPixels();\n    img.resize(480, 480);                              \/\/resize image to canvas\n    frameRate(50000);\n    background(0);\n}\n\nfunction draw() {\n    \/\/pick random x and y\n    var x = floor(random(img.width));\n    var y = floor(random(img.height));\n    \n    \/\/pull pixel color from that x and y\n    var pixelColor = img.get(x, y);\n    \n    \/\/fill using the pixel color\n    fill(pixelColor);\n    \n\n    if (x&gt;((width\/2)-50) & x<((width\/2)+50) && y>height\/2 && y < height) {        \/\/setting the faces smilies to be next where the actaul face is \n        strokeWeight(5);\n        textSize(random(5, 20));                    \/\/ smaller near face\n        text(random(faces), x, y);                  \n      } else {\n        textSize(random(5, 20)); \n        text(random(stars), x, y);                  \/\/draws stars everywhere else \n    }\n\n}\n\n\nfunction mousePressed() {\n\n        filter(BLUR,3);                   \/\/ when mouse is pressed, it blurs the layer \n}<\/code><\/pre><\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>For my image, I noticed that the background lights were blurry, and I wanted to implement that in the code with mousPressesed. So each time you use you press the mouse, a filter is applied to the whole canvas and the whole canvas gets a bit blurry. Additionally, I wanted there to be a difference &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/11\/05\/project-09-computational-portrait\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project 09: Computational Portrait&#8221;<\/span><\/a><\/p>\n","protected":false},"author":761,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[111,57],"tags":[61],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/75104"}],"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\/761"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=75104"}],"version-history":[{"count":2,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/75104\/revisions"}],"predecessor-version":[{"id":75939,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/75104\/revisions\/75939"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=75104"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=75104"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=75104"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}