{"id":75444,"date":"2022-11-26T19:10:02","date_gmt":"2022-11-27T00:10:02","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/?p=75444"},"modified":"2022-11-26T19:10:02","modified_gmt":"2022-11-27T00:10:02","slug":"project-09-computational-portrait-4","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/11\/26\/project-09-computational-portrait-4\/","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>I created my self-portrait using different symbols that are linked to the pixel colors on the image. When the mouse is pressed, the shapes are drawn to create the image. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/11\/me1-1024x1012.jpg\" alt=\"\" class=\"wp-image-75452\" width=\"299\" height=\"295\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/11\/me1-1024x1012.jpg 1024w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/11\/me1-300x297.jpg 300w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/11\/me1-768x759.jpg 768w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/11\/me1.jpg 1038w\" sizes=\"(max-width: 299px) 85vw, 299px\"><\/figure><figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/11\/me-coded1-1-1024x1012.png\" alt=\"\" class=\"wp-image-75453\" width=\"298\" height=\"294\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/11\/me-coded1-1-1024x1012.png 1024w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/11\/me-coded1-1-300x296.png 300w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/11\/me-coded1-1-768x759.png 768w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/11\/me-coded1-1.png 1105w\" sizes=\"(max-width: 298px) 85vw, 298px\"><\/figure><div><a class=\"p5_sketch_link\" data-width=\"450\" data-height=\"450 id=\" wp-block-file--media-318a125f-d907-4b95-b725-49d4a697a99d href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/11\/sketch-34.js\">sketch<\/a><iframe src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/plugins\/p5-embedder\/p5_iframe.html\" class=\"p5_exampleFrame\" width=\"450\" height=\"450 id=\"><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/amy hu\n\/\/amyhu\n\/\/section d\n\nvar img;\nvar smallPoint, largePoint;\nvar symbols = [\"&#10048;\", \"&#10059;\", \"&#10031;\"]\n\nfunction preload() {\n    img = loadImage('https:\/\/i.imgur.com\/2ZzOdG6.png');\n}\n\nfunction setup() {\n    createCanvas(450,450);\n    \/\/ smallPoint = 5;\n    \/\/ largePoint = 20;\n    imageMode(CENTER);\n    noStroke();\n    background(255);\n    img.loadPixels();\n}\n\nfunction draw() {\n    \/\/mouse location determines point size\n    var pointillize = map(mouseX, 0, width, smallPoint, largePoint);\n\n    \/\/picks random x y value\n    var x = floor(random(img.width));\n    var y = floor(random(img.height));\n\n    \/\/gets pixel color form a xy value\n    var pix = img.get(mouseX, mouseY);\n\n    \/\/fills pixel color\n    fill(pix, 128);\n    ellipse(x, y, pointillize, pointillize);\n\n    \/\/draws symbols when mouse is pressed \n    if(mouseIsPressed){\n        textSize(random(10,35));\n        text(random(symbols), mouseX, mouseY);\n    }\n}\n<\/code><\/pre><\/div><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>I created my self-portrait using different symbols that are linked to the pixel colors on the image. When the mouse is pressed, the shapes are drawn to create the image. sketch \/\/amy hu \/\/amyhu \/\/section d var img; var smallPoint, largePoint; var symbols = [&#8220;&#10048;&#8221;, &#8220;&#10059;&#8221;, &#8220;&#10031;&#8221;] function preload() { img = loadImage(&#8216;https:\/\/i.imgur.com\/2ZzOdG6.png&#8217;); } function &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/11\/26\/project-09-computational-portrait-4\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project 09: Computational Portrait&#8221;<\/span><\/a><\/p>\n","protected":false},"author":722,"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\/f2022\/wp-json\/wp\/v2\/posts\/75444"}],"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\/722"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=75444"}],"version-history":[{"count":4,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/75444\/revisions"}],"predecessor-version":[{"id":76167,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/75444\/revisions\/76167"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=75444"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=75444"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=75444"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}