{"id":68455,"date":"2021-10-31T22:38:09","date_gmt":"2021-11-01T02:38:09","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=68455"},"modified":"2021-10-31T22:38:57","modified_gmt":"2021-11-01T02:38:57","slug":"project-09-computational-portrait-4","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/10\/31\/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><div class=\"wp-block-file\"><a class=\"p5_sketch_link\" data-width=\"480\" data-height=\"480\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/sketch-156.js\">sketch<\/a><a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/sketch-156.js\" class=\"wp-block-file__button\" download=\"\">Download<\/a><iframe src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/plugins\/p5-embedder\/p5_iframe.html\" class=\"p5_exampleFrame\" width=\"480\" height=\"480\"><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/ This program deconstructs an image and then reconstructs it in a new way.\n\/\/ The image is sliced into pieces and then drawn together in a new order\n\/\/ Horizontally and vertically\n\nvar img;\nvar lineHeight = [];\nvar lineWidth = [];\nvar numSlices = 6;   \/\/must be even\n\n\/\/ slices are ordered and grouped into 4 arrays\nvar imgSlices1 = [];\nvar imgSlices2 = [];\nvar imgSlices3 = [];\nvar imgSlices4 = [];\n\nfunction preload() {\n    img = loadImage('https:\/\/i.imgur.com\/c6ZRijQ.jpg');\n}\n\nfunction setup() {\n    createCanvas(480, 480);\n    imageMode(CENTER);\n    noStroke();\n    img.loadPixels();\n\n    \/\/ get x and y values for the slices based on canvas size and number of slices\n    for (var i=0; i&lt;numSlices; i++) {\n        let h = height\/(numSlices+1);\n        let h1 = height\/numSlices;\n        let w = width\/(numSlices+1);\n        let w1 = width\/numSlices;\n        lineHeight[i] = h1*i + h1\/2;\n        lineWidth[i] = w1*i + w1\/2;\n        \/\/ rearrange image pieces based on odd or even and fill arrays\n        if (i%2==0) {\n          imgSlices2.push(img.get(0, lineHeight[i], width\/2, h));\n          imgSlices4.push(img.get(lineWidth[i], 0, w, height));\n        }\n        else {\n          imgSlices1.push(img.get(0, lineHeight[i], width\/2, h));\n          imgSlices3.push(img.get(lineWidth[i], 0, w, height));\n        }\n    }\n}\n\nfunction draw() {\n    \/\/there is some background that shows ecpecially with small numSlices values\n    \/\/ this sets background to match original image\n    var bgrnd = img.get(random(width), random(height));\n    background(bgrnd);\n\n    \/\/draw image in new order\n    for (var i=0; i&lt;numSlices\/2; i++) {\n        image(imgSlices1[i], width\/4, lineHeight[i]*2);\n        image(imgSlices2[i], 3*width\/4, lineHeight[i]*2);\n        image(imgSlices3[i], lineWidth[i], height\/2);\n        image(imgSlices4[i], lineWidth[i]+width\/2, height\/2);\n    }\n    noLoop();\n}\n<\/code><\/pre><\/div>\n\n\n\n<p>Based on what I&rsquo;ve seen classmates post, I am not sure I did this project correctly. I am really happy with my outcome, though, and it is close to what I visualized before I started writing any code. When I read the prompt for this assignment, I was inspired by I video I had seen of an artist cutting up pictures and then putting them back together in strange ways that added new perspective and dimension. With this in mind, I decided to cut up the image and then layer it on top of itself in new ways. Technically, the image is displayed twice, but not the same way either time. With a quick change of code you can see how the portrait is drawn with more or fewer &lsquo;slices&rsquo;. <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"593\" height=\"592\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screenshot-2.png\" alt=\"\" class=\"wp-image-68474\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screenshot-2.png 593w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screenshot-2-300x300.png 300w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screenshot-2-150x150.png 150w\" sizes=\"(max-width: 593px) 85vw, 593px\"><figcaption>numSlices = 4<\/figcaption><\/figure><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"589\" height=\"593\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screenshot-1.png\" alt=\"\" class=\"wp-image-68473\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screenshot-1.png 589w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screenshot-1-298x300.png 298w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screenshot-1-150x150.png 150w\" sizes=\"(max-width: 589px) 85vw, 589px\"><figcaption>numSlices = 6<\/figcaption><\/figure><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"591\" height=\"591\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screenshot-3.png\" alt=\"\" class=\"wp-image-68471\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screenshot-3.png 591w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screenshot-3-300x300.png 300w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screenshot-3-150x150.png 150w\" sizes=\"(max-width: 591px) 85vw, 591px\"><figcaption>numSlices = 10<\/figcaption><\/figure><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"594\" height=\"596\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screenshot-4.png\" alt=\"\" class=\"wp-image-68472\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screenshot-4.png 594w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screenshot-4-300x300.png 300w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screenshot-4-150x150.png 150w\" sizes=\"(max-width: 594px) 85vw, 594px\"><figcaption>numSlices = 30<\/figcaption><\/figure><p><\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>sketchDownload \/\/ This program deconstructs an image and then reconstructs it in a new way. \/\/ The image is sliced into pieces and then drawn together in a new order \/\/ Horizontally and vertically var img; var lineHeight = []; var lineWidth = []; var numSlices = 6; \/\/must be even \/\/ slices are ordered &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/10\/31\/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":673,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[111,56,1],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/68455"}],"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\/673"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=68455"}],"version-history":[{"count":3,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/68455\/revisions"}],"predecessor-version":[{"id":68476,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/68455\/revisions\/68476"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=68455"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=68455"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=68455"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}