{"id":68434,"date":"2021-10-31T20:05:18","date_gmt":"2021-11-01T00:05:18","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=68434"},"modified":"2021-10-31T20:05:18","modified_gmt":"2021-11-01T00:05:18","slug":"project-09-computational-portrait-2","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/10\/31\/project-09-computational-portrait-2\/","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><div class=\"wp-block-file\"><a class=\"p5_sketch_link\" data-width=\"300\" data-height=\"300\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/sketch-151.js\">portrait<\/a><iframe src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/plugins\/p5-embedder\/p5_iframe.html\" class=\"p5_exampleFrame\" width=\"300\" height=\"300\"><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">var img;\n\nfunction preload() {\n    img = loadImage(\"https:\/\/i.imgur.com\/TWN7sA6.jpeg\");\n}\n\nfunction setup() {\n    createCanvas(300, 300);\n    frameRate(60);\n    noStroke();\n    img.resize(width, height);\n    img.loadPixels();\n}\n\nfunction draw() {\n    fill(0);\n    text(\"keep mouse pressed for different effect\", 50, 10);\n\n    if(mouseIsPressed) { \/\/ while mouse is pressed, generate random squares \n        let pix_x = floor(random(img.width));\n        let pix_y = floor(random(img.height));\n        let pix = img.get(pix_x, pix_y);\n        fill(pix);\n        var square_x = random(width);\n        var square_y = random(height);\n        let mapX = map(mouseX, 0, width, 0, 20);\n        square(square_x, square_y, mapX);\n    } else { \/\/ otherwise, use circles \n        let x = floor(random(img.width));\n        let y = floor(random(img.height));\n        let pix = img.get(x, y);\n        fill(pix);\n        circle(x, y, random(15)); \/\/diameter random \n    }\n}\n<\/code><\/pre><\/div>\n\n\n<p>I used an image that I found on imgur by Mihaela Noroc, a Romanian photographer. I chose this particular image because it involved a lot of vibrant colors, which I thought would be fun to work with. Here are some screenshots of my portrait:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"820\" height=\"816\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-31-at-7.52.57-PM.png\" alt=\"\" class=\"wp-image-68437\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-31-at-7.52.57-PM.png 820w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-31-at-7.52.57-PM-300x300.png 300w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-31-at-7.52.57-PM-150x150.png 150w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-31-at-7.52.57-PM-768x764.png 768w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px\"><\/figure><p><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"816\" height=\"818\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-31-at-7.53.20-PM.png\" alt=\"\" class=\"wp-image-68438\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-31-at-7.53.20-PM.png 816w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-31-at-7.53.20-PM-300x300.png 300w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-31-at-7.53.20-PM-150x150.png 150w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-31-at-7.53.20-PM-768x770.png 768w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px\"><\/figure><p><\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>portrait var img; function preload() { img = loadImage(&#8220;https:\/\/i.imgur.com\/TWN7sA6.jpeg&#8221;); } function setup() { createCanvas(300, 300); frameRate(60); noStroke(); img.resize(width, height); img.loadPixels(); } function draw() { fill(0); text(&#8220;keep mouse pressed for different effect&#8221;, 50, 10); if(mouseIsPressed) { \/\/ while mouse is pressed, generate random squares let pix_x = floor(random(img.width)); let pix_y = floor(random(img.height)); let pix = img.get(pix_x, &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/10\/31\/project-09-computational-portrait-2\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project 09: Computational Portrait&#8221;<\/span><\/a><\/p>\n","protected":false},"author":671,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[111,56],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/68434"}],"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\/671"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=68434"}],"version-history":[{"count":2,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/68434\/revisions"}],"predecessor-version":[{"id":68439,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/68434\/revisions\/68439"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=68434"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=68434"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=68434"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}