{"id":67462,"date":"2021-10-10T22:58:03","date_gmt":"2021-10-11T02:58:03","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=67462"},"modified":"2021-10-10T23:45:24","modified_gmt":"2021-10-11T03:45:24","slug":"abstract-clock-3","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/10\/10\/abstract-clock-3\/","title":{"rendered":"Abstract Clock"},"content":{"rendered":"\n

sketch<\/a><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/ project 06\n\/\/ gnmarino@andrew.cmu.edu\n\/\/ Gia Marino\n\/\/ Section D\n\nvar theta = 0; \/\/ references theta in draw function only\nvar m; \/\/ current minute\nvar h; \/\/ current hour\n\nfunction setup() {\n createCanvas(480, 480);\n background(255);\n}\n\nfunction draw() {\n\n translate(width\/2, height\/2);\n\n \/\/ rotates whole clock \n\n rotate(radians(theta));\n\n \/\/ draws the whole clock\n\n NightAndDay(); \/\/ draws the night and day sides of the circle\n sun(0, height\/2 - 80);\n moon(0, -height\/2 + 80);\n clouds(width\/2 - 25, 0);\n diamonds(-width\/2 + 25, 0);\n \n \/\/ takes current time and calculates how much to rotate the clock\n \/\/ every minute the clock should turn .25 degrees \n \/\/ every hour the clock should have rotated 15 more degrees\n\n m = minute();\n h = hour();\n theta = (h * 15) + (m * .25);\n\n}\n\nfunction sun(sunX, sunY) {\n\n push();\n\n \/\/ orangey yellow color for sun\n\n fill(253, 208, 25);\n\n \/\/ moves sun to coordinates stated in draw function\n\n translate(sunX, sunY);\n\n circle(0, 0, 50); \/\/ middle of sun\n\n \/\/ strokeWeight and loop makes the sun rays\n\n strokeWeight(2);\n\n for (theta = 0; theta < 360; theta += 45) {\n rotate(radians(theta));\n line(30, 0, 37, 0);\n\n }\n\n pop();\n}\n\nfunction moon(moonX, moonY) {\n\n push();\n\n fill(220); \/\/ light grey\n\n \/\/ moves moon to coordinates stated in draw function\n\n translate(moonX, moonY);\n\n circle(0, 0, 50);\n\n pop();\n}\n\nfunction diamonds(diamondX, diamondY) {\n\n push();\n\n noFill();\n strokeWeight(5);\n\n \/\/ counter keeps track how many times the for-loop loops\n \/\/ needs to start at 12 so the diamonds don't fill in when it's before noon\n\n var counter = 12;\n\n \/\/ loop rotates and draws diamonds\n \n for (theta = 7; theta < 177; theta += 15) {\n\n push();\n\n rotate(radians(theta));\n\n \/\/ moves diamonds to coordinates stated in draw function\n\n translate(diamondX, diamondY)\n\n \/\/ scale & rotate are used to make diamonds look better along the border\n\n scale(.25);\n rotate(radians(90));\n\n \/\/ if statement says the diamonds should be filled in based on the hour\n \/\/ diamond fills in after every hour passes\n \/\/ if clock hasn't passed that hour yet then diamond stays unfilled\n \/\/ diamonds fill in for 1pm to 12 am\n\n if (counter < h) {\n fill(255);\n } else {\n noFill(); \n }\n\n \/\/ draws 1 diamond every time\n\n beginShape();\n vertex(-20, 0);\n quadraticVertex(-10, -5, 0, -30);\n quadraticVertex(10, -5, 20, 0);\n quadraticVertex(10, 5, 0, 30);\n quadraticVertex(-10, 5, -20, 0);\n endShape();\n\n pop();\n\n counter += 1; \/\/ adds 1 everytime loop ends\n\n }\n \n pop();\n}\n\n\nfunction clouds(cloudX, cloudY) {\n \n push();\n\n strokeWeight(5);\n noFill();\n\n \/\/ counter keeps track how many times the for-loop loops\n \/\/ counter starts at zero so clouds starts filling after 1st hour has passed\n\n var counter = 0;\n\n \/\/ loop rotates and draws clouds\n\n for (theta = 7; theta < 177; theta += 15) {\n\n push();\n\n rotate(radians(theta));\n\n \/\/ moves clouds to coordinates stated in draw function\n\n translate(cloudX, cloudY);\n\n \/\/ scale & rotate are used to make clouds look better along the border\n\n scale(.25);\n rotate(radians(90));\n\n \/\/ if statement says the clouds should be filled in based on the hour\n \/\/ cloud fills in after every hour passes\n \/\/ if clock hasn't passed that hour yet then cloud stays unfilled\n \/\/ clouds fill in for 1 am to 12 pm\n\n if (counter <= h) {\n fill(255);\n } else {\n noFill();\n }\n\n \/\/ draws 1 cloud every time\n\n beginShape();\n vertex(0, 0);\n quadraticVertex(-45, 5, -40, -10);\n quadraticVertex(-35, -30, -15, -20);\n quadraticVertex(-20, -40, 0, -40);\n quadraticVertex(20, -40, 15, -20);\n quadraticVertex(35, -30, 40, -10);\n quadraticVertex(45, 5, 0, 0);\n endShape();\n\n pop();\n\n counter += 1; \/\/ adds 1 everytime loop ends\n\n }\n pop();\n}\n \nfunction NightAndDay() {\n\n push();\n \n \/\/ yellow half circle represents day time\n \n fill(255, 238, 127); \/\/ yellow\n arc(0, 0, width, height, radians(0), radians(180));\n\n \/\/ navy half circle represents night time\n\n fill(60, 67, 129); \/\/ navy\n arc(0, 0, width, height, radians(180), radians(360));\n\n pop();\n\n}<\/code><\/pre><\/p>\n\n\n\nFor this assignment I actually got inspiration from the Minecraft clock because it is the first example I could think of for a non-western standard clock.<\/p>\n\n\n\nI started off by deciding that I wanted the daylight half circle to be fully on the top and vice versa with the night side.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"844\" height=\"1024\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/IMG_0180-844x1024.jpg\" alt=\"\" class=\"wp-image-67495\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/IMG_0180-844x1024.jpg 844w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/IMG_0180-247x300.jpg 247w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/IMG_0180-768x932.jpg 768w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/IMG_0180-1266x1536.jpg 1266w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/IMG_0180-1200x1456.jpg 1200w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/IMG_0180.jpg 1620w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\"><figcaption>My Sketch<\/figcaption><\/figure>I ended up deciding that I wanted the clock to emulate how the sky typically looks if you are at a reasonable latitude on earth. So, when it is noon and the sun is highest in the sky then I want the clock’s yellow side to be fully on top so it looks like  what you’d see if you’d looked outside at noon. It also kinda shows when the sun rises and sets too.<\/p>\n\n\n\nLastly, I decided that I wanted someone to be looking at my clock and know what time it is and not completely guess. So, I made little hour symbols (the clouds and diamonds) light up every time an hour passes. This makes it when you look at the clock you can count how many clouds or diamonds are white and know it’s been x amount of hours.<\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"sketch \/\/ project 06 \/\/ gnmarino@andrew.cmu.edu \/\/ Gia Marino \/\/ Section D var theta = 0; \/\/ references theta in draw function only var m; \/\/ current minute var h; \/\/ current hour function setup() { createCanvas(480, 480); background(255); } function draw() { translate(width\/2, height\/2); \/\/ rotates whole clock rotate(radians(theta)); \/\/ draws the whole clock … <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/10\/10\/abstract-clock-3\/\" class=\"more-link\">Continue reading “Abstract Clock”<\/span><\/a><\/p>\n","protected":false},"author":658,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[106,58],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/67462"}],"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\/658"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=67462"}],"version-history":[{"count":2,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/67462\/revisions"}],"predecessor-version":[{"id":67499,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/67462\/revisions\/67499"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=67462"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=67462"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=67462"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}