{"id":71981,"date":"2022-09-17T10:40:07","date_gmt":"2022-09-17T14:40:07","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/?p=71981"},"modified":"2022-09-17T10:55:05","modified_gmt":"2022-09-17T14:55:05","slug":"project-03-dynamic-drawing-3","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/09\/17\/project-03-dynamic-drawing-3\/","title":{"rendered":"Project 03 Dynamic Drawing"},"content":{"rendered":"\n

For this project, I wanted some kind of flower scene. I had a lot of fun figuring out how to make it seem like they can grow based on the position of the mouse, along with making the cloud interactive both with the sun and the mouse. I added the spinning parts to try the rotate and push & pop methods and figure out how they work.<\/p>\n\n\n\n

\"\" — Initial idea of moving flower and cloud with mouseX and mouseY. Also, figuring out how to make scene darker when cloud covers the sun.<\/figcaption><\/figure>
<\/p><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/ Rachel Legg \/ rlegg \/ Section C\n\nvar x;\nvar y;\nvar offset = 5;\nvar fOne;\nvar fThree;\nvar edge = 599;\nvar angle = 0;\n\nfunction setup() {\n createCanvas(600, 450);\n background(255);\n x = 1\/5 * width;\n}\n\nfunction draw() {\n \/\/if mouse is on right side, it is night , or else it is day\n if (mouseX <= width \/ 2){\n background(135, 206, 235); \/\/dark blue\n noStroke();\n ellipse(75, 75, 40);\n fill(\"yellow\");\n noStroke();\n ellipse(75, 75, 40);\n }else{\n background(0, 0, 102);\n fill(255);\n noStroke();\n ellipse(75, 75, 40);\n fill(0, 0, 102);\n ellipse(80, 70, 40);\n }\n \n \/\/ground\n fill(111, 78, 55); \/\/brown\n noStroke();\n rect(0, 4\/5 * height, width, 4\/5 * height);\n fill(\"green\"); \/\/grass\n rect(0, 4\/5 * height, width, 20);\n\n\n\/\/flower 1\n\/\/flower stem grows and shrink based on mouse location\n if(mouseX < 200 & mouseY <= (4\/5 *height)){\n stroke(\"green\");\n line(1\/4 * width, 4\/5 * height, 1\/4 * width, mouseY);\n fill(255);\n noStroke();\n fOne = 1\/4 * width;\n circle(fOne, mouseY - 17, 30);\n circle(fOne - 20, mouseY - 5, 30);\n circle(fOne + 20, mouseY - 5, 30);\n circle(fOne - 12, mouseY + 13, 30);\n circle(fOne + 12, mouseY + 13, 30);\n fill(\"yellow\");\n stroke(\"pink\");\n strokeWeight(4);\n circle(1\/4 * width, mouseY, 20);\n \/\/flower spinds when not interacting\n }else{\n strokeWeight(4);\n stroke(\"green\");\n line(1\/4 * width, 4\/5 * height, 1\/4 * width, 2\/3 * height);\n fill(255);\n noStroke();\n push(); \n translate(150, 300);\n rotate(radians(angle));\n circle(0, -17, 30);\n circle(-20, -5, 30);\n circle(20, -5, 30);\n circle(-12, 13, 30);\n circle(12, 13, 30);\n fill(\"yellow\");\n stroke(\"pink\");\n strokeWeight(4);\n circle(0, 0, 20);\n pop();\n angle += 2\n }\n\n \/\/flower 2\n if(mouseX < 400 & mouseX > 200 && mouseY <= (4\/5 *height)){\n stroke(\"green\");\n line(width \/ 2, 4\/5 * height, width \/ 2, mouseY);\n fill(250, 172, 382);\n noStroke();\n circle(width \/ 2, mouseY, 40, 40);\n fill(77, 208, 99);\n circle(width \/ 2, mouseY, 25, 25);\n fill(255, 51, 51);\n circle(width \/ 2, mouseY, 10, 10);\n }else{\n strokeWeight(4);\n stroke(\"green\");\n line(width \/ 2, 4\/5 * height, width \/ 2, 2\/3 * height);\n fill(250, 172, 382);\n noStroke();\n circle(width \/ 2, 2\/3 * height, 40, 40);\n fill(77, 208, 99);\n circle(width \/ 2, 2\/3 * height, 25, 25);\n fill(255, 51, 51);\n circle(width \/ 2, 2\/3 * height, 10, 10);\n }\n\n \/\/flower 3\n if(mouseX > 400 & mouseY <= (4\/5 *height)){\n stroke(\"green\");\n line(3\/4 * width, 4\/5 * height, 3\/4 * width, mouseY);\n noStroke();\n fThree = 3\/4 * width;\n fill(0, 128, 255);\n circle(fThree + 20, mouseY - 17, 25);\n circle(fThree - 20, mouseY - 17, 25);\n circle(fThree + 20, mouseY + 17, 25);\n circle(fThree - 20, mouseY + 17, 25);\n fill(0, 51, 102);\n ellipse(fThree, mouseY - 17, 20, 30);\n ellipse(fThree - 20, mouseY, 30, 20);\n ellipse(fThree + 20, mouseY, 30, 20);\n ellipse(fThree, mouseY + 17, 20, 30);\n fill(255, 153, 204);\n circle(3\/4 * width, mouseY, 30);\n fill(255, 51, 153);\n stroke(204, 204, 255);\n strokeWeight(4);\n circle(3\/4 * width, mouseY, 20);\n }else{\n strokeWeight(4);\n stroke(\"green\");\n line(3\/4 * width, 4\/5 * height, 3\/4 * width, 2\/3 * height);\n fill(255);\n noStroke();\n noStroke();\n push(); \n translate(450, 300);\n rotate(radians(angle));\n fill(0, 128, 255);\n circle(20, -17, 25);\n circle(-20, -17, 25);\n circle(20, 17, 25);\n circle(-20, 17, 25);\n fill(0, 51, 102);\n ellipse( 0, -17, 20, 30);\n ellipse(-20, 0, 30, 20);\n ellipse(20, 0, 30, 20);\n ellipse(0, 17, 20, 30);\n fill(255, 153, 204);\n circle(0, 0, 30);\n fill(255, 51, 153);\n stroke(204, 204, 255);\n strokeWeight(4);\n circle(0, 0, 20);\n pop();\n angle += 2\n }\n\n \/\/cloud follows mouse back and forth\n if (mouseX > x) {\n x += 0.5;\n offset = -5;\n }\n if (mouseX < x) {\n x -= 0.5;\n offset = 5;\n }\n if (x > 599){ \/\/constrain to frame\n x = 599;\n }\n\n fill(255);\n noStroke();\n ellipse(x, 100, 100);\n ellipse(x + 50, 110, 70);\n ellipse(x - 50, 110, 70);\n\n\n \/\/if cloud covers sun, screen gets darker\n var shadeCover = 20;\n\n if (x <= 125 & x >= 30){\n background(0, 0, 102, shadeCover);\n }\n\n}\n\n\n\n\n<\/code><\/pre><\/div><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>project3 For this project, I wanted some kind of flower scene. I had a lot of fun figuring out how to make it seem like they can grow based on the position of the mouse, along with making the cloud interactive both with the sun and the mouse. I added the spinning parts to try … <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/09\/17\/project-03-dynamic-drawing-3\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> “Project 03 Dynamic Drawing”<\/span><\/a><\/p>\n","protected":false},"author":737,"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\/f2022\/wp-json\/wp\/v2\/posts\/71981"}],"collection":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/users\/737"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=71981"}],"version-history":[{"count":4,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/71981\/revisions"}],"predecessor-version":[{"id":71990,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/71981\/revisions\/71990"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=71981"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=71981"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=71981"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}