{"id":68364,"date":"2021-10-31T11:50:30","date_gmt":"2021-10-31T15:50:30","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=68364"},"modified":"2021-10-31T11:50:30","modified_gmt":"2021-10-31T15:50:30","slug":"project-09-portrait-2","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/10\/31\/project-09-portrait-2\/","title":{"rendered":"Project 09: 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-height=\"280\" data-width=\"420\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/sketch-142.js\">sketch<\/a><iframe src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/plugins\/p5-embedder\/p5_iframe.html\" class=\"p5_exampleFrame\" width=\"420\" height=\"280\"><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/Anthony Pan\n\/\/Section C\n\n\n\n\/\/empty variable to hold\/load portrait\nvar img;\n\n\/\/load portrait\nfunction preload() {\n   img = loadImage(\"https:\/\/i.imgur.com\/OZnUWbW.jpg\");\n\n}\n\n\/\/set up canvas\nfunction setup() {\n    createCanvas(420, 280);\n\n}\n\n\/\/create pixelation effect using mouseX position\nfunction draw() {\n    background(220);\n\n    \/\/diplay image\n    image(img, 0, 0, width, height);\n\n    \/\/constrain mouseX position to canvas and change diamter of circles according to mouseX position\n    var mousePosition = map(constrain(mouseX, 0, 280), 0, width, 0, 20);\n    \/\/create circles\n    for(var row = 0; row &lt; 32; row++) {\n        for(var col = 0; col &lt;= 48; col++){\n            var x = col * 10;\n            var y = row * 10;\n            \/\/sample pixel color\n            var sampleColor = img.get(x*15, y*15);\n            noStroke();\n            fill(sampleColor);\n            \/\/draw circle\n            circle(x + 10, y + 10, mousePosition); \n        }\n    }\n}<\/code><\/pre><\/div>\n\n\n\n<p>I wanted to create a portrait that would get pixelated as you moved the mouse from left to right. It was cool to see it become stylized, almost like I was applying a filter to the image. <\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>sketch \/\/Anthony Pan \/\/Section C \/\/empty variable to hold\/load portrait var img; \/\/load portrait function preload() { img = loadImage(&#8220;https:\/\/i.imgur.com\/OZnUWbW.jpg&#8221;); } \/\/set up canvas function setup() { createCanvas(420, 280); } \/\/create pixelation effect using mouseX position function draw() { background(220); \/\/diplay image image(img, 0, 0, width, height); \/\/constrain mouseX position to canvas and change diamter &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/10\/31\/project-09-portrait-2\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project 09: Portrait&#8221;<\/span><\/a><\/p>\n","protected":false},"author":635,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[111,57],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/68364"}],"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\/635"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=68364"}],"version-history":[{"count":1,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/68364\/revisions"}],"predecessor-version":[{"id":68366,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/68364\/revisions\/68366"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=68364"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=68364"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=68364"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}