{"id":66250,"date":"2021-09-19T22:26:15","date_gmt":"2021-09-20T02:26:15","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=66250"},"modified":"2021-09-19T22:28:18","modified_gmt":"2021-09-20T02:28:18","slug":"project-3-dynamic-drawing-16","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/09\/19\/project-3-dynamic-drawing-16\/","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\/sketch-157.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=\"450\" height=\"600\"><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">var angle = 0\nfunction setup() {\n    createCanvas(450, 600);\n    background(0);\n}\n\nfunction draw() {\n    if (mouseY &lt; height \/ 2){ \/\/determines color based on mouse's vertical side of canvas\n        background (\"black\")\n    }\n    else if (mouseY &gt; height \/ 2) {\n        background (135, 188, 222)\n    }\n    \/\/if (mouse X &lt; width \/ 2) {\n      \/\/background (255, 190, 11)\n\n    noStroke();\n    fill(\"white\") \/\/ circle moves up and down\n    ellipse(225, mouseY, mouseY, mouseY)\n\n\n    ellipse(mouseX, 300, mouseX, 10) \/\/ ellipses moves side to side and gets longer\n    ellipse(mouseX, 20, mouseX, 10)\n    ellipse(mouseX, 580, mouseX, 10)\n    ellipse(mouseX, 40, mouseX, 10)\n    ellipse(mouseX, 560, mouseX, 10)\n    ellipse(mouseX, 60, mouseX, 10)\n    ellipse(mouseX, 540, mouseX, 10)\n    ellipse(mouseX, 320, mouseX, 10)\n    ellipse(mouseX, 280 , mouseX, 10)\n    ellipse(mouseX, 80 , mouseX, 10)\n    ellipse(mouseX, 100 , mouseX, 10)\n    ellipse(mouseX, 120, mouseX, 10)\n    ellipse(mouseX, 140 , mouseX, 10)\n    ellipse(mouseX, 160 , mouseX, 10)\n    ellipse(mouseX, 180 , mouseX, 10)\n    ellipse(mouseX, 200 , mouseX, 10)\n    ellipse(mouseX, 220 , mouseX, 10)\n    ellipse(mouseX, 240 , mouseX, 10)\n    ellipse(mouseX, 260, mouseX, 10)\n    ellipse(mouseX, 280 , mouseX, 10)\n    ellipse(mouseX, 340 , mouseX, 10)\n    ellipse(mouseX, 360 , mouseX, 10)\n    ellipse(mouseX, 380 , mouseX, 10)\n    ellipse(mouseX, 400 , mouseX, 10)\n    ellipse(mouseX, 420 , mouseX, 10)\n    ellipse(mouseX, 440, mouseX, 10)\n    ellipse(mouseX, 460 , mouseX, 10)\n    ellipse(mouseX, 480 , mouseX, 10)\n    ellipse(mouseX, 500 , mouseX, 10)\n    ellipse(mouseX, 520 , mouseX, 10)\n\n    push() \/\/ circle rotates around point\n    translate(225, 300);\n    fill(255,190,11)\n    rotate(radians(min(mouseX, 200)));\n    ellipse(100, 100, 40, 40);\n    angle += 2\n    if (mouseY)\n    pop()\n}\n<\/code><\/pre><\/p>\n\n\n\n<p>This project was hard because it was more open ended than the previous one&rsquo;s and I had a difficult time understanding what to create and how to create it.<\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>sketch var angle = 0 function setup() { createCanvas(450, 600); background(0); } function draw() { if (mouseY &lt; height \/ 2){ \/\/determines color based on mouse&#8217;s vertical side of canvas background (&#8220;black&#8221;) } else if (mouseY &gt; height \/ 2) { background (135, 188, 222) } \/\/if (mouse X &lt; width \/ 2) { \/\/background &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/09\/19\/project-3-dynamic-drawing-16\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project 3: Dynamic Drawing&#8221;<\/span><\/a><\/p>\n","protected":false},"author":653,"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\/66250"}],"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\/653"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=66250"}],"version-history":[{"count":3,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/66250\/revisions"}],"predecessor-version":[{"id":66255,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/66250\/revisions\/66255"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=66250"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=66250"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=66250"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}