{"id":67424,"date":"2021-10-10T22:31:58","date_gmt":"2021-10-11T02:31:58","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=67424"},"modified":"2021-10-10T22:31:58","modified_gmt":"2021-10-11T02:31:58","slug":"project-06-abstract-clock-11","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/10\/10\/project-06-abstract-clock-11\/","title":{"rendered":"Project 06: Abstract Clock"},"content":{"rendered":"\n

project 6 sketch copy<\/a><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">var beginday;\nvar seconds;\nvar minutes;\nvar hours;\nvar bloomx = []; \nvar bloomy = [];\n\nfunction setup(){\n createCanvas(460, 300);\n \n \/\/flower per each passing second\n for (i = 0; i < 60; i ++) {\n bloomx[i] = random(20,440);\n bloomy[i] = random(20,280);\n }\n}\n\nfunction draw(){\n hours = hour();\n minutes = minute();\n seconds = second();\n beginday = 270;\n angleMode(DEGREES);\n \n \/\/daytime background or nightime background \n if (hours < 7 || hours > 18){\n background(31, 47, 71);\n \n } else{\n background(102, 178, 255);\n \n }\n \n \/\/clock lines\n noFill();\n strokeWeight(15);\n \n \/\/hours measure\n stroke(255, 102, 102, 175);\n arc(230, 150, 240, 240, beginday, beginday + hours * 30);\n \n \/\/minutes measure\n stroke(255, 128, 0, 190);\n arc(230, 150, 200, 200, beginday, beginday + minutes * 6);\n \n \/\/seconds measure\n stroke(255,255,0, 125);\n arc(230, 150, 160, 160, beginday, beginday + seconds * 6);\n\n for (i = 0; i < seconds; i ++) {\n strokeWeight(10);\n fill(255);\n ellipse(bloomx[i], bloomy[i], 6, 6);\n }\n\n \/\/determines whether sun or moon is shown and whether the star is present \n if (hours < 7 || hours > 18){\n \n \/\/moon\n noStroke();\n fill(160,160,160);\n circle (230, 150, 125);\n fill(192,192,192);\n ellipse(270, 115, 10, 10);\n ellipse(235, 110, 30, 30);\n ellipse(270, 150, 40, 40);\n ellipse(230, 175, 20, 20);\n ellipse(205, 140, 40, 40);\n\n \/\/star that appears every OTHER second\n noStroke();\n fill(255);\n translate(300, 70);\n triangle(25 * (seconds % 2), 0, 0, 4, 0, -4);\n triangle(-4, 0, 4, 0, 0, 25 * (seconds % 2));\n triangle(-4, 0, 4, 0, 0, -25 * (seconds % 2));\n triangle(-25 * (seconds % 2), 0, 0, 4, 0, -4);\n\n } else{\n\n \/\/sun\n noStroke();\n fill(249, 228, 95);\n circle (230, 150, 125);\n \n \/\/cloud that appears every OTHER second\n fill(255);\n noStroke();\n ellipse(330, height\/2-70, 50, 50 * (seconds % 2));\n ellipse(360, height\/2-80, 80, 80 * (seconds % 2));\n ellipse(390, height\/2-70, 80, 80 * (seconds % 2));\n ellipse(420, height\/2-70, 50, 50 * (seconds % 2));\n \n }\n}<\/code><\/pre><\/p>\n\n\n\n<\/p>\n\n\n\nI wanted to use lines and play around with transparency, so that’s what I did with the three seconds, minutes and hours lines. Besides the inner yellow line that extended each second, I also added yellow flowers\/stars that would randomly populate the canvas per second. In the code you can see that when the hour of day is less than 7 (before 7am) or greater than 18 (after 6pm), the background color and the different parts (sun and cloud) will change into its night version (moon and star). Since there were now two elements measuring seconds, I had the cloud and star appear every other second for a bit of variety.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"1024\" height=\"504\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/IMG_6145-1024x504.jpg\" alt=\"\" class=\"wp-image-67435\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/IMG_6145-1024x504.jpg 1024w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/IMG_6145-300x148.jpg 300w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/IMG_6145-768x378.jpg 768w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/IMG_6145-1536x756.jpg 1536w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/IMG_6145-2048x1007.jpg 2048w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/IMG_6145-1200x590.jpg 1200w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\"><figcaption>Paper sketch of clock<\/figcaption><\/figure><\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"I wanted to use lines and play around with transparency, so that’s what I did with the three seconds, minutes and hours lines. Besides the inner yellow line that extended each second, I also added yellow flowers\/stars that would randomly populate the canvas per second. In the code you can see that when the hour … <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/10\/10\/project-06-abstract-clock-11\/\" class=\"more-link\">Continue reading “Project 06: Abstract Clock”<\/span><\/a><\/p>\n","protected":false},"author":651,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[106,57],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/67424"}],"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\/651"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=67424"}],"version-history":[{"count":5,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/67424\/revisions"}],"predecessor-version":[{"id":67440,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/67424\/revisions\/67440"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=67424"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=67424"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=67424"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}