{"id":75357,"date":"2022-11-06T19:52:38","date_gmt":"2022-11-07T00:52:38","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/?p=75357"},"modified":"2022-11-12T16:32:45","modified_gmt":"2022-11-12T21:32:45","slug":"project-09-computational-portrait-custom-pixel-2","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/11\/06\/project-09-computational-portrait-custom-pixel-2\/","title":{"rendered":"Project 09: Computational Portrait (Custom Pixel)"},"content":{"rendered":"\n

Click to switch between “circles” or “lines” mode.<\/p>\n\n\n\n

“Circles” Mode:<\/strong> move the mouse left or right to change the circles’ size and stroke weight to make the portrait more blurry.<\/p>\n\n\n\n

“Lines” Mode<\/strong>: move the mouse left or right to change the rotation angle of the lines to create the wind blowing effect.<\/p>\n\n\n\n

\n
\n
<\/div><\/div>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n
sketch<\/a>\n\n\n\n
$\"\"$
Circles<\/figcaption><\/figure>
$\"\"$
Lines<\/figcaption><\/figure><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/Xinyi Du \n\/\/15104 Section B\n\/\/xinyidu@andrew.cmu.edu\n\/\/Assignment-09\n\n\/\/Click to switch between \"circles\" or \"lines\" mode.\n\n\/\/\"Circles\" Mode: \n\/\/move the mouse left or right to change the circles' size and stroke weight \n\/\/to make the portrait more blurry.\n\n\/\/\"Lines\" Mode: \n\/\/move the mouse left or right to change the rotation angle of the lines \n\/\/to create the wind blowing effect.\n\nvar click = 0; \/\/number of clicks\n\nfunction preload() {\n \n img = loadImage(\"https:\/\/i.imgur.com\/ncc1zMh.jpg\");\n \/\/original url https:\/\/i.imgur.com\/mOmrZEo.jpg\n}\n\nfunction setup() {\n createCanvas(547, 547);\n background(255);\n imageMode(CENTER);\n img.loadPixels(); \/\/load pixels\n}\n\nfunction draw() { \n \/\/click to switch between \"circles\" or \"lines\" mode\n if (click % 2 == 0) {\n draw1(); \/\/circles mode\n }\n else {\n draw2(); \/\/lines mode\n }\n}\n\n\nfunction draw1() { \/\/circles\n for (i=0; i<100; i++) {\n var x = floor(random(img.width)); \/\/random x of the center of circles\n var y = floor(random(img.height)); \/\/random y of the center of circles\n var dotcolor = img.get(x, y); \/\/get the pixel color info\n var point = (dotcolor[0]+dotcolor[1]+dotcolor[2])\/3; \/\/get the average RGB value\n\n \/\/map the mouseX position to circle sizes\n var mapsize = map(mouseX, 0, width, 5, 30);\n \/\/map the mouseX position to circle stroke weights\n var mapWeight = map(mouseX, 0, width, 5, 0.5);;\n\n strokeWeight(mapWeight);\n stroke(dotcolor); \/\/strokecolor is the pixel color\n noFill();\n ellipse(x, y, mapsize, mapsize);\n stroke(dotcolor[0]+35, dotcolor[1]+35, dotcolor[2]+35); \/\/stroke color ligher\n ellipse(x, y, mapsize*1.5, mapsize*1.5); \/\/circle size bigger\n stroke(dotcolor[0]-35, dotcolor[1]-35, dotcolor[2]-35); \/\/stroke color darker\n ellipse(x, y, mapsize*0.5, mapsize*0.5); \/\/circle size smaller\n }\n}\n\n\nfunction draw2() { \/\/lines\n for (i=0; i<10000; i++) {\n var initdegree = mouseX; \/\/mouseX determines the initial degree\n \/\/x, y of the starting point of the lines, random points within the canvas\n var x = floor(random(img.width)); \n var y = floor(random(img.height));\n var dotcolor = img.get(x, y);\n var point = (dotcolor[0]+dotcolor[1]+dotcolor[2])\/3;\n\n \/\/map the average RGB value to degrees, the greater the value the greater the degrees\n var mapdegree = initdegree+map(point, 0, 255, 0, 180);\n \/\/map the average RGB value to line lengths, the greater the value the shorter the lengths\n var maplength = map(point, 0, 255, 15, 2);\n \/\/map the average RGB value to stroke weights, the greater the value the smaller the stroke weights\n var mapWeight = map(point, 0, 255, 5, 0.3);\n\n noFill();\n strokeWeight(mapWeight);\n\n push();\n translate(x,y); \/\/translate the origin to (x,y)\n rotate(radians(mapdegree)); \/\/rotate mapdegree\n stroke(dotcolor);\n line(0, 0, 0+maplength, 0+maplength);\n stroke(dotcolor[0]+35, dotcolor[1]+35, dotcolor[2]+35);\n line(10, 0, 10+maplength+5, 0+maplength+5);\n stroke(dotcolor[0]-35, dotcolor[1]-35, dotcolor[2]-35);\n line(-10, 0, -10+maplength-5, 0+maplength-5); \n pop();\n }\n\n}\n\nfunction mousePressed() {\n click ++ ; \/\/if mouse is pressed, increase number of clicks\n}\n\n\n<\/code><\/pre><\/div><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>Click to switch between “circles” or “lines” mode. “Circles” Mode: move the mouse left or right to change the circles’ size and stroke weight to make the portrait more blurry. “Lines” Mode: move the mouse left or right to change the rotation angle of the lines to create the wind blowing effect. sketch \/\/Xinyi Du … <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/11\/06\/project-09-computational-portrait-custom-pixel-2\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> “Project 09: Computational Portrait (Custom Pixel)”<\/span><\/a><\/p>\n","protected":false},"author":716,"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\/f2022\/wp-json\/wp\/v2\/posts\/75357"}],"collection":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/users\/716"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=75357"}],"version-history":[{"count":8,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/75357\/revisions"}],"predecessor-version":[{"id":75570,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/75357\/revisions\/75570"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=75357"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=75357"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=75357"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}