This animation depicts a sun and a moon rotating in a circle, depending on the location of the user’s mouse. The background the sun passes through changes through sunrise, blue sky, and sunset colors as the sun moves from left to right.<\/p>\n\n\n\n
Dynamic Drawing<\/a>Download<\/a>\n\n\n\n<\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/Alana Wu\n\/\/ID: alanawu\n\/\/Section C\n\/\/Project-03\n\n\/\/sun and moon move in a circle centered in the canvas\n\/\/ stars rotate around the moon\n\/\/clouds rotate around the sun\n\/\/when sun is above height\/2, sunrise, then blue, then sunset colors\n\/\/when moon is above height\/2, varying shades of blue \n\nfunction setup()\n{\n createCanvas(600, 450);\n background(220);\n text(\"p5.js vers 0.9.0 test.\", 10, 15);\n}\nvar x = 30;\n\nfunction draw()\n{\n strokeWeight(0);\n background(0);\n\n\/\/moves (0,0) to center of canvas\n translate (300, 225);\n\n\/\/as mouse moves from left to right, background sky transitions\n\/\/from red (sunrise) to yellow, blue, yellow, and back to red(sunset)\n if (mouseX < 120)\n {\n fill (255, mouseX*2, 0);\n }\n if (mouseX>= 120 & mouseX < 220)\n {\n fill (255, 255, mouseX-40);\n }\n\/\/get from (255, 255, 180) to (50, 155, 255)\n if (mouseX>= 220 & mouseX < 300)\n {\n fill (50+(300-mouseX)*2.5, 155+(300-mouseX)*1.2, 255 - (300-mouseX));\n }\n\/\/get from (50, 155, 255) to (255, 255, 180)\n if (mouseX >= 300 & mouseX < 380)\n {\n fill (50+(mouseX-300)*2.5, 155+(mouseX-300)*1.2, 255-(mouseX-300));\n }\n\/\/from (255, 255, 180) to (255, 240, 0)\n if (mouseX >= 380 & mouseX < 480)\n {\n fill (255, 175+(480-mouseX), (480-mouseX)*1.4);\n }\n if (mouseX >= 480)\n {\n fill(255, 700-mouseX*1.1, 0)\n }\n rect (-300, -225, 600, 225);\n fill (mouseX\/25, mouseX\/25, 100);\n rect (-300, 0, 600, 225);\n\n\/\/draws background clouds that move horizontally\n push(0);\n fill(235);\n \n \/\/if mouse is pressed, clouds change to dark gray and move left\n if (mouseIsPressed)\n {\n fill (90);\n x -= 5;\n }\n translate (-300, -225);\n ellipse (x, 45, 40, 40);\n ellipse (x+25, 30, 50, 50);\n ellipse(x+35, 60, 35, 35);\n ellipse (x+20, 50, 40, 40);\n\n ellipse (x+500, 150, 40, 40);\n ellipse (x+475, 160, 50, 50);\n ellipse(x+525, 170, 35, 35);\n ellipse (x+500, 180, 40, 40);\n\n ellipse (x + 300, 60, 40, 40);\n ellipse (x + 270, 70, 30, 30);\n ellipse (x + 285, 90, 50, 50);\n ellipse (x + 320, 90, 40, 40);\n\n ellipse (x+50, 100, 40, 40);\n ellipse (x+80, 130, 50, 50);\n ellipse(x+30, 132, 35, 35);\n ellipse (x+58, 135, 50, 50);\n pop();\n\n\n\/\/draws sun\n push();\n rotate (radians (135+mouseX\/3.55));\n fill (255, 255, 0);\n ellipse (90, 90, 50, 50);\n translate (90, 90);\n\/\/draws 9 clouds around the sun\n for (var i = 0; i <= 8; i++)\n {\n rotate (radians (40));\n fill (255);\n strokeWeight(0);\n ellipse (mouseX\/5 + 5, mouseY\/5 + 5, 15, 15);\n ellipse (mouseX\/5 - 8, mouseY\/5-10, 15, 15);\n ellipse (mouseX\/5, mouseY\/5, 20, 20);\n }\n pop();\n\n\/\/draws moon\n push();\n \n rotate (radians(315+mouseX\/3.55));\n fill (255, 255, 200);\n ellipse (90, 90, 50, 50);\n translate (90, 90);\n\n\/\/draws randomly moving stars around the moon \n for (var j = 0; j < 5; j++)\n {\n rotate (radians(random (50, 80)));\n fill (255, 255, 204);\n rectMode (CENTER);\n rect (mouseX\/9, mouseX\/8, 5, 20);\n rect (mouseX\/9, mouseX\/8, 20, 5);\n push();\n translate (mouseX\/9, mouseX\/8);\n\n\/\/can you change the frameRate for only a section of the code?\n for (var h = 0; h <= 7; h++)\n {\n fill (255 - mouseX\/7, 255 - mouseY\/3, 255 - mouseX\/5);\n rotate (radians (mouseY));\n ellipse (10+mouseX\/20, mouseY\/50, 8, 8);\n }\n pop();\n }\n\n \/\/clouds move horizontally right by .5 every frame\n x += .5;\n\n pop();\n\n}\n<\/code><\/pre><\/p><p><\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>This animation depicts a sun and a moon rotating in a circle, depending on the location of the user’s mouse. The background the sun passes through changes through sunrise, blue sky, and sunset colors as the sun moves from left to right. Dynamic DrawingDownload \/\/Alana Wu \/\/ID: alanawu \/\/Section C \/\/Project-03 \/\/sun and moon move … <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/09\/16\/project-03-dynamic-drawing\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> “Project 03: Dynamic Drawing”<\/span><\/a><\/p>\n","protected":false},"author":677,"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\/65867"}],"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\/677"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=65867"}],"version-history":[{"count":6,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/65867\/revisions"}],"predecessor-version":[{"id":65937,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/65867\/revisions\/65937"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=65867"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=65867"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=65867"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}