{"id":66259,"date":"2021-09-19T23:01:26","date_gmt":"2021-09-20T03:01:26","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=66259"},"modified":"2021-09-19T23:01:26","modified_gmt":"2021-09-20T03:01:26","slug":"dynamic-drawing-4","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/09\/19\/dynamic-drawing-4\/","title":{"rendered":"Dynamic Drawing"},"content":{"rendered":"\n

sketch<\/a>\n\n\n\n<\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">function setup() {\n createCanvas(480,640);\n background(0);\n}\n\nfunction draw() {\n var shapeWidth;\n shapeWidth = Math.abs(mouseX - 240) \/ 2 + 80;\n background(0);\n fill(255, mouseY \/ 2.5, 0);\n ellipse(240, 180, shapeWidth, 200);\n fill(0, 255, mouseY \/ 2.5);\n ellipse(120, 440, shapeWidth, 200);\n fill(mouseY \/ 2.5, 0, 255);\n ellipse(360, 440, shapeWidth, 200);\n}\n<\/code><\/pre><\/p><p>I drew three circles that change color and width based on the mouse position. First I drew the circles and changed the colors, and then I decided that wasn’t complicated enough. Now they look super cool!<\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>sketch function setup() { createCanvas(480,640); background(0); } function draw() { var shapeWidth; shapeWidth = Math.abs(mouseX – 240) \/ 2 + 80; background(0); fill(255, mouseY \/ 2.5, 0); ellipse(240, 180, shapeWidth, 200); fill(0, 255, mouseY \/ 2.5); ellipse(120, 440, shapeWidth, 200); fill(mouseY \/ 2.5, 0, 255); ellipse(360, 440, shapeWidth, 200); } I drew three circles that … <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/09\/19\/dynamic-drawing-4\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> “Dynamic Drawing”<\/span><\/a><\/p>\n","protected":false},"author":652,"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\/66259"}],"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\/652"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=66259"}],"version-history":[{"count":3,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/66259\/revisions"}],"predecessor-version":[{"id":66263,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/66259\/revisions\/66263"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=66259"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=66259"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=66259"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}