sketch<\/a>\n

Although the product is not where I wish it was visually, I will just have to improve on that in my next project. The most challenging part was refreshing my memory on radians so that I wouldn’t have to keep plugging in and checking if numbers work.<\/p><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/*\n Joan Lee\n Section D\n*\/\n\nvar h = 0;\nvar angle = 0;\n\nfunction setup() {\n createCanvas(600, 450);\n background(220);\n text(\"p5.js vers 0.9.0 test.\", 10, 15);\n}\n\nfunction draw() {\n background(135 * h, 209 * h, 255 * h); \/\/whenever the mouse moves horizontally it turns from 0 (black) to a sky blue color\n\n \/\/earth\n noStroke();\n fill(78, 92, 222);\n ellipse(width \/ 2, height, 800, 400);\n\n \/\/orbit, done above both the sun and moon to apply to both the same\n translate(h * width, 100); \/\/moves the sun and moon as the mouse moves horizontally\n rotate(h * QUARTER_PI); \/\/rotates by pi\/4 radians when the mouse moves horizontally\n \n \/\/sun\n fill(255, 208, 0);\n circle(-width \/ 2, 325, 100 * h); \/\/grows when mouse moving to the right\n\n \/\/moon\n fill(200);\n circle(width \/ 2, 50, 50 * (1 - h)); \/\/shrinks when mouse moving to the right\n fill(135 * h, 209 * h, 255 * h); \/\/same fill as the background to ensure it is invisible and hiding the rest of the moon\n circle(width \/ 2 + 15, 50, 50 * (1 - h)); \/\/circle that hides the rest of the moon so it looks like a crescent moon\n\n hPosition(); \/\/function defined below\n\n}\n\nfunction hPosition(){\n h = mouseX \/ width; \/\/h is btwn 0 and 1 for simplicity's sake instead of just mouseX\n h = Math.min(h, 1); \/\/stops the changes when the mouse moves 100% of the canvas horizontally\n}<\/code><\/pre><\/div><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>sketch Although the product is not where I wish it was visually, I will just have to improve on that in my next project. The most challenging part was refreshing my memory on radians so that I wouldn’t have to keep plugging in and checking if numbers work. \/* Joan Lee Section D *\/ var … <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/09\/18\/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":698,"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\/f2022\/wp-json\/wp\/v2\/posts\/72326"}],"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\/698"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=72326"}],"version-history":[{"count":2,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/72326\/revisions"}],"predecessor-version":[{"id":72332,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/72326\/revisions\/72332"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=72326"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=72326"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=72326"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}