I had a lot of fun with this project, but I definitely think i could’ve gone a little farther with it. If I had more time, I would add some more interactive elements with mouseX\/mouseY<\/p>\n\n\n\n
sketch<\/a><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/Michelle Dang\n\/\/mtdang@andrew.cmu.edu\n\/\/Project 9\n\/\/Section D\n\nvar portrait;\nvar smallPoint, largePoint;\n\nvar barY=0;\n\nfunction preload() {\n portrait = loadImage(\"https:\/\/i.imgur.com\/8eYjWUj.jpg\");\n}\n\nfunction setup() {\n portrait.resize(portrait.width\/2.5, portrait.height\/2.5)\n createCanvas(portrait.width, portrait.height);\n print(portrait.width)\n\n smallPoint = 20;\n largePoint = 40;\n imageMode(CENTER);\n noStroke();\n background(255);\n portrait.loadPixels();\n}\n\nfunction draw() {\n\n for (var x=0; x<portrait.width; x+=10) {\n for (var y=0; y<portrait.height; y+=10) {\n var c = portrait.get(x, y);\n push();\n fill(color(c))\n noStroke();\n circle(x, y, random(20,50),random(20,50));\n circle(x, y, random(20,50),random(10,15));\n\n }\n }\n\n var pointillize = map(400, 0, width, smallPoint, largePoint);\n var x = floor(random(portrait.width));\n var y = floor(random(portrait.height));\n var pix = portrait.get(x, y);\n fill(pix, 128, 128);\n stroke(10)\n rect(x, y, pointillize, pointillize);\n\n\n rect(0, barY, width, 40); \/\/horizontal bar\n barY+=12;\n\n if (barY > portrait.height) {\n barY = 0;\n }\n\n\n}\n\n\n\n\n \n<\/code><\/pre><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"552\" height=\"742\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/Screen-Shot-2021-10-31-at-11.45.56-AM.png\" alt=\"\" class=\"wp-image-68520\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/Screen-Shot-2021-10-31-at-11.45.56-AM.png 552w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/Screen-Shot-2021-10-31-at-11.45.56-AM-223x300.png 223w\" sizes=\"(max-width: 552px) 85vw, 552px\"><\/figure><figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"767\" height=\"1024\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/Screen-Shot-2021-10-31-at-3.15.08-PM-767x1024.png\" alt=\"\" class=\"wp-image-68521\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/Screen-Shot-2021-10-31-at-3.15.08-PM-767x1024.png 767w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/Screen-Shot-2021-10-31-at-3.15.08-PM-225x300.png 225w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/Screen-Shot-2021-10-31-at-3.15.08-PM-768x1026.png 768w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/Screen-Shot-2021-10-31-at-3.15.08-PM.png 798w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px\"><\/figure><figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"768\" height=\"1024\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/Screen-Shot-2021-10-31-at-3.15.13-PM-768x1024.png\" alt=\"\" class=\"wp-image-68522\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/Screen-Shot-2021-10-31-at-3.15.13-PM-768x1023.png 768w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/Screen-Shot-2021-10-31-at-3.15.13-PM-225x300.png 225w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/Screen-Shot-2021-10-31-at-3.15.13-PM.png 794w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px\"><\/figure><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>I had a lot of fun with this project, but I definitely think i could’ve gone a little farther with it. If I had more time, I would add some more interactive elements with mouseX\/mouseY<\/p>\n","protected":false},"author":647,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[111,58],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/68514"}],"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\/647"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=68514"}],"version-history":[{"count":4,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/68514\/revisions"}],"predecessor-version":[{"id":68524,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/68514\/revisions\/68524"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=68514"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=68514"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=68514"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}