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

My Project<\/a><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/cbtruong;\n\/\/Section B;\n\nvar secondVal;\nvar minuteVal;\nvar hourVal;\nvar monthVal;\n\nvar sixtyCircleX = [];\nvar sixtyCircleY = [];\nvar sixtyCircleX2 = [];\nvar sixtyCircleY2 = [];\nvar hourAngle = [];\n\n\nfunction setup() {\n createCanvas(480, 480);\n background(220);\n text(\"p5.js vers 0.9.0 test.\", 10, 15);\n secondVal = second();\n minuteVal = minute();\n hourVal = hour();\n monthVal = month();\n for (var i = 0; i < 8; i++){\n hourAngle.push(i*45);\n }\n for (var y = 10; y < 120; y += 20){\n for (var x = 10; x < 200; x += 20){\n sixtyCircleX.push(x);\n sixtyCircleY.push(y);\n }\n }\n for (var y2 = 370; y2 < 480; y2 += 20){\n for (var x2 = 290; x2 < 480; x2 += 20){\n sixtyCircleX2.push(x2);\n sixtyCircleY2.push(y2);\n }\n }\n}\n\nfunction draw() {\n background(205, 202, 240);\n timeOfDay(hourVal);\n for (var i = 0; i < 8; i++){\n noStroke();\n fill(230, 100, 120);\n if (i > hourVal % 8){\n fill(27, 30, 35);\n }\n hourSquare(hourAngle[i]);\n hourAngle[i] += 0.1;\n }\n for (var j = 0; j < 60; j++){\n fill(100, 230, 120);\n if (j > secondVal){\n fill(240);\n }\n sixtyCircleTime(sixtyCircleX[j], sixtyCircleY[j]);\n }\n for (var l = 0; l < 60; l++){\n fill(120, 120, 230);\n if (l > minuteVal){\n fill(240);\n }\n sixtyCircleTime(sixtyCircleX2[l], sixtyCircleY2[l]);\n }\n for (var m = 180; m <= 480; m += 25){\n fill(240);\n if (m >= monthVal*22.5){\n fill(45, 67, 89);\n }\n push();\n translate(-60, 20);\n rotate(radians(330));\n monthTri(20, m);\n monthTri(260, m);\n pop();\n }\n}\n\nfunction hourSquare(hourAngle){\n push();\n translate(230, 230);\n square(80*cos(radians(hourAngle)), 80*sin(radians(hourAngle)), 20);\n pop();\n}\n\nfunction timeOfDay(hourValue){\n if (hourVal > 15){\n fill(227, 111, 30);\n }\n else if (hourVal < 15 & hourVal > 7){\n fill(252, 209, 77);\n }\n else {\n fill(27, 30, 35);\n }\n circle(240, 240, 100);\n}\n\nfunction sixtyCircleTime(x, y){\n circle(x, y, 20);\n}\n\nfunction monthTri (x, y){\n triangle(x, y, x + 20, y, x + 10, y + 20);\n}\n<\/code><\/pre><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>I had grander ideas for an Abstract Clock, but I decided to do one that was practical. This one tells the months (the triangles that fill up according to the month), seconds and minutes (the circles arrays – the upper are seconds and the lower are minutes). And finally, the time of day (which I split into 3, Morning (7-15), Afternoon (15-23), and Night (23-7)) and the hours passed of each time. It is very basic.<\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>I had grander ideas for an Abstract Clock, but I decided to do one that was practical. This one tells the months (the triangles that fill up according to the month), seconds and minutes (the circles arrays – the upper are seconds and the lower are minutes). And finally, the time of day (which I … <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/10\/10\/project-06-abstract-clock-9\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> “Project-06: Abstract Clock”<\/span><\/a><\/p>\n","protected":false},"author":675,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[106,56],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/67415"}],"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\/675"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=67415"}],"version-history":[{"count":1,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/67415\/revisions"}],"predecessor-version":[{"id":67417,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/67415\/revisions\/67417"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=67415"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=67415"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=67415"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}