{"id":67481,"date":"2021-10-10T23:38:32","date_gmt":"2021-10-11T03:38:32","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=67481"},"modified":"2021-10-10T23:38:32","modified_gmt":"2021-10-11T03:38:32","slug":"project-06-abstract-clock-12","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/10\/10\/project-06-abstract-clock-12\/","title":{"rendered":"Project 06: 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><a class=\"p5_sketch_link\" data-width=\"370\" data-height=\"600\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/sketch-70.js\">sketch<\/a>\n\n\n\n<p>I found this project a little challenging, but I do like what I was able to make in the end! There were elements that I was really hoping to add, like an inverted color for the background and lines between the morning and afternoon, but my hours function was not working so I wasn&rsquo;t able to include that aspect. But I mainly wanted to create a clock that created a full picture with the end of a day. The circles on the right count the minutes and sections and the lines on the right create a grid that has lines added each hour.<\/p><iframe src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/plugins\/p5-embedder\/p5_iframe.html\" class=\"p5_exampleFrame\" width=\"370\" height=\"600\"><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/Jacky Lococo\n\/\/jlococo\n\/\/Section C\nfunction setup() {\n    createCanvas(370, 600);\n}\n\nfunction draw() {\n    background(0);\n    var sec = second() \/\/ variable ofr the seconds\n    var min = minute() \/\/ variable for minutes\n    var h = hour()\n    var strokeLine = 255 \/\/ varible for stroke (ended up not working)\n\n    \/\/white lines that divide seconds, minutes, hours\n    strokeWeight(1)\n    stroke(strokeLine)\n    line(330, 0, 330, 600)\n\n    strokeWeight(1)\n    stroke(strokeLine)\n    line(290, 0, 290, 600)\n\n    \/\/y value for the seconds cirlces\n    for (var y = 10; y &lt;= 10*(sec); y += 10) {\n        strokeWeight(0)\n        fill(255, 204, 204)\n        ellipse(350, y, 10, 10);\n    }\n    \/\/y value for the minutes since x is the same for each added cirlce\n    for(var ym = 10; ym &lt;= 10*(min); ym +=10){\n        strokeWeight(0)\n        fill(255, 102, 102)\n        ellipse(310, ym, 10, 10)\n    }\n\n    \/\/hour-horizontal and verticle lines will be drawn with each hour to create a grid\n    \/\/y value change for the hours - horizontal visualization\n    for(var yh = 25; yh &lt;= 25*(h); yh += 25){\n        strokeWeight(1)\n        stroke(strokeLine)\n        line(0, yh, 290, yh)\n    } \n    \/\/x valye for the change in hour - verticle depiction \n    for(var xh = 290\/24; xh &lt;= (290\/24)*(h); xh += 290\/24){\n        strokeWeight(1)\n        stroke(strokeLine)\n        line(xh, 0, xh, 600)\n    }\n\n    \/\/red cirlces that follow the hour lines\n    strokeWeight(0)\n    fill(255, 51, 51)\n    ellipse(275, yh - 25, 10, 10)\n\n    strokeWeight(0)\n    fill(255, 51, 51)\n    ellipse(xh-290\/24, 580, 10, 10)\n\n\n}\n\n\n<\/code><\/pre><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>sketch I found this project a little challenging, but I do like what I was able to make in the end! There were elements that I was really hoping to add, like an inverted color for the background and lines between the morning and afternoon, but my hours function was not working so I wasn&rsquo;t &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/10\/10\/project-06-abstract-clock-12\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project 06: Abstract Clock&#8221;<\/span><\/a><\/p>\n","protected":false},"author":655,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[106,57],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/67481"}],"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\/655"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=67481"}],"version-history":[{"count":1,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/67481\/revisions"}],"predecessor-version":[{"id":67483,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/67481\/revisions\/67483"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=67481"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=67481"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=67481"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}