{"id":66083,"date":"2021-09-18T23:02:48","date_gmt":"2021-09-19T03:02:48","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=66083"},"modified":"2021-09-18T23:02:48","modified_gmt":"2021-09-19T03:02:48","slug":"project-3-dynamic-drawing-10","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/09\/18\/project-3-dynamic-drawing-10\/","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><p><a class=\"p5_sketch_link\" data-width=\"450\" data-height=\"600\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/09\/aysha-dynamic.js\">aysha-dynamic<\/a><iframe src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/plugins\/p5-embedder\/p5_iframe.html\" class=\"p5_exampleFrame\" width=\"450\" height=\"600\"><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">var x = 1\nvar y = .75\n\nfunction setup() {\n    createCanvas(450, 600);\n}\n\nfunction draw() {\n    background(200, 100, 0); \/\/ orange background\n    fill(mouseX);\n    rectMode(CORNER);\n    rect(0, 0, mouseX*x, mouseY*y); \/\/ top left rect\n    rectMode(CORNERS);\n    fill(mouseY);\n    rect(450, 600, mouseX*x, mouseY*y); \/\/ bottom right rect\n    fill(200, 75, 75);\n    triangle(mouseX, mouseY*y, mouseX*1.25, mouseY+30,\n        mouseX*.75, mouseY+30); \/\/ cursor triangle\n}<\/code><\/pre><\/p>\n\n\n\n<p>It was interesting trying to find variables to incorporate other than mouseX and mouseY. I ultimately decided to go with something simple just because the layers of drawing looked cleaner. <\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>aysha-dynamic var x = 1 var y = .75 function setup() { createCanvas(450, 600); } function draw() { background(200, 100, 0); \/\/ orange background fill(mouseX); rectMode(CORNER); rect(0, 0, mouseX*x, mouseY*y); \/\/ top left rect rectMode(CORNERS); fill(mouseY); rect(450, 600, mouseX*x, mouseY*y); \/\/ bottom right rect fill(200, 75, 75); triangle(mouseX, mouseY*y, mouseX*1.25, mouseY+30, mouseX*.75, mouseY+30); \/\/ cursor &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/09\/18\/project-3-dynamic-drawing-10\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project 3: Dynamic Drawing&#8221;<\/span><\/a><\/p>\n","protected":false},"author":681,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[100,58],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/66083"}],"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\/681"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=66083"}],"version-history":[{"count":5,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/66083\/revisions"}],"predecessor-version":[{"id":66123,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/66083\/revisions\/66123"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=66083"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=66083"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=66083"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}