{"id":75331,"date":"2022-11-06T14:33:48","date_gmt":"2022-11-06T19:33:48","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/?p=75331"},"modified":"2022-11-06T14:33:48","modified_gmt":"2022-11-06T19:33:48","slug":"project-09-computational-portrait-3","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/11\/06\/project-09-computational-portrait-3\/","title":{"rendered":"Project 09 : Computational Portrait"},"content":{"rendered":"\n

The Image is based on how Octopus uses their camouflage:<\/p>\n\n\n\n

So Basically I created a bunch of particles that ages and disappear eventually:<\/p>\n\n\n\n

when those particles first appear they growth rapidly then they slowly shrink and fade away<\/p>\n\n\n\n

Base Image:<\/p>\n\n\n\n $\"Base$ <\/a>\n\n\n\n

<\/a><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/*\n * Andrew J Wang\n * ajw2@andrew.cmu.edu\n * Section A\n *\n * This Program is Face\n *\/\n\n\/\/face image for preload the data\nlet faceImage;\n\/\/array of global particles\nvar particles = [];\n\n\/\/preload image\nfunction preload(){\n faceImage = loadImage(\"https:\/\/i.imgur.com\/i3WmsKd.jpeg\");\n}\n\n\nfunction particleStep() {\n \/\/age of the particles \n this.age++;\n\n \/\/shrine slowly after 45 age\n if (this.age % 2 == 0 & this.age >= 45)\n {\n this.sz = this.sz * 0.98;\n }\n \/\/grow rapidly before 45 age\n else if (this.age % 2 == 0 & this.age < 45)\n {\n this.sz = this.sz * 1.1;\n }\n\n}\n \n \nfunction particleDraw() {\n push();\n \/\/grab color based on the location on the image\n var kolor = faceImage.get(this.x*2, 220+this.y*2);\n fill(kolor);\n noStroke();\n rectMode(CENTER);\n \/\/create rectangle based on location size and color\n rect(this.x, this.y, this.sz, this.sz);\n pop();\n}\n \n\n\/\/create color particles\nfunction makeParticle(px, py, size) {\n p = {x: px, y: py,\n age: 0,\n sz: size,\n stepFunction: particleStep,\n drawFunction: particleDraw\n }\n return p;\n}\n \n \nfunction setup() {\n createCanvas(480,480);\n frameRate(120);\n}\n\n\nfunction draw() {\n background(220);\n stroke(0);\n\n\/\/create 30 particles per fram just to fill the whole image with particles\n for (var n=0; n<30; n++)\n {\n \/\/create particles at random location on the canvas, origin size = 1\n var p = makeParticle(random(480), random(480),1);\n particles.push(p);\n }\n\n \/\/new particles to refresh\n newParticles = [];\n for (var i = 0; i < particles.length; i++){ \/\/ for each particle\n var k = particles[i];\n \/\/draw and refresh particles\n k.stepFunction();\n k.drawFunction();\n if (k.age < 250) {\n \/\/if younger than 250 keep them if not they are gone\n newParticles.push(k);\n }\n }\n \/\/ particles refreshed by the new particles\n particles = newParticles;\n\n}\n<\/code><\/pre><\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>The Image is based on how Octopus uses their camouflage: So Basically I created a bunch of particles that ages and disappear eventually: when those particles first appear they growth rapidly then they slowly shrink and fade away Base Image: \/* * Andrew J Wang * ajw2@andrew.cmu.edu * Section A * * This Program is … <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/11\/06\/project-09-computational-portrait-3\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> “Project 09 : Computational Portrait”<\/span><\/a><\/p>\n","protected":false},"author":768,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[111,55],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/75331"}],"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\/768"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=75331"}],"version-history":[{"count":2,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/75331\/revisions"}],"predecessor-version":[{"id":75335,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/75331\/revisions\/75335"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=75331"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=75331"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=75331"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}