This is my self-portrait. I try to use parabola lines instead of points to draw my image. The shape of lines is varied by adding an acceleration variable to change dx and dy. The portrait is looped and redrawn every 500 lines.<\/p>\n\n\n\n
<\/a><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/Jason Jiang\n\/\/Section E\n\/\/Setting up variables\nvar np = 0;\nvar particleSetup = [];\nvar myProtrait\nfunction preload(){\n myProtrait = loadImage(\"https:\/\/i.imgur.com\/huB83xd.jpg\");\n}\n\n\/\/Updating properties of particles each step\nfunction particleStep(){\n \/\/Getting pixel color of the location of each particle on the image\n this.c = myProtrait.get(this.x, this.y);\n \n \/\/Adding acceleration to create parabola curve\n this.dx += this.ax;\n this.dy += this.ay;\n \n \/\/Updating x,y locations of particles\n this.x += this.dx;\n this.y += this.dy;\n \n \/\/Updating x,y locations of particles in next step\n this.x1 = this.x + this.dx;\n this.y1 = this.y + this.dy;\n \n}\n\n\/\/Drawing lines between two particles\nfunction particleDraw(){\n stroke(this.c);\n strokeWeight(this.s);\n line(this.x, this.y, this.x1, this.y1);\n \n}\n\n\/\/Creating particles\nfunction particle(px, py, pdx, pdy, pax, pay, pc, px1, py1, ps){\n var p = {\n x: px, \n y: py, \n dx: pdx, \n dy: pdy, \n ax: pax, \n ay: pay, \n c: pc, \n x1: px1, \n y1: py1, \n s: ps,\n stepfunction: particleStep, \n drawfunction: particleDraw\n }\n return p; \n}\n\nfunction setup(){\n createCanvas(400, 400);\n } \n\n\nfunction draw(){\n \/\/Constraining number of particles\n if (np < 500){\n \/\/Creating objects and adding them into array\n c = color(random(255), random(255), random(255))\n var p = particle(random(width), random(height), random(5), random(10), random(0.5, -0.5), random(0.5, -0.5), c, 0, 0, random(1,8));\n particleSetup.push(p);\n np+=1\n }\n\n \/\/Resetting canvas if num of particles exceeds 500\n if (np == 500){\n background(255);\n np = 0;\n particleSetup = [];\n }\n\n \/\/Running particles\n for(i = 0; i < np; i++){\n var p = particleSetup[i];\n p.stepfunction();\n p.drawfunction();\n }\n \n }\n<\/code><\/pre><\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>This is my self-portrait. I try to use parabola lines instead of points to draw my image. The shape of lines is varied by adding an acceleration variable to change dx and dy. The portrait is looped and redrawn every 500 lines. \/\/Jason Jiang \/\/Section E \/\/Setting up variables var np = 0; var particleSetup … <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/11\/05\/computational-self-portrait\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> “Computational self-portrait”<\/span><\/a><\/p>\n","protected":false},"author":723,"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\/75073"}],"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\/723"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=75073"}],"version-history":[{"count":7,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/75073\/revisions"}],"predecessor-version":[{"id":75831,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/75073\/revisions\/75831"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=75073"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=75073"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=75073"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}