{"id":75351,"date":"2022-11-06T15:30:56","date_gmt":"2022-11-06T20:30:56","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/?p=75351"},"modified":"2022-11-06T15:30:56","modified_gmt":"2022-11-06T20:30:56","slug":"project-09-portrait-3","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/11\/06\/project-09-portrait-3\/","title":{"rendered":"Project 09: Portrait"},"content":{"rendered":"\n

sketch<\/a><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/Name: Hari Vardhan Sampath\n\/\/Section: E\n\/\/eMail address: harivars@andrew.cmu.edu\n\/\/Project-09\n\n\/\/ global variable to store the preloaded image\nvar img;\n\nfunction preload() {\n img = loadImage('https:\/\/i.imgur.com\/8WPELuP.jpg');\n}\n\n\/* \nReference from lecture-20's random bouncing particles.\nThe bouncing particles will draw the image by accessing\nthe pixel colors it traverses.\nAdditionally, the mouseY position will control the alpha\nof the pixel color and the mouse click will reset the background\nto different grey color, also using the mouseY position\nfor the user to play with the abstract representation.\n*\/\n\n\/\/ number of particles\nvar np = 100; \n\nfunction particleStep() {\n this.age++;\n this.x += this.dx;\n this.y += this.dy;\n if (this.x > width) { \/\/ bounce off right wall\n this.x = width - (this.x - width);\n this.dx = -this.dx;\n } else if (this.x < 0) { \/\/ bounce off left wall\n this.x = -this.x;\n this.dx = -this.dx; \n }\n if (this.y > height) { \/\/ bounce off bottom\n this.y = height - (this.y - height);\n this.dy = -this.dy;\n } else if (this.y < 0) { \/\/ bounce off top\n this.y = -this.y;\n this.dy = -this.dy;\n }\n}\n\n\nfunction particleDraw() {\n this.clr = img.get(this.x, this.y);\n stroke(this.clr[0], this.clr[1], this.clr[2], mouseY);\n point(this.x, this.y);\n}\n\n\nfunction makeParticle(px, py, pdx, pdy) {\n p = {x: px, y: py,\n dx: pdx, dy: pdy,\n age: 0,\n stepFunction: particleStep,\n drawFunction: particleDraw\n }\n return p;\n}\n\n\nvar particles = [];\n\n\nfunction setup() {\n createCanvas(img.width, img.height);\n background(mouseY);\n for (var i = 0; i < np; i++) {\n var p = makeParticle(600, 600,\n random(-10, 10), \n random(-10, 10));\n particles.push(p);\n }\n frameRate(15);\n}\n\n\nfunction draw() {\n strokeWeight(random(5));\n for (var i = 0; i < np; i++) { \n var p = particles[i];\n p.stepFunction();\n p.drawFunction();\n }\n}\n\n\/\/ mouse press will refresh the background to re-draw\nfunction mousePressed() {\n background(mouseY);\n}<\/code><\/pre><\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>sketch \/\/Name: Hari Vardhan Sampath \/\/Section: E \/\/eMail address: harivars@andrew.cmu.edu \/\/Project-09 \/\/ global variable to store the preloaded image var img; function preload() { img = loadImage(‘https:\/\/i.imgur.com\/8WPELuP.jpg’); } \/* Reference from lecture-20’s random bouncing particles. The bouncing particles will draw the image by accessing the pixel colors it traverses. Additionally, the mouseY position will control … <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/11\/06\/project-09-portrait-3\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> “Project 09: Portrait”<\/span><\/a><\/p>\n","protected":false},"author":756,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[111,121],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/75351"}],"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\/756"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=75351"}],"version-history":[{"count":1,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/75351\/revisions"}],"predecessor-version":[{"id":75353,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/75351\/revisions\/75353"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=75351"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=75351"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=75351"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}