{"id":68336,"date":"2021-10-30T23:58:13","date_gmt":"2021-10-31T03:58:13","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=68336"},"modified":"2021-10-30T23:58:13","modified_gmt":"2021-10-31T03:58:13","slug":"project-09-computational-portrait-custom-pixel-2","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/10\/30\/project-09-computational-portrait-custom-pixel-2\/","title":{"rendered":"Project 09: Computational Portrait (Custom Pixel)"},"content":{"rendered":"\n

project 09 sketch copy<\/a><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">var compportraitImg;\n\nfunction preload() {\n ImageURL = \"https:\/\/i.imgur.com\/ZTxOcmt.jpg\";\n compportraitImg = loadImage(ImageURL);\n}\n\nfunction setup() {\n \/\/ canvas proportional to image size\n createCanvas(400, 480);\n compportraitImg.loadPixels();\n background(220);\n frameRate(300);\n\n}\n\nfunction draw() {\n \/\/have the correct color show at right location \n var kx = floor(random(compportraitImg.width));\n var ky = floor(random(compportraitImg.height));\n var colorLoc = compportraitImg.get(kx, ky);\n noStroke();\n fill(colorLoc);\n\n \/\/scale to size of canvas\n x = map(kx, 0, compportraitImg.width, 0, width);\n y = map(ky, 0, compportraitImg.height, 0, height);\n var j = dist(width\/2, height\/2, x, y);\n j = j % 20;\n bubble(x, y, j, 4);\n\n}\n\nfunction bubble(x, y, radius, npoints) {\n angle = PI \/ npoints;\n \n beginShape();\n for (let a = 0; a < PI; a += angle) {\n sx = x + cos(a) * radius;\n sy = y + sin(a) * radius;\n vertex(x + cos(a) * radius, y + sin(a) * radius);\n }\n endShape();\n \n}<\/code><\/pre><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>I made my “custom pixel” in the shape of half of a hexagon and made it such that they populate the canvas in a circle pattern and leave some of the background peeking through.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"397\" height=\"477\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-30-at-11.44.42-PM.png\" alt=\"\" class=\"wp-image-68342\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-30-at-11.44.42-PM.png 397w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-30-at-11.44.42-PM-250x300.png 250w\" sizes=\"(max-width: 397px) 85vw, 397px\"><\/figure><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"395\" height=\"476\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-30-at-11.54.40-PM.png\" alt=\"\" class=\"wp-image-68345\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-30-at-11.54.40-PM.png 395w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-30-at-11.54.40-PM-249x300.png 249w\" sizes=\"(max-width: 395px) 85vw, 395px\"><\/figure><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>I made my “custom pixel” in the shape of half of a hexagon and made it such that they populate the canvas in a circle pattern and leave some of the background peeking through.<\/p>\n","protected":false},"author":651,"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\/68336"}],"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\/651"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=68336"}],"version-history":[{"count":8,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/68336\/revisions"}],"predecessor-version":[{"id":68349,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/68336\/revisions\/68349"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=68336"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=68336"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=68336"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}