Big circles with no fills and rotation angles of small circles represent seconds<\/strong>.
-The top of the canvas displays the first 30 seconds,
-and the bottom displays the second 30 seconds.<\/p>\n\n\n\n

The size of the small rotating circles represents minutes<\/strong>.
-The size of the main circle corresponds to the minutes.
-The greater the current minutes, the greater the size of the circles.<\/p>\n\n\n\n

The fill color of the upper biggest circle represents hours<\/strong>.
-Each different hour represents a different fill color.<\/p>\n\n\n\n

The stroke colors of the upper big circles represent day and night<\/strong>.
-During the day, the strokes are in the color of light yellow.
-During the night, the strokes are in the color blue.<\/p>\n\n\n\n

sketch<\/a><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/Xinyi Du \n\/\/15104 Section B\n\/\/xinyidu@andrew.cmu.edu\n\/\/Project-05\n\n\/*\nBig circles with no fills and rotation angles of small circles represent seconds. \nTop of the canvas displays the first 30 seconds, \nand the bottom displays the second 30 seconds.\n\nThe size of the small rotating circles represent minutes.\nThe size of the main cirle correspond to the minutes. \nThe greater the current minutes, the greater the size of the circles. \n\nThe filled color of the upper biggest circle represent hours.\nEach different hour represent a different filled color.\n\nThe strokes of the upper big circles represent day and night.\nDuring the day, the strokes are in color of light yellow.\nDuring the night, the strokes are in color if blue.\n*\/\n\nfunction setup() {\n createCanvas(480, 450);\n frameRate(15);\n}\n\nfunction draw() {\n background(50);\n \/\/set hour, minute, and second\n var hourN = hour();\n var minuteN = minute();\n var secondN = second();\n\n \/\/To present seconds & hours:\n \/\/draw the number of circles with no fill according to the seconds\n for (var s = 0; s<secondN; s++) {\n \/\/if seconds less than 30, draw the circles on the top half of the canvas\n if (s < 30) { \n \/\/if during the day, stroke color light yellow\n if (hourN <= 18 & hourN >= 6) {\n var r = 255;\n var g = 243;\n var b = 178;\n stroke(r, g, b);\n \/\/if during the night, stroke color blue\n } else {\n var r = 80;\n var g = 131;\n var b = 220;\n stroke(r, g, b);\n }\n \/\/fill color represent hour\n Hcolor(hourN);\n \/\/each circle with different diameter represent one second\n circle(width\/2, -60, 650-(s*15));\n } \n \/\/if seconds more than 30, draw the circles on the bottom half of the canvas\n if (s >= 30) {\n \/\/stroke color for the bottom half circles: gradually darkening white\n stroke(255-(s-30)*6);\n noFill();\n \/\/each circle with different diameter represent one second\n circle(width\/2, height+60, 650-((s-30)*15));\n } \n }\n\n \n \/\/To present seconds & minutes:\n for (var s = 0; s<secondN; s++) {\n stroke(255);\n \/\/if seconds less than 30, rotate along the outermost stroke of the top half circles\n if (s < 30) {\n push();\n \/\/tranlate the origin\n translate(width\/2, -60);\n \/\/polar coordinates\n var angle = 47+(secondN\/60)*180;\n var x = (650\/2) * cos(radians(angle));\n var y = (650\/2) * sin(radians(angle));\n \/\/ fill the main circle that represent minutes with day color\n fill(r, g, b);\n stroke(r, g, b);\n \/\/drew the smaller circles that rotate along the strokes of different circles\n \/\/the size of the main cirle correspond to the minutes\n circle(x, y, minuteN);\n fill(100);\n \/\/other smaller circles\n var x1 = (650\/2-30) * cos(radians(angle-40));\n var y1 = (650\/2-30) * sin(radians(angle-40));\n circle(x1, y1, minuteN-minuteN\/3);\n var x2 = (650\/2-60) * cos(radians(angle-20));\n var y2 = (650\/2-60) * sin(radians(angle-20));\n circle(x2, y2, minuteN-minuteN\/(2\/3));\n var x3 = (650\/2-90) * cos(radians(angle-70));\n var y3 = (650\/2-90) * sin(radians(angle-70));\n circle(x3, y3, minuteN-minuteN\/2);\n var x4 = (650\/2-120) * cos(radians(angle-50));\n var y4 = (650\/2-120) * sin(radians(angle-50));\n circle(x4, y4, minuteN-minuteN\/1.5);\n pop();\n }\n \/\/if seconds more than 30, rotate along the outermost stroke of the bottom half circles\n if (s >= 30) {\n push();\n \/\/tranlate the origin\n translate(width\/2, height+60);\n \/\/polar coordinates\n var angle = 180+47+((secondN-30)\/60)*180;\n var x = (650\/2) * cos(radians(angle));\n var y = (650\/2) * sin(radians(angle));\n \/\/ fill the main circle that represent minutes with day color\n fill(r, g, b);\n stroke(255);\n \/\/drew the smaller circles that rotate along the strokes of different circles\n \/\/the size of the main cirle correspond to the minutes\n circle(x, y, minuteN);\n fill(100);\n \/\/other smaller circles\n var x1 = (650\/2-30) * cos(radians(angle-40));\n var y1 = (650\/2-30) * sin(radians(angle-40));\n circle(x1, y1, minuteN-minuteN\/3);\n var x2 = (650\/2-60) * cos(radians(angle-20));\n var y2 = (650\/2-60) * sin(radians(angle-20));\n circle(x2, y2, minuteN-minuteN\/(2\/3));\n var x3 = (650\/2-90) * cos(radians(angle-70));\n var y3 = (650\/2-90) * sin(radians(angle-70));\n circle(x3, y3, minuteN-minuteN\/2);\n var x4 = (650\/2-120) * cos(radians(angle-50));\n var y4 = (650\/2-120) * sin(radians(angle-50));\n circle(x4, y4, minuteN-minuteN\/1.5);\n pop();\n }\n\n }\n\n \/\/legend showing the color that respond to each hour\n for (i=0; i<24; i=i+1) {\n Hcolor(i)\n noStroke();\n circle(width-20, 12+i*18.5, 12, 12); \n }\n for (i=23; i>=0; i=i-1) {\n Hcolor(i)\n noStroke();\n circle(20, height-12-i*18.5, 12, 12); \n }\n}\n\n\/\/To present hours:\n\/\/Fill each different hour with a different color:\nfunction Hcolor(h) {\n if (h == 0) {\n fill(6, 24, 51);\n } else if (h == 1) {\n fill(10, 33, 62);\n } else if (h == 2) {\n fill(19, 54, 103);\n } else if (h == 3) {\n fill(22, 59, 98);\n } else if (h == 4) {\n fill(24, 64, 106);\n } else if (h == 5) {\n fill(28, 69, 101);\n } else if (h == 6) {\n fill(36, 83, 118);\n } else if (h == 7) {\n fill(57, 125, 155);\n } else if (h == 8) {\n fill(116, 186, 191);\n } else if (h == 9) {\n fill(190, 223, 198);\n } else if (h == 10) {\n fill(218, 223, 148);\n } else if (h == 11) {\n fill(240, 212, 124);\n } else if (h == 12) {\n fill(245, 194, 121);\n } else if (h == 13) {\n fill(242, 182, 107);\n } else if (h == 14) {\n fill(240, 167, 103);\n } else if (h == 15) {\n fill(229, 147, 89);\n } else if (h == 16) {\n fill(226, 124, 124);\n } else if (h == 17) {\n fill(199, 109, 136);\n } else if (h == 18) {\n fill(124, 68, 130);\n } else if (h == 19) {\n fill(72, 41, 121);\n } else if (h == 20) {\n fill(44, 28, 107);\n } else if (h == 21) {\n fill(33, 39, 97);\n } else if (h == 22) {\n fill(16, 24, 75);\n } else if (h == 23) {\n fill(6, 14, 60);\n } \n}\n\n\n\n\n\n\n<\/code><\/pre><\/div><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>Big circles with no fills and rotation angles of small circles represent seconds.-The top of the canvas displays the first 30 seconds,-and the bottom displays the second 30 seconds. The size of the small rotating circles represents minutes.-The size of the main circle corresponds to the minutes.-The greater the current minutes, the greater the size … <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/10\/08\/project-06-abstract-clock-9\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> “Project 06 \u2013 Abstract Clock”<\/span><\/a><\/p>\n","protected":false},"author":716,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[106,56],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/74082"}],"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\/716"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=74082"}],"version-history":[{"count":3,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/74082\/revisions"}],"predecessor-version":[{"id":74086,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/74082\/revisions\/74086"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=74082"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=74082"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=74082"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}