{"id":73889,"date":"2022-10-08T15:35:51","date_gmt":"2022-10-08T19:35:51","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/?p=73889"},"modified":"2022-10-08T15:47:04","modified_gmt":"2022-10-08T19:47:04","slug":"project-6-abstract-clock","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/10\/08\/project-6-abstract-clock\/","title":{"rendered":"Project 6 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>I sort of messed around with the changing of these blocks for a while. I had them as notches for a second but I liked how at midnight it&rsquo;ll turn to a black screen and slowly become red green and blue again. I also liked the layering effect of seconds in front of minutes in front of hours. It would be interesting to try to make it into more of a shifting gradient of red green and blue. <\/p>\n\n\n\n<div class=\"wp-block-file\"><a class=\"p5_sketch_link\" data-width=\"300\" data-height=\"240\" id=\"wp-block-file--media-bde03c43-7498-48a6-9f43-536d62c8ce99\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/10\/sketch-66.js\">sketch<\/a><a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/10\/sketch-66.js\" class=\"wp-block-file__button\" download aria-describedby=\"wp-block-file--media-bde03c43-7498-48a6-9f43-536d62c8ce99\">Download<\/a><iframe src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/plugins\/p5-embedder\/p5_iframe.html\" class=\"p5_exampleFrame\" width=\"300\" height=\"240\"><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/felix cooper fcooper D\nvar secs = {x:200, y:240, w:100, r:0};\nvar mins = {x:100, y:240, w:100, g:0};\nvar hours = {x:0, y:240, w:100, b:0}; \/\/initializes each time box as an object\n\nfunction setup() {\n    createCanvas(300, 240);\n}\n\nfunction draw() {\n    let s=second(); \/\/sets a variable connected to each set of time\n    let m=minute();\n    let h=hour();\n\n    background(255);\n\n    fill(0,0,hours.b);\n    noStroke();\n    rect(hours.x,hours.y-4,300,240); \/\/draws rectangle across canvas\n    hours.y=map(hour() + norm(minute(), 0, 60),0,24,0,240); \/\/mapps y value to hours\n    hours.b=map(hour() + norm(minute(), 0, 60),0,24,0,255);\/\/same for b value, the norm function makes it move in minute incriments\n    if(h == 0){\n        hours.y=240; \/\/resets at midnight\n    }\n\n    fill(0,mins.g,0);\n    noStroke();\n    rect(mins.x,mins.y-4,300,240); \/\/does the same stuff just for minutes \n    mins.y=map(minute() + norm(second(), 0, 60),0,60,0,240);\n    mins.g=map(minute() + norm(second(), 0, 60),0,60,0,255);\n    if(m == 0){\n        mins.y=240;\n    }\n\n    fill(secs.r,0,0);\n    noStroke(); \/\/does the same stuff just for seconds \n    rect(secs.x,secs.y-4,300,240);\n    secs.y=map(second(),0,60,0,240);\n    secs.r=map(second(),0,60,0,255);\n    if(s == 0){\n        secs.y=240;\n    }\n\n}\n<\/code><\/pre><\/div><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>I sort of messed around with the changing of these blocks for a while. I had them as notches for a second but I liked how at midnight it&rsquo;ll turn to a black screen and slowly become red green and blue again. I also liked the layering effect of seconds in front of minutes in &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/10\/08\/project-6-abstract-clock\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project 6 abstract clock&#8221;<\/span><\/a><\/p>\n","protected":false},"author":713,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[106,58],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/73889"}],"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\/713"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=73889"}],"version-history":[{"count":4,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/73889\/revisions"}],"predecessor-version":[{"id":73897,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/73889\/revisions\/73897"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=73889"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=73889"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=73889"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}