{"id":67239,"date":"2021-10-09T21:29:39","date_gmt":"2021-10-10T01:29:39","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=67239"},"modified":"2021-10-09T21:29:39","modified_gmt":"2021-10-10T01:29:39","slug":"project-6-abstract-clock-2","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/10\/09\/project-6-abstract-clock-2\/","title":{"rendered":"Project 6: Abstract Clock"},"content":{"rendered":"\n

sketch<\/a><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">var x = [0];\nvar y = [0];\nvar w = 25;\nvar rc;\nvar gc;\nvar bc;\nvar r = [];\nvar g = [];\nvar b = [];\nvar theta = [0];\nvar dtheta = [];\nvar rad = [50];\nvar mo;\nvar d;\nvar h;\nvar mi;\nvar s;\n\n\nfunction setup() {\n createCanvas(480, 480);\n translate(240, 240);\n rotate(radians(270)); \/\/ midnight pointing upwards\n strokeWeight();\n var mo = month(); \/\/ establishing times as variables\n var h = hour();\n var mi = minute();\n var s = second();\n if (mo == 1) { \/\/ converting days to be out of 365\n d = day();\n } else if (mo == 2) {\n d = 31 + day();\n } else if (mo == 3) {\n d = 59 + day();\n } else if (mo == 4) {\n d = 90 + day();\n } else if (mo == 5) {\n d = 120 + day();\n } else if (mo == 6) {\n d = 151 + day();\n } else if (mo == 7) {\n d = 181 + day();\n } else if (mo == 8) {\n d = 212 + day();\n } else if (mo == 9) {\n d = 243 + day();\n } else if (mo == 10) {\n d = 273 + day();\n } else if (mo == 11) {\n d = 304 + day();\n } else if (mo == 12) {\n d = 334 + day();\n }\n if (h < 12) { \/\/ tying hour to red fill\n rc = map(h, 0, 11, 0, 255);\n } else {\n rc = map(h, 23, 12, 0, 255);\n }\n if (mi < 29) { \/\/ tying minutes to green fill\n gc = map(mi, 0, 29, 0, 255); \n } else {\n gc = map(mi, 59, 30, 0, 255);\n } if (s < 29) { \/\/ tying seconds to blue fill\n bc = map(s, 0, 29, 0, 255);\n } else {\n bc = map(s, 59, 30, 0, 255);\n }\n fill(rc, gc, bc);\n circle(0, 0, 480); \/\/ clock face\n for(j = 0; j < 4; j += 1) { \n if (j == 0) { \/\/ setting colors of markers inverse\n r[j] = 90;\n g[j] = 75;\n b[j] = map(bc, 255, 0, 0, 255);\n } else if (j == 1) {\n r[j] = 50;\n g[j] = map(gc, 255, 0, 0, 255);\n b[j] = 0;\n } else if (j == 2) {\n r[j] = map(rc, 255, 0, 0, 255);\n g[j] = 50;\n b[j] = 50;\n } else if (j == 3) {\n if (d < 182) {\n r[j] = map(d, 0, 364, 0, 255);\n g[j] = map(d, 0, 364, 0, 255);\n b[j] = map(d, 0, 364, 0, 255);\n } else {\n r[j] = map(d, 364, 0, 0, 255);\n g[j] = map(d, 364, 0, 0, 255);\n b[j] = map(d, 364, 0, 0, 255);\n }\n }\n r.push(r[j]);\n g.push(g[j]);\n b.push(b[j]);\n fill(r[j], g[j], b[j]);\n specialcircle(rad[j], y[j], w);\n rad.push(rad[j] + 50);\n x.push(0);\n y.push(0);\n theta.push(0);\n }\n}\n\nfunction draw() {\n strokeWeight(0);\n translate(240, 240);\n rotate(radians(270)); \/\/ midnight pointing upwards\n var mo = month(); \/\/ establishing times as variables\n var h = hour();\n var mi = minute();\n var s = second();\n if (h < 12) { \/\/ tying hour to red fill\n rc = map(h, 0, 11, 0, 255);\n } else {\n rc = map(h, 23, 12, 0, 255);\n }\n if (mi < 29) { \/\/ tying minutes to green fill\n gc = map(mi, 0, 29, 0, 255); \n } else {\n gc = map(mi, 59, 30, 0, 255);\n } if (s < 29) { \/\/ tying seconds to blue fill\n bc = map(s, 0, 29, 0, 255);\n } else {\n bc = map(s, 59, 30, 0, 255);\n }\n r[0] = 90; \/\/ marker fill inverse of clock face\n g[0] = 75;\n b[0] = map(bc, 255, 0, 0, 255);\n r[1] = 50;\n g[1] = map(gc, 255, 0, 0, 255);\n b[1] = 0;\n r[2] = map(rc, 255, 0, 0, 255);\n g[2] = 50;\n b[2] = 50;\n if (d < 182) {\n r[3] = map(d, 0, 364, 0, 255);\n g[3] = map(d, 0, 364, 0, 255);\n b[3] = map(d, 0, 364, 0, 255);\n } else {\n r[3] = map(d, 364, 0, 0, 255);\n g[3] = map(d, 364, 0, 0, 255);\n b[3] = map(d, 364, 0, 0, 255);\n }\n fill(rc, gc, bc);\n circle(0, 0, 480); \/\/ clock face\n for(j = 0; j < 4; j += 1) { \/\/ movement with time\n theta[0] = map(s, 0, 59, 0, 355);\n theta[1] = map(mi, 0, 59, 0, 355);\n theta[2] = map(h, 0, 23, 0, 355);\n theta[3] = map(d, 0, 364, 0, 355);\n x[j] = rad[j] * cos(radians(theta[j]));\n y[j] = rad[j] * sin(radians(theta[j]));\n fill(r[j], g[j], b[j]);\n specialcircle(x[j], y[j], w);\n }\n}\n\nfunction specialcircle(x, y, w) {\n ellipse(x, y, w, w);\n}\n<\/code><\/pre><\/p>\n\n\n\n<p>I wanted to create a clock that was both readable and abstract. The seconds marker corresponds to blue, the minutes to green, the hours to red, and the days of the year to grayscale. The clock face fill is a combination of all of these colors, but the inverse of the marker colors. <\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>sketch var x = [0]; var y = [0]; var w = 25; var rc; var gc; var bc; var r = []; var g = []; var b = []; var theta = [0]; var dtheta = []; var rad = [50]; var mo; var d; var h; var mi; var s; function setup() … <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/10\/09\/project-6-abstract-clock-2\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> “Project 6: Abstract Clock”<\/span><\/a><\/p>\n","protected":false},"author":681,"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\/f2021\/wp-json\/wp\/v2\/posts\/67239"}],"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\/681"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=67239"}],"version-history":[{"count":2,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/67239\/revisions"}],"predecessor-version":[{"id":67244,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/67239\/revisions\/67244"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=67239"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=67239"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=67239"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}