{"id":68206,"date":"2021-10-29T10:44:27","date_gmt":"2021-10-29T14:44:27","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=68206"},"modified":"2021-10-29T10:44:27","modified_gmt":"2021-10-29T14:44:27","slug":"computational-portrait","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/10\/29\/computational-portrait\/","title":{"rendered":"Computational Portrait"},"content":{"rendered":"\n

At first I really did not know how to start off with my portrait. I looked and reread the timeline for a while until I decided I wanted to do some sort of recreation of Chuck Close’s portraits. Instead of using colors to create skin tone, I ended up sticking with the pixel colors that I got using .get for my images. It took me the longest to set up my photo than to actually get my random walk to work.<\/p>\n\n\n\n

Figuring Out pixel size<\/figcaption><\/figure>
$\"\"$
Playing around with accuracy in pixel size<\/figcaption><\/figure>
So to get my work to be more like Close’s I made an array of two different size circles inside my pixels. I thought this looked really cool but I was hoping to get more definition in my features by doing this.<\/p>\n\n\n\n
$\"\"$
Circles and Squares<\/figcaption><\/figure>
So I ended up using my Ipad to make a grid of areas in the face that I wanted to be more or less pixelated. I ended up counting and working from this top image to make sure I was using the right constrains in my for loops. I probably could have shortened my code for this project, but I was happy with how it was so I did not bother.<\/p>\n\n\n\n
$\"\"$
Figuring out proportions<\/figcaption><\/figure>
So, for every new and smaller square I was building I was also making my two circles on the top, unless the pixels got too small. I played around with the numbers a lot here. I felt that my image was very stagnant and decided to use noise to get my circles to vibrate in certain parameters. I thought doing this was quite funny because it reminded my a bit of the saying that the Mona Lisas eyes follow you across the room and, I felt that my entire face was doing the same.<\/p>\n\n\n\n
file><\/a><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">var noiseParam = 0;\nvar noiseStep = 0.1;\nvar img;\nfunction preload(){\n img = loadImage(\"https:\/\/i.imgur.com\/5n4h1dT.png\");\n}\n\n\nfunction setup() {\n img.resize(img.width\/3, img.height\/3);\/\/pixel image info\n createCanvas(img.width, img.height * .9);\n}\nfunction main(dx,dy){\n for(var col = 0; col < img.width; col += 8){ \/\/main\n for(var row = 0; row < img.height; row += 8){\n var c = img.get(col,row);\n fill(color(c));\n noStroke();\n rect(col,row,8,8);\n ellipse((col + 4) + dx, (row - 4) + dy, 6, 6);\n ellipse((col + 4) + dx, (row - 12) + dy, 3, 3);\n }\n }\n}\n\nfunction face(){\n for(var col = 88; col < 248; col += 6){ \/\/whole face\n for(var row = 120; row < 320 ; row += 6){\n var c = img.get(col, row);\n fill(color(c));\n noStroke();\n rect((col + 1.5), (row + 1.5), 5, 5);\n ellipse((col + 5.5) + dx, (row - 4) + dy, 5, 5);\n ellipse((col + 5.5) + dx, (row - 10) + dy, 2.5, 2.5);\n }\n }\n}\n\nfunction mainFeature(){\n for(var col = 104; col < 230; col += 4){ \/\/clarity for face features == more pixels\n for(var row = 160; row < 216 ; row += 4){\n var c = img.get(col,row);\n fill(color(c));\n noStroke();\n rect((col + 4.5), (row + 4.5), 3, 3);\n ellipse((col + 8.5) + dx , (row - 4) + dy, 2, 2);\n ellipse((col + 8.5) + dx , (row - 6) + dy, 1.5, 1.5);\n } \n }\n\n for(var col = 128; col < 186; col += 4){ \/\/cont.\n for(var row = 216; row < 296 ; row += 4){\n var c = img.get(col,row);\n fill(color(c));\n noStroke();\n rect((col + 4.5), (row + 4.5), 3, 3);\n ellipse((col + 8.5) + dx ,(row - 4) + dy, 2, 2);\n ellipse((col + 8.5) + dx , (row - 6) + dy, 1.5, 1.5);\n\n }\n }\n}\n\nfunction eyes(){\n for(var col = 104; col < 136; col += 2){ \/\/eye area 1: no circle, too small\n for(var row = 184; row < 216 ; row += 2){\n var c = img.get(col,row);\n fill(color(c));\n noStroke();\n rect((col + 6.5), (row + 6.5), 1, 1);\n }\n }\n for(var col = 176; col < 232; col += 2){ \/\/eye area 2: no circle, too small\n for(var row = 184; row < 216 ; row += 2){\n var c = img.get(col, row);\n fill(color(c));\n noStroke();\n rect((col + 6.5), (row + 6.5), 1, 1);\n }\n }\n}\n\nfunction draw() {\n background(0);\n var offset = noise(noiseParam);\n offset = map(offset, 0, 1, -8, 8);\n dx = offset;\n dy = offset;\n main(dx, dy);\n face(dx, dy);\n mainFeature(dx, dy);\n eyes(dx, dy);\n noiseParam += noiseStep;\n}\n<\/code><\/pre><\/p>\n\n\n\n<p><\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>At first I really did not know how to start off with my portrait. I looked and reread the timeline for a while until I decided I wanted to do some sort of recreation of Chuck Close’s portraits. Instead of using colors to create skin tone, I ended up sticking with the pixel colors that … <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/10\/29\/computational-portrait\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> “Computational Portrait”<\/span><\/a><\/p>\n","protected":false},"author":660,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[111,58,1],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/68206"}],"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\/660"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=68206"}],"version-history":[{"count":11,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/68206\/revisions"}],"predecessor-version":[{"id":68626,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/68206\/revisions\/68626"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=68206"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=68206"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=68206"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

Figuring Out pixel size<\/figcaption><\/figure>
$\"\"$
Playing around with accuracy in pixel size<\/figcaption><\/figure>
So to get my work to be more like Close’s I made an array of two different size circles inside my pixels. I thought this looked really cool but I was hoping to get more definition in my features by doing this.<\/p>\n\n\n\n
$\"\"$
Circles and Squares<\/figcaption><\/figure>
So I ended up using my Ipad to make a grid of areas in the face that I wanted to be more or less pixelated. I ended up counting and working from this top image to make sure I was using the right constrains in my for loops. I probably could have shortened my code for this project, but I was happy with how it was so I did not bother.<\/p>\n\n\n\n
$\"\"$
Figuring out proportions<\/figcaption><\/figure>
So, for every new and smaller square I was building I was also making my two circles on the top, unless the pixels got too small. I played around with the numbers a lot here. I felt that my image was very stagnant and decided to use noise to get my circles to vibrate in certain parameters. I thought doing this was quite funny because it reminded my a bit of the saying that the Mona Lisas eyes follow you across the room and, I felt that my entire face was doing the same.<\/p>\n\n\n\n
file><\/a><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">var noiseParam = 0;\nvar noiseStep = 0.1;\nvar img;\nfunction preload(){\n img = loadImage(\"https:\/\/i.imgur.com\/5n4h1dT.png\");\n}\n\n\nfunction setup() {\n img.resize(img.width\/3, img.height\/3);\/\/pixel image info\n createCanvas(img.width, img.height * .9);\n}\nfunction main(dx,dy){\n for(var col = 0; col < img.width; col += 8){ \/\/main\n for(var row = 0; row < img.height; row += 8){\n var c = img.get(col,row);\n fill(color(c));\n noStroke();\n rect(col,row,8,8);\n ellipse((col + 4) + dx, (row - 4) + dy, 6, 6);\n ellipse((col + 4) + dx, (row - 12) + dy, 3, 3);\n }\n }\n}\n\nfunction face(){\n for(var col = 88; col < 248; col += 6){ \/\/whole face\n for(var row = 120; row < 320 ; row += 6){\n var c = img.get(col, row);\n fill(color(c));\n noStroke();\n rect((col + 1.5), (row + 1.5), 5, 5);\n ellipse((col + 5.5) + dx, (row - 4) + dy, 5, 5);\n ellipse((col + 5.5) + dx, (row - 10) + dy, 2.5, 2.5);\n }\n }\n}\n\nfunction mainFeature(){\n for(var col = 104; col < 230; col += 4){ \/\/clarity for face features == more pixels\n for(var row = 160; row < 216 ; row += 4){\n var c = img.get(col,row);\n fill(color(c));\n noStroke();\n rect((col + 4.5), (row + 4.5), 3, 3);\n ellipse((col + 8.5) + dx , (row - 4) + dy, 2, 2);\n ellipse((col + 8.5) + dx , (row - 6) + dy, 1.5, 1.5);\n } \n }\n\n for(var col = 128; col < 186; col += 4){ \/\/cont.\n for(var row = 216; row < 296 ; row += 4){\n var c = img.get(col,row);\n fill(color(c));\n noStroke();\n rect((col + 4.5), (row + 4.5), 3, 3);\n ellipse((col + 8.5) + dx ,(row - 4) + dy, 2, 2);\n ellipse((col + 8.5) + dx , (row - 6) + dy, 1.5, 1.5);\n\n }\n }\n}\n\nfunction eyes(){\n for(var col = 104; col < 136; col += 2){ \/\/eye area 1: no circle, too small\n for(var row = 184; row < 216 ; row += 2){\n var c = img.get(col,row);\n fill(color(c));\n noStroke();\n rect((col + 6.5), (row + 6.5), 1, 1);\n }\n }\n for(var col = 176; col < 232; col += 2){ \/\/eye area 2: no circle, too small\n for(var row = 184; row < 216 ; row += 2){\n var c = img.get(col, row);\n fill(color(c));\n noStroke();\n rect((col + 6.5), (row + 6.5), 1, 1);\n }\n }\n}\n\nfunction draw() {\n background(0);\n var offset = noise(noiseParam);\n offset = map(offset, 0, 1, -8, 8);\n dx = offset;\n dy = offset;\n main(dx, dy);\n face(dx, dy);\n mainFeature(dx, dy);\n eyes(dx, dy);\n noiseParam += noiseStep;\n}\n<\/code><\/pre><\/p>\n\n\n\n<p><\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>At first I really did not know how to start off with my portrait. I looked and reread the timeline for a while until I decided I wanted to do some sort of recreation of Chuck Close’s portraits. Instead of using colors to create skin tone, I ended up sticking with the pixel colors that … <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/10\/29\/computational-portrait\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> “Computational Portrait”<\/span><\/a><\/p>\n","protected":false},"author":660,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[111,58,1],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/68206"}],"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\/660"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=68206"}],"version-history":[{"count":11,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/68206\/revisions"}],"predecessor-version":[{"id":68626,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/68206\/revisions\/68626"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=68206"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=68206"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=68206"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}