{"id":66286,"date":"2021-09-20T00:03:20","date_gmt":"2021-09-20T04:03:20","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=66286"},"modified":"2021-09-20T00:07:39","modified_gmt":"2021-09-20T04:07:39","slug":"project-3-dynamic-drawing-18","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/09\/20\/project-3-dynamic-drawing-18\/","title":{"rendered":"Project 3: Dynamic Drawing"},"content":{"rendered":"\n

chapmanDynamic<\/a><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/ELise Chapman\n\/\/ejchapma\n\/\/Section D\n\nfunction setup() {\n createCanvas(450,600);\n rectMode(CENTER);\n}\n\nvar stormSize=1;\nvar rainPos=200;\nvar rainV=1;\n\nfunction draw() { \/\/cloud\n noStroke();\n background(149,209,216);\n \/\/as the mouse moves down, the sky gets darker\n if (mouseY<100) {\n background(149,209,216);\n stormSize=1;\n } else if (mouseY>=100 & mouseY<200) {\n background(121,176,190);\n stormSize=2;\n } else if (mouseY>=200 & mouseY<300) {\n background(85,137,157);\n stormSize=3;\n } else if (mouseY>=300 & mouseY<400) {\n background(62,103,124);\n stormSize=4;\n } else if (mouseY>=400 & mouseY<500) {\n background(52,82,102);\n stormSize=5;\n } else {\n background(43,63,81);\n stormSize=6;\n }\n\n \/\/as the mouse moves left and right, the wind blows\n push();\n rotate(-radians(mouseX\/50));\n\n \/\/as the mouse moves down, the rain gets heavier\n fill(90,195,255);\n rect(width\/2,rainPos,5+mouseY\/50,25+mouseY\/20,80,80,80,80);\n rect(width\/2+25,rainPos+50,5+mouseY\/50,25+mouseY\/20,80,80,80,80);\n rect(width\/2+50,rainPos+250,5+mouseY\/50,25+mouseY\/20,80,80,80,80);\n rect(width\/2+75,rainPos+150,5+mouseY\/50,25+mouseY\/20,80,80,80,80);\n rect(width\/2+100,rainPos+75,5+mouseY\/50,25+mouseY\/20,80,80,80,80);\n rect(width\/2-25,rainPos+100,5+mouseY\/50,25+mouseY\/20,80,80,80,80);\n rect(width\/2-50,rainPos-5,5+mouseY\/50,25+mouseY\/20,80,80,80,80);\n rect(width\/2-75,rainPos+200,5+mouseY\/50,25+mouseY\/20,80,80,80,80);\n rect(width\/2-100,rainPos+75,5+mouseY\/50,25+mouseY\/20,80,80,80,80);\n if (stormSize==1) {\n rainPos=rainPos;\n rainV=3;\n } else if (stormSize==2) {\n rainPos=rainPos;\n rainV=5;\n } else if (stormSize==3) {\n rainPos=rainPos;\n rainV=6.5;\n } else if (stormSize==4) {\n rainPos=rainPos;\n rainV=7;\n } else if (stormSize==5) {\n rainPos=rainPos;\n rainV=8.25;\n } else if (stormSize==6) {\n rainPos=rainPos;\n rainV=9.5;\n }\n rainPos += rainV;\n if (rainPos>height+100) {\n rainPos=200;\n }\n\n \/\/as the mouse moves down, the cloud gets smaller and darker\n pop();\n if (stormSize==1) {\n fill(207,215,218);\n } else if (stormSize==2) {\n fill(170,180,184);\n } else if (stormSize==3) {\n fill(137,154,162);\n } else if (stormSize==4) {\n fill(128,144,151);\n } else if (stormSize==5) {\n fill(104,118,124);\n } else if (stormSize==6) {\n fill(96,105,109);\n }\n ellipse((width\/2)+25,(110+mouseY\/50),(150-mouseY\/10));\n rect(width\/2,160,(300-mouseY\/10),(100-mouseY\/20),80,80,80,80);\n ellipse((width\/2)-50,(125+mouseY\/50),(100-mouseY\/30));\n ellipse((width\/2)-20,130,50+mouseY\/20);\n ellipse((width\/2)+60,140,40+mouseY\/20);\n\n \/\/when the rain is hard and the mouse is clicked, lightening strikes\n if (mouseIsPressed) {\n if (stormSize==5 || stormSize==6) {\n stroke(260);\n strokeWeight(10);\n line(225,200,125,350);\n line(125,350,250,400);\n line(250,400,200,710);\n }\n }\n}\n<\/code><\/pre><\/p>\n\n\n<p>When thinking of things to make, I started by thinking about natural processes. I love watching the rain and how varied rain occurs, so I decided to move with that. I knew I wanted the rain to get bigger as the mouse moved down, along with the sky and cloud growing darker to simulate heavier rain. I also knew I wanted to include lighting on a click – just because lighting is fun. I think I went in with a clear idea in mind of what I wanted, so at that point it was just writing the program. <\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>chapmanDynamic \/\/ELise Chapman \/\/ejchapma \/\/Section D function setup() { createCanvas(450,600); rectMode(CENTER); } var stormSize=1; var rainPos=200; var rainV=1; function draw() { \/\/cloud noStroke(); background(149,209,216); \/\/as the mouse moves down, the sky gets darker if (mouseY<100) { background(149,209,216); stormSize=1; } else if (mouseY>=100 & mouseY<\/p>\n","protected":false},"author":644,"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\/66286"}],"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\/644"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=66286"}],"version-history":[{"count":3,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/66286\/revisions"}],"predecessor-version":[{"id":66290,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/66286\/revisions\/66290"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=66286"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=66286"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=66286"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}