{"id":66161,"date":"2021-09-19T00:10:38","date_gmt":"2021-09-19T04:10:38","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=66161"},"modified":"2021-09-23T20:31:46","modified_gmt":"2021-09-24T00:31:46","slug":"project-03-dynamic-drawing-9","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/09\/19\/project-03-dynamic-drawing-9\/","title":{"rendered":"Project-03: Dynamic Drawing"},"content":{"rendered":"\n

My Project<\/a><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/sets up RGB values for color change;\nvar colorR = 236;\nvar colorG = 47;\nvar colorB = 19;\nvar colorR2 = 22;\nvar colorG2 = 167;\nvar colorB2 = 233;\n\/\/sets up angle variable that moves center rectangle;\nvar angle = 1;\n\/\/sets up direction variable that determines which direction said rectangle rotates;\nvar dir = 1;\n\nfunction setup() {\n createCanvas(650, 400);\n background(220);\n \/\/text(\"p5.js vers 0.9.0 test.\", 10, 15);\n}\n\nfunction draw() {\n \/\/creates a background that changes color dependant on which;\n \/\/side of the canvas the mouse is on;\n background(colorR, colorG, colorB);\n \/\/makes the rectangles based on the center of themselves; \n rectMode(CENTER);\n \/\/allows the rectangles to change color dependant on which;\n \/\/side of the cnavas the mouse is on;\n fill(colorR2, colorG2, colorB2);\n \/\/creates the 2 rectangles nearer to the perimeter of the canvas;\n \/\/they are opposite each other in direction and location;\n \/\/they increase in size when the mouse is on the right side and decrease when on the left;\n rect(constrain(mouseX, 50, 600), 50, max(50, min(mouseX, 300)), max(50, min(mouseX, 300)));\n rect(max(600 - mouseX, 50), 350, max(50, min(mouseX, 300)), max(50, min(mouseX, 300)));\n \/\/I used existing RGB values to make the center rectangle have dynamic color change as well;\n fill(colorR, colorG2, colorB);\n \/\/allows for the center rectangle to rotate;\n push();\n translate(325, 200);\n rotate(radians(angle));\n rect(0, 0, max(250-mouseX, 50), max(250-mouseX, 50));\n pop();\n angle = angle + (dir*1);\n \/\/changes the color between color depending on which side the mouse is on;\n if ( ((colorR != 22) & (colorG != 167) \n && (colorB != 233)) && mouseX > 325 ){\n colorR -= 1; \n colorG += 1; \n colorB += 1;\n }\n else if ( ((colorR != 236) & (colorG != 47) \n && (colorB != 19)) && mouseX < 325 ){\n colorR += 1;\n colorG -= 1;\n colorB -= 1;\n }\n if ( ((colorR2 != 22) & (colorG2 != 167) \n && (colorB2 != 233)) && mouseX < 325 ){\n colorR2 -= 1; \n colorG2 += 1; \n colorB2 += 1;\n }\n else if ( ((colorR2 != 236) & (colorG2 != 47) \n && (colorB2 != 19)) && mouseX > 325 ){\n colorR2 += 1;\n colorG2 -= 1;\n colorB2 -= 1;\n }\n \/\/changes the dir variable and thereby the direction of the center rectangle;\n \/\/dependant on which side of the canvas the mouse is on;\n if (mouseX < 325){\n dir = -1;\n }\n else{\n dir = 1;\n }\n\n}\n\n\n<\/code><\/pre><\/p>\n\n\n\n<p>I originally had something more complex but I changed it to something simpler. And I like how it is now.<\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>My Project \/\/sets up RGB values for color change; var colorR = 236; var colorG = 47; var colorB = 19; var colorR2 = 22; var colorG2 = 167; var colorB2 = 233; \/\/sets up angle variable that moves center rectangle; var angle = 1; \/\/sets up direction variable that determines which direction said rectangle … <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/09\/19\/project-03-dynamic-drawing-9\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> “Project-03: Dynamic Drawing”<\/span><\/a><\/p>\n","protected":false},"author":675,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[100,56],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/66161"}],"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\/675"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=66161"}],"version-history":[{"count":8,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/66161\/revisions"}],"predecessor-version":[{"id":66353,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/66161\/revisions\/66353"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=66161"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=66161"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=66161"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}