{"id":67367,"date":"2021-10-10T18:48:32","date_gmt":"2021-10-10T22:48:32","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=67367"},"modified":"2021-10-10T18:49:27","modified_gmt":"2021-10-10T22:49:27","slug":"project-06-abstract-clock-7","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/10\/10\/project-06-abstract-clock-7\/","title":{"rendered":"Project 06 \u2013 Abstract Clock"},"content":{"rendered":"\n

I remember learning about the Korean water clock that was invented in the Chosun dynasty in elementary school, which inspired me to create a simplified version of it through p5.js.<\/p>\n\n\n\n

\"엄마표 — reference image<\/figcaption><\/figure>
sketch<\/a><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">var angle = 180;\nfunction setup() {\n createCanvas(420, 400);\n \/\/ rectMode(CENTER);\n}\n\nfunction draw() {\n background(0);\n fill(255);\n textAlign(CENTER);\n textSize(30);\n text('The water clock', width\/2, 50);\n textSize(10);\n textAlign(LEFT);\n\n let hr = hour();\n let mn = minute();\n let sc = second();\n\n \n fill(255);\n text(hr + ':' + mn + ':' + sc, 10, 150);\n text('24:00:00', width-65, 150);\n rect(100, 140, 30, 5);\n rect(200, 140, 30, 10);\n \n \/\/hour\n push();\n fill(255);\n translate(350, 380);\n rotate(radians(180)); \/\/rotation to make the rectangle grow upwards\n rect(0, 0, 120, 240);\n fill(0, 0, 255);\n translate(5, 0);\n rect(0, 0, 110, hr*10);\n pop();\n\n \/\/minute\n push();\n fill(255); \/\/red rectangle\n translate(205, 260);\n rotate(radians(180)); \/\/rotation to make the rectangle grow upwards\n rect(0, 0, 80, 120);\n fill(0, 75, 255);\n translate(5, 0);\n rect(0, 0, 70, mn*2);\n if (mn==59) { \/\/when each the mn container is full, water is transferred to the hr contatiner\n translate(-30, 115);\n stroke(0, 100, 255);\n strokeWeight(5);\n line(-8, 0, 30, 0);\n stroke(0, 0, 255);\n line(-8, 0, -8, -115);\n }\n pop();\n\n \/\/second\n noStroke();\n push();\n fill(255); \n translate(100, 200);\n rotate(radians(angle)); \/\/rotation to make the rectangle grow upwards\n rect(0, 0, 40, 60);\n fill(0, 150, 255);\n translate(5, 0);\n rect(0, 0, 30, sc);\n if (sc==59) { \/\/when each the sc container is full, water is transferred to the mn contatiner\n translate(-30, 57.5);\n stroke(0, 150, 255);\n strokeWeight(3);\n line(-8, 0, 30, 0);\n stroke(0, 100, 255);\n line(-8, 0, -8, -115);\n }\n pop();\n}\n \n \n \n\n \n\n \n\n<\/code><\/pre><\/div><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>I remember learning about the Korean water clock that was invented in the Chosun dynasty in elementary school, which inspired me to create a simplified version of it through p5.js. sketch var angle = 180; function setup() { createCanvas(420, 400); \/\/ rectMode(CENTER); } function draw() { background(0); fill(255); textAlign(CENTER); textSize(30); text(‘The water clock’, width\/2, 50); … <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/10\/10\/project-06-abstract-clock-7\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> “Project 06 \u2013 Abstract Clock”<\/span><\/a><\/p>\n","protected":false},"author":682,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[106,57,1],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/67367"}],"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\/682"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=67367"}],"version-history":[{"count":2,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/67367\/revisions"}],"predecessor-version":[{"id":67370,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/67367\/revisions\/67370"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=67367"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=67367"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=67367"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}