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

jen project 03 sketch copy<\/a><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\nvar minSize = 0.6;\nvar maxSize = 3;\n\n\nfunction setup() {\n createCanvas(450, 600);\n strokeWeight(10);\n}\n\nfunction draw() {\n if (mouseX < width\/2 & mouseY < height\/2) {\n background(23,48,107);\n } else if (mouseX < width\/2 & mouseY > height\/2) { \n background(204,102,0);\n } else if (mouseX > width\/2 & mouseY < height\/2) {\n background(153,204,255);\n } else {\n background (255,204,255);\n }\n \/\/main circle\n fill(255);\n stroke(51,102,0);\n circle(225,300, mouseX, mouseY);\n \n \/\/green line \n stroke(23,112,44);\n line(225, 300, mouseX, mouseY);\n \n \/\/light green line\n stroke(154,185,158);\n var mx = map(mouseX, 0, width, 60, 180);\n line(225, 300, mx, mouseY); \n \n \/\/orange circle\n if (mouseX < 225 & mouseY > 300) { \n fill(255,178,102);\n ellipse(mouseX, mouseY, 50, 50);\n \n \/\/blue circle and rotating blue circles \n } else if (mouseX > 225 & mouseY < 300) {\n fill(178,202,243);\n ellipse(mouseX, mouseY, 50, 50);\n push();\n translate(337.5,150);\n rotate(radians(mouseY)); \n ellipse(-50,50,40,40);\n ellipse(-50,-50,40,40);\n ellipse(50,50,40,40); \n ellipse(50,-50,40,40);\n pop();\n\n \/\/light purple circle and sheer circles\n } else if (mouseX > 225 & mouseY > 300) {\n fill(146,98,178);\n ellipse(mouseX, mouseY, 50, 50);\n fill(255,150);\n ellipse(mouseX, height\/2, mouseY, mouseY);\n fill(255,150);\n ellipse(width - mouseX, height\/2, height - mouseY, height - mouseY);\n }\n \n \/\/dark blue circle and scattering white dots \n else { \n for (let y = 0; y < 100; y++) {\n randomSize = random(minSize, maxSize);\n randomX = random(width);\n randomY = random(height);\n fill(0,76,153);\n stroke(154,185,158);\n ellipse(mouseX, mouseY, 50, 50);\n noStroke();\n fill(255);\n ellipse(randomX, randomY, randomSize, randomSize);\n } \n }\n}<\/code><\/pre><\/p>\n\n\n\n<p>I wanted to create a sort of clock through the white circle and green clock hands that lengthened or shortened depending on the mouse. The upper left quadrant has a busy background to represent how that time period (9am- 12pm) is when my schedule usually feels the most hectic. Admittedly the other quadrants are a bit more random, but I definitely wanted to try out the push and pop functions we recently learned, so I incorporated these with the rotating light blue circles. <\/p>\n\n\n\n<p><\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>jen project 03 sketch copy var minSize = 0.6; var maxSize = 3; function setup() { createCanvas(450, 600); strokeWeight(10); } function draw() { if (mouseX < width\/2 & mouseY < height\/2) { background(23,48,107); } else if (mouseX < width\/2 & mouseY > height\/2) { background(204,102,0); } else if (mouseX > width\/2 & mouseY < height\/2) … <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/09\/19\/project-03-dynamic-drawing-11\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> “Project 03: Dynamic Drawing”<\/span><\/a><\/p>\n","protected":false},"author":651,"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\/66264"}],"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\/651"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=66264"}],"version-history":[{"count":6,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/66264\/revisions"}],"predecessor-version":[{"id":66279,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/66264\/revisions\/66279"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=66264"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=66264"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=66264"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}