{"id":67296,"date":"2021-10-09T23:05:27","date_gmt":"2021-10-10T03:05:27","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=67296"},"modified":"2021-10-09T23:15:36","modified_gmt":"2021-10-10T03:15:36","slug":"project-6-abstract-clock-3","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/10\/09\/project-6-abstract-clock-3\/","title":{"rendered":"Project 6: Abstract Clock"},"content":{"rendered":"\n

For my clock, I decided against breaking the idea of what a clock was. I wanted to keep the traditional conventions of what a clock is–12 hour face, hour\/minute\/second positions, etc., for readability and functionality purposes. I did, however, was to create something more abstract and engaging that might take a little time of discovery to immediately interpret the system.<\/p>\n\n\n\n

<\/p>sketch<\/a>\n\n\n\n

<\/p><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/ John Henley; jhenley; 15-104 section D\n\nvar secondAngle; \/\/ initializes arrays\/variables\nvar secondX = [];\nvar secondY = [];\nvar minuteAngle;\nvar minuteX = [];\nvar minuteY = [];\nvar hourAngle;\nvar hourX = [];\nvar hourY = [];\n\nfunction setup() {\n createCanvas(480, 480);\n}\n\nfunction draw() {\n background(255);\n var center_x = width \/ 2;\n var center_y = height \/ 2;\n noFill();\n stroke(255, 0, 0); \/\/ sets color settings\n strokeWeight(2);\n push();\n translate(center_x, center_y);\n \n \n secondAngle = map(second(), 0, 59, 0, 360) - 90; \/\/ maps second 0 - 60 onto 360 degree scale\n for (i = 0; i < 10; i++) { \/\/ generates radian position for second, plus larger triangles\n secondX[i] = i*100*cos(radians(secondAngle));\n secondY[i] = i*100*sin(radians(secondAngle));\n }\n\n minuteAngle = map(minute(), 0, 59, 0, 360) -90; \/\/ maps minute 0 - 60 onto 360 degree scale\n for (i = 0; i < 10; i++) { \/\/ maps radian position for minute, plus larger triangles\n minuteX[i] = i*75*cos(radians(minuteAngle));\n minuteY[i] = i*75*sin(radians(minuteAngle));\n }\n\n currentHour = hour(); \/\/ adjusts 24 hour clock to 12 hour\n if (currentHour > 12) {\n currentHour = currentHour-12;\n }\n hourAngle = map(currentHour, 0, 12, 0, 360) - 90; \/\/ maps hour 0 - 12 onto 360 degree scale\n for (i = 0; i < 10; i++) { \/\/ maps radian position for hour, plus larger triangles\n hourX[i] = i*50*cos(radians(hourAngle));\n hourY[i] = i*50*sin(radians(hourAngle));\n }\n\n for (i = 0; i < 10; i++) { \/\/ draws triangles connected three points from each i array\n triangle(secondX[i], secondY[i], minuteX[i], minuteY[i], hourX[i], hourY[i]);\n color(255, 0, 0)\n }\n\n pop();\n}<\/code><\/pre><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>For my clock, I decided against breaking the idea of what a clock was. I wanted to keep the traditional conventions of what a clock is–12 hour face, hour\/minute\/second positions, etc., for readability and functionality purposes. I did, however, was to create something more abstract and engaging that might take a little time of discovery … <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/10\/09\/project-6-abstract-clock-3\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> “Project 6: Abstract Clock”<\/span><\/a><\/p>\n","protected":false},"author":650,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[106],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/67296"}],"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\/650"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=67296"}],"version-history":[{"count":3,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/67296\/revisions"}],"predecessor-version":[{"id":67303,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/67296\/revisions\/67303"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=67296"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=67296"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=67296"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}