{"id":75439,"date":"2022-11-06T23:35:24","date_gmt":"2022-11-07T04:35:24","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/?p=75439"},"modified":"2022-11-06T23:53:13","modified_gmt":"2022-11-07T04:53:13","slug":"project-09-computational-portrait-custom-pixel-3","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/11\/06\/project-09-computational-portrait-custom-pixel-3\/","title":{"rendered":"Project 09: Computational Portrait (Custom Pixel)"},"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>i used my portrait as an each pixel to create a whole portrait. I used smaller images for face &amp; background section, but bigger and rotated images for hair and eye section to separate the section of my feature. <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"958\" height=\"958\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/11\/Screen-Shot-2022-11-06-at-11.52.40-PM.png\" alt=\"\" class=\"wp-image-75456\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/11\/Screen-Shot-2022-11-06-at-11.52.40-PM.png 958w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/11\/Screen-Shot-2022-11-06-at-11.52.40-PM-300x300.png 300w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/11\/Screen-Shot-2022-11-06-at-11.52.40-PM-150x150.png 150w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/11\/Screen-Shot-2022-11-06-at-11.52.40-PM-768x768.png 768w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\"><\/figure><div class=\"wp-block-file\"><a class=\"p5_sketch_link\" data-width=\"480\" data-height=\"480\" id=\"wp-block-file--media-8f3f7c11-6f70-4b9d-bf4a-fa1ea4815655\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/11\/sketch-33.js\">sketch<\/a><a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/11\/sketch-33.js\" class=\"wp-block-file__button\" download=\"\" aria-describedby=\"wp-block-file--media-8f3f7c11-6f70-4b9d-bf4a-fa1ea4815655\">Download<\/a><iframe src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/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\">\/\/ Alicia Kim\n\/\/ yoonbink\n\/\/ Section B\n\nfunction preload(){ \/\/load the image\n    alicia = loadImage(\"https:\/\/i.imgur.com\/FPEjcyO.jpeg\");\n}\n\n\nfunction setup() {\n    createCanvas(480, 480);\n    imageMode(CENTER);\n    angleMode(DEGREES);\n    background(220);\n    alicia.resize(480,480); \/\/resize alicia to canvas size\n    alicia.loadPixels(); \/\/load pixels\n}\n\nfunction draw() {\n    var x = floor(random(alicia.width)); \/\/random x-coordinate value\n    var y = floor(random(alicia.height)); \/\/random y-coordinate value\n    var pixColor = alicia.get(x,y); \/\/get random coordinate in the canvas\n    tint(pixColor); \/\/tint with the color of that coordinate \n\n\/\/ divide sections by hair and the rest\n\n    if (pixColor[0]&gt;130) { \/\/face & background has smaller images\n        image(alicia,x,y,9,9);\n    }\n\n    if (pixColor[0]&lt;130) { \/\/hair section has bigger & rotated images \n        push();\n        translate(x,y);\n        rotate(180);\n        image(alicia,0,0,13,13);\n        pop();   \n    }\n}<\/code><\/pre><\/div><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>i used my portrait as an each pixel to create a whole portrait. I used smaller images for face &amp; background section, but bigger and rotated images for hair and eye section to separate the section of my feature. sketchDownload \/\/ Alicia Kim \/\/ yoonbink \/\/ Section B function preload(){ \/\/load the image alicia = &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/11\/06\/project-09-computational-portrait-custom-pixel-3\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project 09: Computational Portrait (Custom Pixel)&#8221;<\/span><\/a><\/p>\n","protected":false},"author":726,"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\/f2022\/wp-json\/wp\/v2\/posts\/75439"}],"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\/726"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=75439"}],"version-history":[{"count":2,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/75439\/revisions"}],"predecessor-version":[{"id":75457,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/75439\/revisions\/75457"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=75439"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=75439"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=75439"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}