{"id":68408,"date":"2021-10-31T17:39:57","date_gmt":"2021-10-31T21:39:57","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=68408"},"modified":"2021-10-31T17:39:57","modified_gmt":"2021-10-31T21:39:57","slug":"portrait","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/10\/31\/portrait\/","title":{"rendered":"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>The first thing that came to mind when thinking of portrait is Warhol&rsquo;s Mao. I radially sampled a portrait of Mao and mapped the sum of each sampled pixel&rsquo;s red and blue values from 0 to 5, and used that as the size of each dot to make a pop-art-esk halftone effect. I attached a photo because the actual output is too big. Enjoy!!<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"537\" height=\"677\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-31-at-1.04.18-AM.png\" alt=\"\" class=\"wp-image-68409\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-31-at-1.04.18-AM.png 537w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-31-at-1.04.18-AM-238x300.png 238w\" sizes=\"(max-width: 537px) 85vw, 537px\"><\/figure><div><a class=\"p5_sketch_link\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/sketch-148.js\" data-width=\"1060\" data-height=\"1340\">sketch<\/a>\n\n\n\n<p><\/p><iframe src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/plugins\/p5-embedder\/p5_iframe.html\" class=\"p5_exampleFrame\" width=\"1060\" height=\"1340\"><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">var img;\nvar step = 5;\nvar rmax = 6;\nvar xpos = [];\nvar ypos = [];\nvar rad = [];\n\nfunction preload() {\n    img = loadImage('https:\/\/i.imgur.com\/R13OPCr.jpeg');\n}\n\n\nfunction setup() {\n    createCanvas(2*530, 2*670);\n    image(img, 0, 0, width\/2, height\/2);\n}\n\n\nfunction draw() {\n    rectMode(CENTER);\n    noStroke();\n    var xposNum;\n    var yposNum;\n    for (var r = 0; r &lt; img.width; r+=step) {\n        for (var theta = 0; theta &lt; img.height; theta+=step) {\n            xposNum = img.width\/2+r*cos(radians(theta));\n            yposNum = img.height\/2+r*sin(radians(theta));\n            var c = get(xposNum,yposNum);\n            fill(c);\n            xpos.push(xposNum);\n            ypos.push(yposNum);\n\n            c = red(c)+blue(c);\n            c = map(c, 0, 510, 0, rmax);\n            if (xposNum &gt; img.width || yposNum &gt; img.height || xposNum &lt; 0 || yposNum &lt; 0) {\n                c = rmax;\n            }\n            rad.push(rmax - c);\n        }\n    }\n\n    background(255);\n\n    push();\n    for (var i = 0; i &lt; xpos.length; i++) {\n        fill('RED');\n        ellipse(xpos[i], ypos[i], rad[i]);\n    }\n    translate(width\/2, 0);\n    for (var i = 0; i &lt; xpos.length; i++) {\n        fill('GREEN');\n        ellipse(xpos[i], ypos[i], rad[i]);\n    }\n    pop();\n    push();\n    translate(0, height\/2);\n    for (var i = 0; i &lt; xpos.length; i++) {\n        fill('BLUE');\n        ellipse(xpos[i], ypos[i], rad[i]);\n    }\n    pop();\n    push();\n    translate(width\/2, height\/2);\n    for (var i = 0; i &lt; xpos.length; i++) {\n        fill('MAGENTA');\n        ellipse(xpos[i], ypos[i], rad[i]);\n    }\n\n    noLoop();\n}\n<\/code><\/pre><\/div><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>The first thing that came to mind when thinking of portrait is Warhol&rsquo;s Mao. I radially sampled a portrait of Mao and mapped the sum of each sampled pixel&rsquo;s red and blue values from 0 to 5, and used that as the size of each dot to make a pop-art-esk halftone effect. I attached a &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/10\/31\/portrait\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Portrait&#8221;<\/span><\/a><\/p>\n","protected":false},"author":657,"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\/f2021\/wp-json\/wp\/v2\/posts\/68408"}],"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\/657"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=68408"}],"version-history":[{"count":2,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/68408\/revisions"}],"predecessor-version":[{"id":68412,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/68408\/revisions\/68412"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=68408"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=68408"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=68408"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}