{"id":65928,"date":"2021-09-17T17:49:56","date_gmt":"2021-09-17T21:49:56","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=65928"},"modified":"2021-09-17T17:49:56","modified_gmt":"2021-09-17T21:49:56","slug":"project-3-dynamic-drawing-2","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/09\/17\/project-3-dynamic-drawing-2\/","title":{"rendered":"Project 3: Dynamic Drawing"},"content":{"rendered":"<!DOCTYPE html PUBLIC \"-\/\/W3C\/\/DTD HTML 4.0 Transitional\/\/EN\" \"http:\/\/www.w3.org\/TR\/REC-html40\/loose.dtd\">\n<html><body><div class=\"wp-block-file\"><a class=\"p5_sketch_link\" data-height=\"450\" data-width=\"600\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/09\/sketch-126.js\">sketch<\/a><iframe src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/plugins\/p5-embedder\/p5_iframe.html\" class=\"p5_exampleFrame\" width=\"600\" height=\"450\"><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/Anthony Pan\n\/\/Section C\nvar size;\nvar colorRect; \nvar wave;\n\nfunction setup() {\n    createCanvas(600, 450);\n}\n\nfunction draw() {\n    scale(0.5); \/\/zoom out\n    translate(300, 200); \/\/moves origin of canvas\n    background(0);\n    fill(255,0,0); \/\/fills rectangles red\n    rotate(radians(30)); \/\/rotates canvas clockwise 30 degrees \n    mouseX = constrain(mouseX, 20, width); \/\/constraining mouseX to canvas\n    mouseY = constrain(mouseY, 0, height - 100); \/\/constraining mouseY to canvas\n    \n\n    \/\/rectangles created with for loop because of repeating pattern.\n    for (let x = 0; x &lt; 100; x++) {\n        \/\/initial rectangle \n        var position1 = (750 - 15 * x) + 200;\n        var position2 = (-300 + x * 10) - 200;\n        var rectWidth = 10;\n        var rectHeight = 120;\n\n        \/\/ size (further away from mouse, longer rectangle gets)(mouseX)\n        size = dist(mouseX, 0, position1, position2); \n        position2 -= size\/2; \n        rectHeight += size;\n\n        \/\/color (mouseY)\n        \/\/distance of mouseY from each rectangle gives color a value\n        color = dist(0, mouseY, position1, position2); \n        \/\/color creates a gradient from red to white\n        color = (color\/2.8 - 150) % 510\n        \/\/color = abs(255 - (color % 510)); \/\/ used so that there is a smooth transition from red to white to red again.\n        fill(255, color, color);\n\n        \/\/wave (mouseX)\n        wave = sin((PI\/7) * x); \/\/shifts the position of rectangles into a sin() wave\n        position2 += wave * mouseX\/3; \/\/adjusting posiition based off of mouseX\/3\n\n        \/\/twist (mouseY)\n        rotate(radians(mouseY\/100)); \/\/reduces sensitivity of mouseY, also rotates canvas based on position of mouseY\n\n        rect(position1, position2, rectWidth, rectHeight); \/\/draws rectangle\n\n    }\n}\n<\/code><\/pre><\/div>\n\n\n\n<p>Using a for loop, I was able to create a rectangle and iterate it multiple times without having to repeatedly create every rectangle. <\/p>\n\n\n\n<p>mouseX controls the size\/length and the position of each rectangle through a sin() wave function as you move from left to right. <\/p>\n\n\n\n<p>mouseY controls the color gradient from red to white as you move from top to bottom of the canvas. It also controls the rotation of the canvas. <\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>sketch \/\/Anthony Pan \/\/Section C var size; var colorRect; var wave; function setup() { createCanvas(600, 450); } function draw() { scale(0.5); \/\/zoom out translate(300, 200); \/\/moves origin of canvas background(0); fill(255,0,0); \/\/fills rectangles red rotate(radians(30)); \/\/rotates canvas clockwise 30 degrees mouseX = constrain(mouseX, 20, width); \/\/constraining mouseX to canvas mouseY = constrain(mouseY, 0, height &#8211; &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/09\/17\/project-3-dynamic-drawing-2\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project 3: Dynamic Drawing&#8221;<\/span><\/a><\/p>\n","protected":false},"author":635,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[100,57],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/65928"}],"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\/635"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=65928"}],"version-history":[{"count":2,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/65928\/revisions"}],"predecessor-version":[{"id":65931,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/65928\/revisions\/65931"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=65928"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=65928"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=65928"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}