{"id":68420,"date":"2021-10-31T18:20:46","date_gmt":"2021-10-31T22:20:46","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=68420"},"modified":"2021-10-31T18:20:46","modified_gmt":"2021-10-31T22:20:46","slug":"project-9-computational-portrait-2","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/10\/31\/project-9-computational-portrait-2\/","title":{"rendered":"Project 9: Computational Portrait"},"content":{"rendered":"\n

sketch<\/a><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/John Henley; jhenley; 15-104 section D\n\nvar img;\nvar smallPoint;\nvar largePoint;\n\nfunction preload() {\n \/\/loads image\n img = loadImage('https:\/\/i.imgur.com\/JmBw9uk.jpg');\n}\n\nfunction setup() {\n createCanvas(331, 442);\n img.resize(img.width\/3, img.height\/3); \/\/reduce size of image\n print(img.width);\n print(img.height);\n smallPoint = 4;\n largePoint = 40;\n imageMode(CENTER);\n noStroke();\n background(255);\n img.loadPixels();\n}\n\nfunction draw() {\n \/\/Maps mouseX to point size range to pixels\n var pointillize = map(mouseX, 0, width, smallPoint, largePoint);\n \/\/Calculates random pixel generation locations\n var x = floor(random(img.width));\n var y = floor(random(img.height));\n var pix = img.get(x, y);\n \/\/Maps mouseY for to framerate range\n var yframes = map(mouseY, 0, height, 1, 200);\n fill(pix, 128);\n \/\/Draws square pixels\n square(x, y, pointillize);\n \/\/Changes frame rate\n frameRate(yframes);\n}<\/code><\/pre><\/p>\n\n\n\n<p>I wanted the interaction on my portrait to be the speed at which the computer builds the portrait. I made this performed using the mouseY value: the user can move the mouse along the y-axis to change the frame rate. I also made it so the mouseX value determines the size of the square pixels used to build the picture.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/image-10.png\" alt=\"\" class=\"wp-image-68422\" width=\"626\" height=\"836\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/image-10.png 492w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/image-10-225x300.png 225w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px\"><figcaption>Appearance of portrait when mouse cursor is at bottom right of canvas.<\/figcaption><\/figure><figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/image-11.png\" alt=\"\" class=\"wp-image-68423\" width=\"629\" height=\"841\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/image-11.png 492w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/image-11-224x300.png 224w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px\"><figcaption>Appearance of portrait when mouse cursor is at bottom left of canvas.<\/figcaption><\/figure><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>sketch \/\/John Henley; jhenley; 15-104 section D var img; var smallPoint; var largePoint; function preload() { \/\/loads image img = loadImage(‘https:\/\/i.imgur.com\/JmBw9uk.jpg’); } function setup() { createCanvas(331, 442); img.resize(img.width\/3, img.height\/3); \/\/reduce size of image print(img.width); print(img.height); smallPoint = 4; largePoint = 40; imageMode(CENTER); noStroke(); background(255); img.loadPixels(); } function draw() { \/\/Maps mouseX to point size range … <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/10\/31\/project-9-computational-portrait-2\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> “Project 9: Computational Portrait”<\/span><\/a><\/p>\n","protected":false},"author":650,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[111],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/68420"}],"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\/650"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=68420"}],"version-history":[{"count":1,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/68420\/revisions"}],"predecessor-version":[{"id":68424,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/68420\/revisions\/68424"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=68420"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=68420"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=68420"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}