{"id":68377,"date":"2021-10-31T15:34:56","date_gmt":"2021-10-31T19:34:56","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=68377"},"modified":"2021-10-31T15:37:39","modified_gmt":"2021-10-31T19:37:39","slug":"project-09-2","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/10\/31\/project-09-2\/","title":{"rendered":"Project 09"},"content":{"rendered":"<!DOCTYPE html PUBLIC \"-\/\/W3C\/\/DTD HTML 4.0 Transitional\/\/EN\" \"http:\/\/www.w3.org\/TR\/REC-html40\/loose.dtd\">\n<html><body><p><meta charset=\"utf-8\">I started up by pixelating my photo, then I went into the idea of creating a mirror-like, dynamic, and interactive image. Therefore, I created 1500 moving hexagons to show my image. I am satisfied with the beauty and abstractness.<\/p>\n\n\n\n<div class=\"wp-block-file\"><a class=\"p5_sketch_link\" data-width=\"&ldquo;4800&rdquo;\" data-height=\"&ldquo;4800&rdquo;\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/sketch-144.js\">cody.09project<\/a><iframe src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/plugins\/p5-embedder\/p5_iframe.html\" class=\"p5_exampleFrame\" width=\"&ldquo;4800&rdquo;\" height=\"&ldquo;4800&rdquo;\"><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">var img;\nvar hexagon = []\nfunction preload(){\n   img = loadImage(\"https:\/\/i.imgur.com\/VGvokSI.png\");\n}\n\/\/making a hexagon\nfunction makeHexagon(cx, cy, cdx, cdy) { \n    var h = {x: cx, y: cy, dx: cdx, dy: cdy,\n            drawFunction: drawHexagon\n        }\n    return h;\n}\nfunction drawHexagon(){\n    push()\n    translate(this.x,this.y)\n\/\/hexagon color is the color of the pixel it is at\n    this.c = img.get(10*this.x,10*this.y)\n    fill(this.c)\n\/\/draws the hexagon from 6 triangles\n    noStroke()\n    triangle(0,0,-s,0,-s\/2,-s*sqrt(3)\/2)\n    triangle(0,0,-s\/2,-s*sqrt(3)\/2,s\/2,-s*sqrt(3)\/2)\n    triangle(0,0,s,0,s\/2,-s*sqrt(3)\/2)\n    triangle(0,0,-s,0,-s\/2,s*sqrt(3)\/2)\n    triangle(0,0,-s\/2,s*sqrt(3)\/2,s\/2,s*sqrt(3)\/2)\n    triangle(0,0,s,0,s\/2,s*sqrt(3)\/2)\n\/\/hexagons would bounce backs if touches the edges\n    if (this.x &gt;= width || this.x &lt;= 0){\n        this.dx = -this.dx\n    }\n    if (this.y &gt;= height || this.y &lt;= 0){\n        this.dy = -this.dy;\n    }\n    this.x += this.dx;\n    this.y += this.dy;\n    pop()\n}\nfunction setup() {\n    createCanvas(480,480);\n    img.resize(4800,4800)\n\/\/make 1500 hexagons explode outwards from my left eye, pushed into array\n    for (var i = 0; i &lt; 1500; i++) { \n        hexagon[i] = makeHexagon(random(255,260),random(230,250),random(-4,4),random(-4,4))\n    }\n    text(\"p5.js vers 0.9.0 test.\", 10, 15);\n}\nvar s = 14\nfunction draw() {\n    background(200)\n    image(img,0,0,480,480)\n\/\/pixelated because having a clear image of my huge face on wordpress is horrifying\n    for(var x = 0; x &lt; width; x += 10){ \n        for(var y = 0; y &lt; height; y += 10){\n            var c = img.get(10*x,10*y);\n            fill(color(c));\n            noStroke();\n            rect(x,y,10,10);\n        }\n    }\n\/\/draw 1500 hexagons\n    for (var i = 0; i &lt; 1500; i++) { \n        hexagon[i].drawFunction() \n    }\n}\n\n<\/code><\/pre><\/div><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>I started up by pixelating my photo, then I went into the idea of creating a mirror-like, dynamic, and interactive image. Therefore, I created 1500 moving hexagons to show my image. I am satisfied with the beauty and abstractness.<\/p>\n","protected":false},"author":667,"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\/f2021\/wp-json\/wp\/v2\/posts\/68377"}],"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\/667"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=68377"}],"version-history":[{"count":6,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/68377\/revisions"}],"predecessor-version":[{"id":68384,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/68377\/revisions\/68384"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=68377"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=68377"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=68377"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}