{"id":75098,"date":"2022-11-05T13:44:28","date_gmt":"2022-11-05T17:44:28","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/?p=75098"},"modified":"2022-11-05T13:45:12","modified_gmt":"2022-11-05T17:45:12","slug":"project-09-srauch-portrait","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/11\/05\/project-09-srauch-portrait\/","title":{"rendered":"Project 09 &#8211; srauch &#8211; 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>Here is my &ldquo;glass door&rdquo; portrait. You can change the fidelity of it by moving the mouse up and down. By moving your mouse all the way to the bottom of it, the full portrait is revealed.<\/p>\n<div><a class=\"p5_sketch_link\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/11\/sketch-4.js\" data-width=\"400\" data-height=\"533\">sketch<\/a><iframe src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/plugins\/p5-embedder\/p5_iframe.html\" class=\"p5_exampleFrame\" width=\"400\" height=\"533\"><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/Sam Rauch, section B, srauch@andrew.cmu.edu, project 09 \n\/\/this code makes a \"glass door\" picture of me with colored ellipses, like you're looking\n\/\/at me through one of those textured glass doors. It samples the image\n\/\/color at each pixel location (though it skips every other y row to help it run a bit faster)\n\/\/and draws a circle there. The circle size is tied to mouseY, so when the mouse is higher up, \n\/\/the circles are larger and the image is lower-fidelity, but it gets higher fidelity as the\n\/\/user moves the mouse down the image. \n\nvar samImg;\nvar uploadImg;\n\nvar dotArray = [];\n\nvar first = 0;\n\nfunction preload(){\n    uploadImage = \"https:\/\/i.imgur.com\/nTNXyHg.jpg\";\n}\n\nfunction setup() {\n    createCanvas(400, 533);\n    background(220);\n    samImg = loadImage(uploadImage);\n    frameRate(1);\n}\n\nfunction draw() {\n    \n    background(50);\n    image(samImg, 0, 0);\n    \n    if (first == 0){ \/\/ define all the dot objects; run once at start of draw\n\n        for (var y = 0; y &lt; 533; y+=2){ \/\/fill array with dots all over canvas\n            for (var x = 0; x &lt; 400; x++){\n                var clr = samImg.get(x, y);\n                dotArray.push(makeDot(x, y, 20, clr))\n            }\n        }\n        first ++;\n    }\n\n    var sizeTicker = map(mouseY, 0, height, 45, 3); \/\/set dot size to move with mouseY\n\n    shuffle(dotArray, true);\n    for(var i = 0; i &lt; dotArray.length; i++){ \/\/draw dots in array\n        dotArray[i].size = sizeTicker;\n        dotArray[i].drawDot();\n    }\n}\n\n\/\/dot object and draw function\nfunction makeDot(xpos,ypos,siz,clr){\n    var dot = {x: xpos, y:ypos, size:siz,\n            color:clr,\n            drawDot: drawDotFunction}\n    return dot;\n}\n\nfunction drawDotFunction(){\n    stroke(this.color);\n    \/\/print(this.color)\n    strokeWeight(this.size);\n    point(this.x, this.y);\n}\n<\/code><\/pre><\/div><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>Here is my &ldquo;glass door&rdquo; portrait. You can change the fidelity of it by moving the mouse up and down. By moving your mouse all the way to the bottom of it, the full portrait is revealed. sketch \/\/Sam Rauch, section B, srauch@andrew.cmu.edu, project 09 \/\/this code makes a &#8220;glass door&#8221; picture of me with &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/11\/05\/project-09-srauch-portrait\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project 09 &#8211; srauch &#8211; portrait&#8221;<\/span><\/a><\/p>\n","protected":false},"author":754,"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\/f2022\/wp-json\/wp\/v2\/posts\/75098"}],"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\/754"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=75098"}],"version-history":[{"count":2,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/75098\/revisions"}],"predecessor-version":[{"id":75100,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/75098\/revisions\/75100"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=75098"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=75098"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=75098"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}