{"id":68236,"date":"2021-10-30T15:32:23","date_gmt":"2021-10-30T19:32:23","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=68236"},"modified":"2021-10-30T15:32:23","modified_gmt":"2021-10-30T19:32:23","slug":"project-09-portrait","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/10\/30\/project-09-portrait\/","title":{"rendered":"Project 09: Portrait"},"content":{"rendered":"\n

I started off by playing with different shapes and ways to depict the image. Here are some of the variations I tried. <\/p>\n\n\n\n

cross hatching<\/figcaption><\/figure><\/div>\n\n\n\n
$\"\"$
large circles<\/figcaption><\/figure>
$\"\"$
star shapes made of circles, controlled by mouse location<\/figcaption><\/figure><\/div>\n\n\n\n
$\"\"$
squares made of circles, with black shadows<\/figcaption><\/figure>
<\/p>\n\n\n\n
The variation I chose drew the image with randomly bouncing particles. When pressing a key, the color of the particles would be rainbow. When pressing the mouse, larger, black particles moved around the page to act as “erasers”.<\/p>\n\n\n\n
$\"\"$
random colors when key is pressed<\/figcaption><\/figure><\/div>\n\n\n\n
$\"\"$ <\/figure>
<\/p>\n\n\n\n
sketch<\/a>\n\n\n\n<\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/Alana Wu\n\/\/ID: alanawu\n\/\/Project 09\n\nvar img;\nvar balls = [];\nvar ballNum = 15;\nfunction preload()\n{\n img = loadImage (\"https:\/\/i.imgur.com\/2U02mf4.jpg\");\n}\n\nfunction makeBall (ax, ay, adx, ady)\n{\n var a = {\n x: ax,\n y: ay,\n dx: adx,\n dy: ady,\n dirX: 1,\n dirY: -1,\n stepFunction: moveBall,\n drawFunction: drawBall\n }\n return a;\n}\n\nfunction moveBall ()\n{\n \/\/bounce off of walls\n if (this.x >= 338 || this.x <= 0)\n {\n this.dirX *= -1;\n }\n if (this.y >= 400 || this.y <=0)\n {\n this.dirY *= -1;\n }\n this.x += this.dx*this.dirX + random(-3, 3);\n this.y += this.dy*this.dirY + random(-3, 3);\n}\n\nfunction drawBall ()\n{\n\/\/color of ball = pixel from image in that location\n var col = img.get(this.x, this.y);\n fill (col);\n\/\/when key is pressed, taste the rainbow :) \n if (keyIsPressed) \n {\n fill (random(255), random(255), random(255));\n }\n\/\/draws balls\n circle (this.x, this.y, 5, 5);\n\n\/\/when mouse is pressed, black jittery particles that act as erasers\n if (mouseIsPressed)\n {\n fill (0);\n circle (this.x + random(40), this.y + random(40), 20);\n }\n}\n\nfunction setup()\n{\n createCanvas(338, 400);\n background(0);\n noStroke();\n\/\/fits image to canvas size\n img.resize(width, height);\n\/\/makes objects for each ball\n for (var i = 0; i < ballNum; i++)\n {\n a = makeBall (0,0, random(5), random(5));\n balls.push(a);\n }\n}\n\nfunction draw()\n{\n for (var i = 0; i < balls.length; i++)\n {\n balls[i].drawFunction();\n balls[i].stepFunction(); \n }\n}\n\n\n\n\n\n\n\n\n\n\n\/\/other shapes and ideas I played with, but didn't use\n\n\nfunction ripple2 (size)\n{\n for (var x = 0; x < size; x+=5)\n {\n for (var y = 0; y < size; y+=5)\n {\n fill (0);\n circle (mouseX + x + 8, mouseY + y + 8, 5);\n circle(mouseX - x + 8, mouseY - y + 8, 5);\n }\n }\n\n for (var x = 0; x < size; x+=5)\n {\n for (var y = 0; y < size; y+=5)\n {\n var col = img.get(mouseX + x,mouseY +y);\n fill(col);\n circle (mouseX + x, mouseY + y, 5);\n var col2 = img.get(mouseX - x, mouseY - y);\n fill (col2);\n circle(mouseX - x, mouseY - y, 5);\n }\n }\n}\n\n\nfunction shape1 (x, y, dx, dy) \/\/diagonal lines\n{\n for (var y = 0; y < height; y += dy)\n {\n for (var x = 0; x < width; x += dx)\n {\n var col = img.get(x, y);\n strokeWeight (mouseX\/100);\n stroke (col);\n line (x, y, x + dx, y + dy);\n } \n }\n}\n\nfunction shape2 (x, y, size) \/\/circles, animated if w\/ random\n{\n for (var y = 0; y < height; y += size)\n {\n for (var x = 0; x < width; x += size)\n {\n var col = img.get(x, y);\n fill(col);\n circle (x, y, size);\n } \n }\n}\n\nfunction shape3 (x, y, w, h) \/\/moving ellipse in a ripple effect\n{\n for (var y = 0; y < height; y += h)\n {\n for (var x = 0; x < width; x += 15)\n {\n var col = img.get(x, y);\n fill(col);\n ellipse (x, y, random(35), h);\n } \n }\n\n}\n\nfunction shape4 (x, y, size) \/\/triangles that slowly get bigger along the diagonal\n{\n for (var y = 0; y < height; y += size\/3)\n {\n for (var x = 0; x < width; x += size)\n {\n var col = img.get(x, y);\n fill(col);\n triangle (x, y, x + size, y + size, x - size, y + size);\n } \n size += size\/10; \n }\n\n}\n\nfunction ripple ()\n{\n var x = 0;\n var y = 0;\n var r = 5;\n push();\n for (var j = 0; j < count; j++)\n {\n for (var i = 0; i < count; i++)\n {\n x = r*cos(radians(i*200));\n y = r*sin(radians(i*200));\n var col = img.get(mouseX + x, mouseY + y);\n fill (col); \n circle (mouseX + x, mouseY + y, 5, 5);\n } \n r += 5; \n }\n pop();\n\n}\n\nfunction drawIt () \/\/uncovers image w\/ mouse location\n{\n var col = img.get(mouseX, mouseY);\n fill (col);\n circle (mouseX, mouseY, 15, 15);\n}\n\n<\/code><\/pre><\/p><p><\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>I started off by playing with different shapes and ways to depict the image. Here are some of the variations I tried. The variation I chose drew the image with randomly bouncing particles. When pressing a key, the color of the particles would be rainbow. When pressing the mouse, larger, black particles moved around the … <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/10\/30\/project-09-portrait\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> “Project 09: Portrait”<\/span><\/a><\/p>\n","protected":false},"author":677,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[111,57],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/68236"}],"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\/677"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=68236"}],"version-history":[{"count":2,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/68236\/revisions"}],"predecessor-version":[{"id":68248,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/68236\/revisions\/68248"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=68236"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=68236"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=68236"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

cross hatching<\/figcaption><\/figure><\/div>\n\n\n\n
$\"\"$
large circles<\/figcaption><\/figure>
$\"\"$
star shapes made of circles, controlled by mouse location<\/figcaption><\/figure><\/div>\n\n\n\n
$\"\"$
squares made of circles, with black shadows<\/figcaption><\/figure>
<\/p>\n\n\n\n
The variation I chose drew the image with randomly bouncing particles. When pressing a key, the color of the particles would be rainbow. When pressing the mouse, larger, black particles moved around the page to act as “erasers”.<\/p>\n\n\n\n
$\"\"$
random colors when key is pressed<\/figcaption><\/figure><\/div>\n\n\n\n
$\"\"$ <\/figure>
<\/p>\n\n\n\n
sketch<\/a>\n\n\n\n<\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/Alana Wu\n\/\/ID: alanawu\n\/\/Project 09\n\nvar img;\nvar balls = [];\nvar ballNum = 15;\nfunction preload()\n{\n img = loadImage (\"https:\/\/i.imgur.com\/2U02mf4.jpg\");\n}\n\nfunction makeBall (ax, ay, adx, ady)\n{\n var a = {\n x: ax,\n y: ay,\n dx: adx,\n dy: ady,\n dirX: 1,\n dirY: -1,\n stepFunction: moveBall,\n drawFunction: drawBall\n }\n return a;\n}\n\nfunction moveBall ()\n{\n \/\/bounce off of walls\n if (this.x >= 338 || this.x <= 0)\n {\n this.dirX *= -1;\n }\n if (this.y >= 400 || this.y <=0)\n {\n this.dirY *= -1;\n }\n this.x += this.dx*this.dirX + random(-3, 3);\n this.y += this.dy*this.dirY + random(-3, 3);\n}\n\nfunction drawBall ()\n{\n\/\/color of ball = pixel from image in that location\n var col = img.get(this.x, this.y);\n fill (col);\n\/\/when key is pressed, taste the rainbow :) \n if (keyIsPressed) \n {\n fill (random(255), random(255), random(255));\n }\n\/\/draws balls\n circle (this.x, this.y, 5, 5);\n\n\/\/when mouse is pressed, black jittery particles that act as erasers\n if (mouseIsPressed)\n {\n fill (0);\n circle (this.x + random(40), this.y + random(40), 20);\n }\n}\n\nfunction setup()\n{\n createCanvas(338, 400);\n background(0);\n noStroke();\n\/\/fits image to canvas size\n img.resize(width, height);\n\/\/makes objects for each ball\n for (var i = 0; i < ballNum; i++)\n {\n a = makeBall (0,0, random(5), random(5));\n balls.push(a);\n }\n}\n\nfunction draw()\n{\n for (var i = 0; i < balls.length; i++)\n {\n balls[i].drawFunction();\n balls[i].stepFunction(); \n }\n}\n\n\n\n\n\n\n\n\n\n\n\/\/other shapes and ideas I played with, but didn't use\n\n\nfunction ripple2 (size)\n{\n for (var x = 0; x < size; x+=5)\n {\n for (var y = 0; y < size; y+=5)\n {\n fill (0);\n circle (mouseX + x + 8, mouseY + y + 8, 5);\n circle(mouseX - x + 8, mouseY - y + 8, 5);\n }\n }\n\n for (var x = 0; x < size; x+=5)\n {\n for (var y = 0; y < size; y+=5)\n {\n var col = img.get(mouseX + x,mouseY +y);\n fill(col);\n circle (mouseX + x, mouseY + y, 5);\n var col2 = img.get(mouseX - x, mouseY - y);\n fill (col2);\n circle(mouseX - x, mouseY - y, 5);\n }\n }\n}\n\n\nfunction shape1 (x, y, dx, dy) \/\/diagonal lines\n{\n for (var y = 0; y < height; y += dy)\n {\n for (var x = 0; x < width; x += dx)\n {\n var col = img.get(x, y);\n strokeWeight (mouseX\/100);\n stroke (col);\n line (x, y, x + dx, y + dy);\n } \n }\n}\n\nfunction shape2 (x, y, size) \/\/circles, animated if w\/ random\n{\n for (var y = 0; y < height; y += size)\n {\n for (var x = 0; x < width; x += size)\n {\n var col = img.get(x, y);\n fill(col);\n circle (x, y, size);\n } \n }\n}\n\nfunction shape3 (x, y, w, h) \/\/moving ellipse in a ripple effect\n{\n for (var y = 0; y < height; y += h)\n {\n for (var x = 0; x < width; x += 15)\n {\n var col = img.get(x, y);\n fill(col);\n ellipse (x, y, random(35), h);\n } \n }\n\n}\n\nfunction shape4 (x, y, size) \/\/triangles that slowly get bigger along the diagonal\n{\n for (var y = 0; y < height; y += size\/3)\n {\n for (var x = 0; x < width; x += size)\n {\n var col = img.get(x, y);\n fill(col);\n triangle (x, y, x + size, y + size, x - size, y + size);\n } \n size += size\/10; \n }\n\n}\n\nfunction ripple ()\n{\n var x = 0;\n var y = 0;\n var r = 5;\n push();\n for (var j = 0; j < count; j++)\n {\n for (var i = 0; i < count; i++)\n {\n x = r*cos(radians(i*200));\n y = r*sin(radians(i*200));\n var col = img.get(mouseX + x, mouseY + y);\n fill (col); \n circle (mouseX + x, mouseY + y, 5, 5);\n } \n r += 5; \n }\n pop();\n\n}\n\nfunction drawIt () \/\/uncovers image w\/ mouse location\n{\n var col = img.get(mouseX, mouseY);\n fill (col);\n circle (mouseX, mouseY, 15, 15);\n}\n\n<\/code><\/pre><\/p><p><\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>I started off by playing with different shapes and ways to depict the image. Here are some of the variations I tried. The variation I chose drew the image with randomly bouncing particles. When pressing a key, the color of the particles would be rainbow. When pressing the mouse, larger, black particles moved around the … <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/10\/30\/project-09-portrait\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> “Project 09: Portrait”<\/span><\/a><\/p>\n","protected":false},"author":677,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[111,57],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/68236"}],"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\/677"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=68236"}],"version-history":[{"count":2,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/68236\/revisions"}],"predecessor-version":[{"id":68248,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/68236\/revisions\/68248"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=68236"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=68236"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=68236"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}