{"id":66147,"date":"2021-09-18T23:53:47","date_gmt":"2021-09-19T03:53:47","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=66147"},"modified":"2021-09-19T00:01:17","modified_gmt":"2021-09-19T04:01:17","slug":"project-3-dynamic-drawing-11","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/09\/18\/project-3-dynamic-drawing-11\/","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><div class=\"wp-block-file\"><a class=\"p5_sketch_link\" data-width=\"640\" data-height=\"450\" data-fontsize=\"9\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/09\/sketch-151.js\">sketch-beans<\/a><a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/09\/sketch-151.js\" class=\"wp-block-file__button\" download>Download<\/a><iframe src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/plugins\/p5-embedder\/p5_iframe.html\" class=\"p5_exampleFrame\" width=\"640\" height=\"450\"><\/iframe><pre class=\"language-javascript\" style=\"font-size:9px !important; line-height:13.05px !important\"><code class=\"p5_editor language-javascript\" style=\"font-size:9px !important;\">\/\/Yeon Lee, Section C\n\/\/Project-03: Dynamic Drawing\n\nvar s = 100;\nvar starY = 0;\n\nfunction setup() {\n    createCanvas(600, 450);\n}\n\nfunction draw() {\n    \/\/background\n    let s = map(mouseX, 0, width\/2, 50, 100); \n    background(s, 100, 140); \/\/use mouseX to change the background color and change the size of the moon\/sun\n  \n    \/\/moon + sun (could be either - moon on blue background and sun on pink background)\n    fill(255, 250, 198); \n    ellipse(s, s, s);\n  \n    \/\/stars\n    s = 450 - mouseY; \/\/use mouseY to scroll stars up and down (stars are up at night and they go down when it becomes the sun)\n    fill(255, 250, 198, 200);\n    circle(30, 30 + starY, 5);\n    circle(40, 200 + starY, 5);\n    circle(50, 100 + starY, 5);\n    circle(70, 50 + starY, 5);\n    circle(90, 100 + starY, 5);    \n    circle(120, 130 + starY, 5);\n    circle(150, 200 + starY, 5);\n    circle(170, 40 + starY, 5);\n    circle(200, 150 + starY, 5);\n    circle(240, 100 + starY, 5);    \n    circle(260, 240 + starY, 5);\n    circle(290, 150 + starY, 5);\n    circle(310, 40 + starY, 5);\n    circle(330, 150 + starY, 5);\n    circle(360, 30 + starY, 5);\n    circle(380, 200 + starY, 5);\n    circle(410, 50 + starY, 5);\n    circle(440, 100 + starY, 5);    \n    circle(470, 260 + starY, 5);\n    circle(490, 150 + starY, 5);\n    circle(510, 40 + starY, 5);\n    circle(530, 150 + starY, 5);\n    circle(550, 100 + starY, 5);  \n    circle(570, 200 + starY, 5);\n    circle(580, 150 + starY, 5);\n    circle(590, 40 + starY, 5);\n    starY = mouseY;\n\n    \/\/clouds\n    fill(255, 255, 255, 100);\n    rect(mouseX - 60, 30, 50, 25, 20); \/\/use mouseX to move clouds left and right\n    rect(mouseX, 30, 150, 25, 20);\n    rect(mouseX - 20, 65, 120, 25, 20);\n    rect(mouseX + 180, 130, 100, 25, 20);  \n    rect(mouseX + 160, 150, 80, 25, 20);\n    rect(mouseX + 290, 55, 35, 25, 20);\n    rect(mouseX + 335, 55, 110, 25, 20);\n    rect(mouseX + 365, 35, 130, 25, 20);\n    noStroke();\n   \n    \/\/desert\n    fill(199, 141, 110); \/\/third layer: light brown\n    rect(0, 340, 600);\n    rect(-100, 310, 330, 300, 20);    \n    rect(0, 300, 130, 300, 20);\n    ellipse(100, 345, 300, 50);\n    ellipse(400, 360, 450, 60);\n    rect(330, 320, 330, 400, 20);\n    rect(420, 300, 330, 400, 20);\n    rect(480, 290, 330, 400, 20);\n    rect(540, 260, 330, 400, 20);\n    fill(186, 85, 73); \/\/second layer: red brown\n    rect(0, 380, 600);\n    rect(-20, 340, 140, 60, 300);\n    rect(-50, 360, 260, 60, 300);\n    ellipse(200, 390, 200, 40);  \n    ellipse(400, 380, 500, 60); \n    fill(92, 21, 13); \/\/first layer: dark brown\n    rect(mouseX, 410, 600); \/\/use mouseX to move the foreground left and right \n    ellipse(mouseX + 100, 410, 500, 20);\n    ellipse(mouseX + 250, 405, 500, 30);\n    rect(mouseX + 300, 360, 400, 300, 20);\n    rect(mouseX + 340, 320, 400, 300, 20);\n    rect(mouseX - 1000, 370, 500, 300, 20);\n    rect(mouseX - 900, 350, 300, 300, 20);\n    rect(mouseX - 2000, 400, 3000, 300);\n \n    \/\/cactus1\n    fill(39, 7, 4);\n    rect(mouseX - 420, 250, 25, 170, 5);\n    ellipse(mouseX - 407.5, 251, 25, 28);\n    rect(mouseX - 460, 330, 60, 20, 10);\n    rect(mouseX - 460, 290, 20, 60, 20);\n\n    \/\/cactus2\n    rect(mouseX + 130, 250, 25, 170, 5);\n    ellipse(mouseX + 142.5, 251, 25, 28);\n    rect(mouseX + 130, 280, 60, 15, 10);\n    rect(mouseX + 175, 250, 15, 40, 10);\n    rect(mouseX + 90, 330, 60, 20, 10);\n    rect(mouseX + 90, 290, 20, 60, 20);\n}<\/code><\/pre><\/div>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"960\" height=\"540\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/09\/5olpx6i6ntf51.png\" alt=\"\" class=\"wp-image-66154\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/09\/5olpx6i6ntf51.png 960w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/09\/5olpx6i6ntf51-300x169.png 300w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/09\/5olpx6i6ntf51-768x432.png 768w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\"><\/figure><p>I was inspired by an artwork I found online and decided I would love to animate this illustration. I changed the background color from blue (representing night) to pink (representing sunrise). As user moves from left to right, the moon expands in size, depicting like a sun, and the cloud moves accordingly as well. Simultaneously, as user moves up and down, the stars shine at night. This project was really fun to play with mouseX and mouseY motions as well as use dynamic shapes to create a beautiful scenery.  <\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>I was inspired by an artwork I found online and decided I would love to animate this illustration. I changed the background color from blue (representing night) to pink (representing sunrise). As user moves from left to right, the moon expands in size, depicting like a sun, and the cloud moves accordingly as well. Simultaneously, &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/09\/18\/project-3-dynamic-drawing-11\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project 3: Dynamic Drawing&#8221;<\/span><\/a><\/p>\n","protected":false},"author":630,"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\/66147"}],"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\/630"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=66147"}],"version-history":[{"count":6,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/66147\/revisions"}],"predecessor-version":[{"id":69548,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/66147\/revisions\/69548"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=66147"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=66147"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=66147"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}