The piece is inspired by 3D Glasses, and the relationship between Red and Blue light in bringing images “off the screen.” I think it has a really cool holographic affect to it that is also brought about with proximity and rotation. <\/p>\n\n\n\n

sketch<\/a>\n\n\n\n\n\n

<\/p><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/Aarnav Patel\n\/\/Section D\n\nvar side;\nvar midX = 0;\t\t\/\/the coordinates of the middle squares (what the other squares are proportional to)\nvar midY = 0; \nvar rotation = 0;\nvar color1 = 255;\nvar color2 = 0;\n\n\nfunction setup() {\n createCanvas(600, 450);\n background(220);\n text(\"p5.js vers 0.9.0 test.\", 10, 15);\n side = width \/ 32;\t\n\n}\n\nfunction draw() {\n\n\t\/\/change my origin to the middle of the canvas to better organize my rectangles\n\ttranslate(width \/ 2, height \/ 2);\n\tbackground(0);\n\tnoStroke();\n\tcolorMode(RGB);\n\n\t\/\/side rectangles are proportionally equidistant from the middle square (based on x value)\n\txdiff = min(mouseX \/ 2, (width \/ 2) - side);\n\tydiff = min(mouseY \/ 2, (height \/ 2) - side);\n\t\n\n\t\/\/Red Rectangles (TOP ROW)\n\tfill(color1, 0, color2, 100);\n\tpush();\t\t\t\t\t\t\t\/\/Create its own coordinate system (for rotation)\n\ttranslate(midX, midY - ydiff);\t\/\/MID square coordinate place\n\trotate(radians(rotation));\t\n\trectMode(CENTER);\t\t\t\t\/\/means that the x and y value below are the CENTER of the rectangle\n\trect(0, 0, side, side);\n\tpop();\t\t\t\t\t\t\t\/\/reset coordinate sytem for next rectangle\n\n\tpush();\n\ttranslate(midX - xdiff, midY - ydiff);\t\/\/LEFT square coordinate place\n\trotate(radians(rotation));\n\trectMode(CENTER);\n\trect(0, 0, side, side);\n\tpop();\n\n\tpush();\n\ttranslate(midX + xdiff, midY - ydiff);\t\t\/\/RIGHT square coordinate place\n\trotate(radians(rotation));\n\trectMode(CENTER);\n\trect(0, 0, side, side);\n\tpop();\n\n\t\/\/blue rectangles (BOTTOM ROW)\n\tfill(color2, 0, color1, 100);\n\tpush();\n\ttranslate(midX, midY + ydiff);\t\t\/\/MID square coordinate place\n\trotate(radians(rotation));\n\trectMode(CENTER);\n\trect(0, 0, side, side);\n\tpop();\n\n\tpush();\n\ttranslate(midX - xdiff, midY + ydiff);\t\t\/\/LEFT square coordinate place\n\trotate(radians(rotation));\n\trectMode(CENTER);\n\trect(0, 0, side, side);\n\tpop();\n\n\tpush();\n\ttranslate(midX + xdiff, midY + ydiff);\t\t\/\/RIGHT square coordinate place\n\trotate(radians(rotation));\n\trectMode(CENTER);\n\trect(0, 0, side, side);\n\tpop();\n\n\trotation = rotation + 1;\t\/\/Increment rotation so squares always spinning\n\n\t\n\tif (mouseIsPressed) {\t\/\/if user holds mouse, it changes color (switches blue and red values of each row)\n\t\tif (color1 != 0) {\n\t\t\tcolor1 -= 1;\n\t\t\tcolor2 += 1;\n\t\t} else {\n\t\t\tcolor1 += 1;\n\t\t\tcolor2 -= 1;\n\t\t}\n\n\n\t\tif (side >= width) {\t\/\/if rectangles get too big for the canvas, it resets back to initial side length\n\t\t\tside = width \/ 32;\n\t\t\tcolor1 = 255;\n\t\t\tcolor2 = 0;\n\t\t} else {\n\t\t\tside = side * 1.01;\n\t\t}\n\t}\n\n\t\n\n}\n\n<\/code><\/pre><\/div><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>The piece is inspired by 3D Glasses, and the relationship between Red and Blue light in bringing images “off the screen.” I think it has a really cool holographic affect to it that is also brought about with proximity and rotation. HOLD DOWN ON MOUSE TO CHANGE SIZE AND COLOR sketch \/\/Aarnav Patel \/\/Section D … <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/09\/17\/project-3-dynamic-drawing\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> “Project 3 Dynamic Drawing”<\/span><\/a><\/p>\n","protected":false},"author":750,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[100,58,1],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/72135"}],"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\/750"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=72135"}],"version-history":[{"count":2,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/72135\/revisions"}],"predecessor-version":[{"id":72138,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/72135\/revisions\/72138"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=72135"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=72135"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=72135"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}