{"id":68308,"date":"2021-10-30T23:27:46","date_gmt":"2021-10-31T03:27:46","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=68308"},"modified":"2021-10-30T23:27:46","modified_gmt":"2021-10-31T03:27:46","slug":"project-09-computational-portrait-custom-pixel","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/10\/30\/project-09-computational-portrait-custom-pixel\/","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><div class=\"wp-block-file\"><a class=\"p5_sketch_link\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/sketch-139.js\" data-width=\"380\" data-height=\"480\">sketch<\/a><a class=\"wp-block-file__button\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/sketch-139.js\" 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=\"380\" height=\"480\"><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/*Name:Camellia(Siyun) Wang; \nSection: C; \nEmail Address: siyunw@andrew.cmu.edu;*\/\n\nhttps:\/\/imgur.com\/qOtkTrJ\nvar img;\nvar i = 0;\nvar a = 0;\n\nfunction preload(){\n    img = loadImage(\"https:\/\/i.imgur.com\/qOtkTrJ.jpg\");\n}\n\nfunction setup(){\n    createCanvas(380, 480);\n    background(0);\n    img.resize(380, 480);\/\/resize the image to fit into canvas\n    img.loadPixels();\n}\n\/\/based on the example code\n\/*function draw(){\n    var sw = map(mouseX, 0, width, 1, 5);\/\/\n    var x = random(img.width); \/\/randomly select pixels of the image\n    var y = random(img.height);\n    var pointColor = img.get(x, y); \/\/select the color of the chosen pixel\n    stroke(pointColor); \n    strokeWeight(sw);\n    line(x,y,x+5,y);\n}*\/\n\n\/\/based on the simple nested loop logic\n\/*function draw(){\n    var i = random ()\n    pointColor = img.get(i, a);\n    noStroke();\n    fill(pointColor);\n    ellipse(i,a,random(1,5),random(3,7));\n    i += 5;\n    if(i &gt;= 380){\n        a += 5;\n        i = 0;\n    }\n}*\/\n\n\/\/based on spiral motion\nvar angle = 0;\nvar radius = 0;\nvar r = 6.2; \n\nfunction draw() {\n    var center_x = width \/ 2;\n    var center_y = height \/ 2;\n    var x = radius *cos(radians(angle));\n    var y = radius *sin(radians(angle));\n    pointColor = img.get(width\/ 2+x, height\/2+y);\n    \/\/pick color of the chosen pixel from the center of the image \n    \/\/picking in spiral motion which corresponds to the sipral motion of the drawn ellipses\n    push();\n    \/\/translate the canvas to draw the spiral from the center outwards\n    translate(center_x, center_y);\n    noStroke();\n    fill(pointColor);\n    circle(x, y, r);\n    radius += 0.1;\n    angle += 5;\n    r += 0.01;\n    pop();\n}\n   \n<\/code><\/pre><\/div>\n\n\n<p>I started this project with duplicating the example code, then I used the nested loop logic to do the second trial. However, the way this portrait was drawn did not seem interesting enough, since there&rsquo;s no change in motion and each drawn square. Therefore, I changed the drawing logic to the spiral motion. In this way, the portrait is drawn from the center in gradually amplifying ellipses, so that the final piece has a clearer shape of face in the center and blurry periphery.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"756\" height=\"962\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-30-at-11.25.21-PM.png\" alt=\"\" class=\"wp-image-68326\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-30-at-11.25.21-PM.png 756w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-30-at-11.25.21-PM-236x300.png 236w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px\"><figcaption>First Trial-Duplicated Version<\/figcaption><\/figure><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"754\" height=\"956\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-30-at-11.21.20-PM.png\" alt=\"\" class=\"wp-image-68327\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-30-at-11.21.20-PM.png 754w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-30-at-11.21.20-PM-237x300.png 237w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px\"><figcaption>Second Trial-Nested Loop<\/figcaption><\/figure><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"758\" height=\"960\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-30-at-11.17.28-PM.png\" alt=\"\" class=\"wp-image-68329\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-30-at-11.17.28-PM.png 758w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-30-at-11.17.28-PM-237x300.png 237w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px\"><figcaption>Final Piece-Spiral Version<\/figcaption><\/figure><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>sketchDownload \/*Name:Camellia(Siyun) Wang; Section: C; Email Address: siyunw@andrew.cmu.edu;*\/ https:\/\/imgur.com\/qOtkTrJ var img; var i = 0; var a = 0; function preload(){ img = loadImage(&#8220;https:\/\/i.imgur.com\/qOtkTrJ.jpg&#8221;); } function setup(){ createCanvas(380, 480); background(0); img.resize(380, 480);\/\/resize the image to fit into canvas img.loadPixels(); } \/\/based on the example code \/*function draw(){ var sw = map(mouseX, 0, width, 1, 5);\/\/ &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/10\/30\/project-09-computational-portrait-custom-pixel\/\" 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":676,"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\/68308"}],"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\/676"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=68308"}],"version-history":[{"count":6,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/68308\/revisions"}],"predecessor-version":[{"id":68331,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/68308\/revisions\/68331"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=68308"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=68308"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=68308"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}