{"id":67263,"date":"2021-10-09T22:19:16","date_gmt":"2021-10-10T02:19:16","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=67263"},"modified":"2021-10-09T22:20:05","modified_gmt":"2021-10-10T02:20:05","slug":"project-abstract-clock","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/10\/09\/project-abstract-clock\/","title":{"rendered":"Project 6: Abstract Clock"},"content":{"rendered":"\n

luca’s clock<\/a><\/a><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">function setup() {\n createCanvas(480, 480);\n noStroke();\n}\n\nfunction draw() {\n\n \/\/set variables as time\n var sc = second();\/\/second of clock\n var mt = minute();\/\/minute of clock\n var hr = hour();\/\/hour of clock\n var yh = hr*20;\/\/y position of hour ellipse\n\n \/\/color change\n\n background(0,0,0)\n\n if (yh >= 400 & yh < 420){\/\/20:00 - 21:00\n background(99,30,80);\n } else if (yh >= 420 & yh < 480){\/\/21:00-00:00\n background(57,25,84);\n } else if (yh >= 0 & yh < 80){\/\/00:00-04:00\n background(1,8,79);\n } else if (yh >= 80 & yh < 120){\/\/04:00-06:00\n background(0,173,255);\n } else if (yh >= 120 & yh < 160){\/\/06:00-08:00\n background(252,255,181);\n } else if (yh >= 160 & yh < 240){\/\/08:00-12:00\n background(255,255,112);\n } else if (yh >= 240 & yh < 300){\/\/12:00-15:00\n background(255,221,64);\n } else if (yh >= 300 & yh < 360){\/\/15:00-18:00\n background(255,121,84);\n } else if (yh >= 360 & yh < 400){\/\/18:00-20:00\n background(167,60,90);\n }\n \n\n fill(233, 236, 239);\n \/\/text(hr + ':' + mt + ':' + sc, 30, 300);\/\/clock for reference\n\n push();\n stroke(233, 236, 239);\n strokeWeight(5);\n line(50,0,50,sc*8);\n line(200,0,200,mt*8);\n line(400,0,400,yh);\n pop();\n\n \/\/clock hands\n ellipse(50,sc*8,60,60);\/\/second\n ellipse(200,mt*8,90,90);\/\/minute\n ellipse(400,yh,135,135);\/\/hour\n\n\n}\n<\/code><\/pre><\/p>\n\n\n\n<p>I enjoyed looking at the different approaches to keep time. I showed the passing of time through the movement of the circles and the changes in the background color. The left, middle, and right circles depict seconds, minutes, and hours, respectively. As the hour circle moves up and down, the background color also changes, reflecting the day’s time.<\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>luca’s clock function setup() { createCanvas(480, 480); noStroke(); } function draw() { \/\/set variables as time var sc = second();\/\/second of clock var mt = minute();\/\/minute of clock var hr = hour();\/\/hour of clock var yh = hr*20;\/\/y position of hour ellipse \/\/color change background(0,0,0) if (yh >= 400 & yh < 420){\/\/20:00 - 21:00 … <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/10\/09\/project-abstract-clock\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> “Project 6: Abstract Clock”<\/span><\/a><\/p>\n","protected":false},"author":642,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[106,58,1],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/67263"}],"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\/642"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=67263"}],"version-history":[{"count":3,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/67263\/revisions"}],"predecessor-version":[{"id":67268,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/67263\/revisions\/67268"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=67263"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=67263"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=67263"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}