{"id":67174,"date":"2021-10-08T16:26:49","date_gmt":"2021-10-08T20:26:49","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=67174"},"modified":"2021-10-08T16:45:27","modified_gmt":"2021-10-08T20:45:27","slug":"abstract-clock","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/10\/08\/abstract-clock\/","title":{"rendered":"Abstract Clock"},"content":{"rendered":"<!DOCTYPE html PUBLIC \"-\/\/W3C\/\/DTD HTML 4.0 Transitional\/\/EN\" \"http:\/\/www.w3.org\/TR\/REC-html40\/loose.dtd\">\n<html><body><p>You can tell the time and date with this abstract clock. From inside out each hexagon tells seconds, minutes, hours, days, months, respectively. The red line indicates the start of a category. An interesting thing about using hexagons is that it is easy to use to approximate what time it is since it has 6 sides, and units of time are easily divided by 6.<\/p>\n\n\n\n<div><a class=\"p5_sketch_link\" data-width=\"480\" data-height=\"480\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/project-06-clock.js\">project-06-clock<\/a><iframe src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/plugins\/p5-embedder\/p5_iframe.html\" class=\"p5_exampleFrame\" width=\"480\" height=\"480\"><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/Luke Mattson\n\/\/section A\nvar today = new Date();\nvar now = [today.getSeconds(), today.getMinutes()+(today.getSeconds()\/60), today.getHours()+(today.getMinutes()\/60),today.getDate()+(today.getHours()\/24),today.getMonth()+(today.getDate()\/30)] \nvar highest = [60, 60, 24, 30, 12] \nvar angle = []\nvar rate = [360\/60, 360\/60\/60, 360\/60\/60\/24, 360\/60\/60\/24\/30,360\/60\/60\/24\/30\/12]\nvar size = [47,94,141,188,235]\n\nfunction setup(){\n    frameRate(1)\n\tcreateCanvas(480, 480);\n    angleMode(DEGREES)\n\n    for (i=0; i&lt;=6; i++) {          \n        angle[i] = (now[i]\/highest[i])*360\n    }\n    \n}\n\n\nfunction draw(){\n    background(255,179,71)\n    fill(255,0,0)\n    rect(240,239,240,2)\n    translate(240,240)\n    for (i=0; i&lt;=4; i++) {\n        push()\n        rotate(angle[i])\n        angle[i] += rate[i]\n        hexagon(size[i])\n        pop()\n    }\n    print(rate)\n}\n\nfunction hexagon(s){\n    noFill()\n    beginShape()\n    vertex(s,0)\n    vertex(s\/2,s*sqrt(3)\/2)\n    vertex(-s\/2,s*sqrt(3)\/2)\n    vertex(-s,0)\n    vertex(-s\/2,-s*sqrt(3)\/2)\n    vertex(s\/2,-s*sqrt(3)\/2)\n    endShape(CLOSE)\n    fill(130,200,200)\n    ellipse(s,0,s\/5)\n}\n<\/code><\/pre><\/div><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>You can tell the time and date with this abstract clock. From inside out each hexagon tells seconds, minutes, hours, days, months, respectively. The red line indicates the start of a category. An interesting thing about using hexagons is that it is easy to use to approximate what time it is since it has 6 &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/10\/08\/abstract-clock\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Abstract Clock&#8221;<\/span><\/a><\/p>\n","protected":false},"author":659,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[106,55],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/67174"}],"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\/659"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=67174"}],"version-history":[{"count":4,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/67174\/revisions"}],"predecessor-version":[{"id":67184,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/67174\/revisions\/67184"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=67174"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=67174"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=67174"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}