{"id":67217,"date":"2021-10-09T20:04:59","date_gmt":"2021-10-10T00:04:59","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=67217"},"modified":"2021-10-09T20:04:59","modified_gmt":"2021-10-10T00:04:59","slug":"clock-project","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/10\/09\/clock-project\/","title":{"rendered":"Clock Project"},"content":{"rendered":"<!DOCTYPE html PUBLIC \"-\/\/W3C\/\/DTD HTML 4.0 Transitional\/\/EN\" \"http:\/\/www.w3.org\/TR\/REC-html40\/loose.dtd\">\n<html><body><div class=\"wp-block-file\"><a class=\"p5_sketch_link\" data-width=\"480\" data-height=\"480\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/sketch-40.js\">sketch<\/a><iframe src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/plugins\/p5-embedder\/p5_iframe.html\" class=\"p5_exampleFrame\" width=\"480\" height=\"480\"><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">var fall;\nvar spring;\nvar winter;\nvar summer;\n\nfunction setup() {\n    createCanvas(480, 480);\n    angleMode(DEGREES);\n    textAlign(CENTER);\n    rectMode(CENTER);\n    fall = {r1:108, g1:12, b1:12, \n            r2:75, g2:28, b2:0, \n            r3:189, g3:81, b3:19};\n    winter = {r1:253, g1:249, b1:231, \n            r2:202, g2:213, b2:255, \n            r3:21, g3:54, b3:186};\n    spring = {r1:177, g1:244, b1:249, \n            r2:253, g2:217, b2:73, \n            r3:255, g3:204, b3:255};\n    summer = {r1:123, g1:227, b1:243, \n            r2:255, g2:145, b2:145, \n            r3:250, g3:244, b3:228};\n}\n\nfunction draw() {\n    background(220);\n    translate(240, 240);\n    date();\n    rotate(-90);\n\n    let hr = hour();\n    let mn = minute();\n    let sc = second();\n\n    strokeWeight(30);\n    noFill();\n\n    if (m==3 || m==4 || m==5) {\n        secondscircle(sc, spring);\n        minutescircle(mn, spring);\n        hourscircle(hr, spring);\n    }\n    else if (m==6 || m==7 || m==8) {\n        secondscircle(sc, summer);\n        minutescircle(mn, summer);\n        hourscircle(hr, summer);\n    }\n    else if (m==9 || m==10 || m==11) {\n        secondscircle(sc, fall);\n        minutescircle(mn, fall);\n        hourscircle(hr, fall);\n    }\n    else {\n        secondscircle(sc, winter);\n        minutescircle(mn, winter);\n        hourscircle(hr, winter);\n    }\n\n}\nfunction date() {\n    stroke(0);\n    strokeWeight(9);\n    fill(255);\n    rect(0,0, width\/2,height\/3,20);\n    m = month();\n    d = day();\n    y = year();\n    textSize(50);\n    fill(0);\n    strokeWeight(1);\n    stroke(0);\n    textFont('Orbitron')\n    text(m + '.' + d + '.' + y, 0,15);\n\n}\n\nfunction secondscircle(sc, coloring) {\n    stroke(coloring.r1,coloring.g1,coloring.b1);\n    let secondsAngle = map(sc, 0, 60, 0, 360);\n    arc(0, 0, 450, 450, 0, secondsAngle);\n}\n\nfunction minutescircle(mn, coloring) {\n    stroke(coloring.r2,coloring.g2,coloring.b2);\n    let minutesAngle = map(mn, 0, 60, 0, 360);\n    arc(0, 0, 385, 385, 0, minutesAngle);\n}\n\nfunction hourscircle(hr, coloring) {\n    stroke(coloring.r3,coloring.g3,coloring.b3);\n    let hoursAngle = map(hr % 24, 0, 24, 0, 360);\n    arc(0, 0, 320, 320, 0, hoursAngle);\n}<\/code><\/pre><\/div>\n\n\n\n<p>Some challenges I faced were trying to use objects as a system of carrying the different color schemes for the different seasons in the year. Once I got the hang of using objects, I realized how useful and helpful they can be. <\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>sketch var fall; var spring; var winter; var summer; function setup() { createCanvas(480, 480); angleMode(DEGREES); textAlign(CENTER); rectMode(CENTER); fall = {r1:108, g1:12, b1:12, r2:75, g2:28, b2:0, r3:189, g3:81, b3:19}; winter = {r1:253, g1:249, b1:231, r2:202, g2:213, b2:255, r3:21, g3:54, b3:186}; spring = {r1:177, g1:244, b1:249, r2:253, g2:217, b2:73, r3:255, g3:204, b3:255}; summer = {r1:123, g1:227, b1:243, &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/10\/09\/clock-project\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Clock Project&#8221;<\/span><\/a><\/p>\n","protected":false},"author":679,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[106,55,1],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/67217"}],"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\/679"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=67217"}],"version-history":[{"count":2,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/67217\/revisions"}],"predecessor-version":[{"id":67220,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/67217\/revisions\/67220"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=67217"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=67217"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=67217"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}