{"id":67232,"date":"2021-10-09T20:54:18","date_gmt":"2021-10-10T00:54:18","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=67232"},"modified":"2021-10-12T11:05:33","modified_gmt":"2021-10-12T15:05:33","slug":"project-06-abstract-clock-3","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/10\/09\/project-06-abstract-clock-3\/","title":{"rendered":"Project-06: 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><div class=\"wp-block-file\"><a class=\"p5_sketch_link\" data-width=\"450\" data-height=\"380\" data-fontsize=\"9\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/sketch-76.js\">sketch<\/a><a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/sketch-76.js\" class=\"wp-block-file__button\" download>Download<\/a><iframe src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/plugins\/p5-embedder\/p5_iframe.html\" class=\"p5_exampleFrame\" width=\"450\" height=\"380\"><\/iframe><pre class=\"language-javascript\" style=\"font-size:9px !important; line-height:13.05px !important\"><code class=\"p5_editor language-javascript\" style=\"font-size:9px !important;\">var x = [];\nvar y = [];\n\nfunction setup() {\n    createCanvas(450, 380);\n    var hr = hour();\n    var min = minute();\n    var sec = second();\n    \/\/set range for displaying sec location\n    for (i = 0; i &lt;= 60; i ++) { \n    \tx[i] = random(315, 345);\n    \ty[i] = random(255, 285);\n    }\n}\n\nfunction draw() {\n    background(7, 55, 99);\n    var hr = hour();\n    var min = minute();\n    var sec = second();\n    var mapHr = map(hr, 0, 20, 0, width);\n    var mapMin = map(min, 0, 50, 0, width);\n    var mapSec = map(sec, 0, 50, 0, width);\n\n    \/\/flowerpot\n    fill(76, 32, 1);\n    strokeWeight(8);\n    stroke(102, 42, 0);\n    ellipse(110, 110, 110, 110);\n\n    \/\/succulent leaf [represents hour]\n    if (hr &gt; 12) {\n    \thr = hr % 12;\n    }\n    noStroke();\n    fill(114, 196, 143);\n\tfor (var i = 0; i &lt; hr; i ++) {\n\t\tpush();\n\t\ttranslate(110, 110);\n\t\trotate(radians(i * 30));\n\t\tellipse(0, -30, 20, 50);\n\t\tpop();\n\t}\n\n\t\/\/flower\n\tfill(244, 204, 204);\n\tellipse(110, 97, 19, 19);\n\tellipse(95, 108, 19, 19);\n\tellipse(125, 108, 19, 19);\n\tellipse(101, 125, 19, 19);\n\tellipse(119, 125, 19, 19);\n\tellipse(110, 111, 21, 21);\n\tfill(255, 229, 153);\n\tellipse(110, 112, 13, 13);\n\n\t\/\/coffee plate\n    fill(220, 200, 186);\n    stroke(255, 248, 244);\n    strokeWeight(2);\n    ellipse(330, 270, 100, 100);\n\n    \/\/coffee handle [represents minute]\n    noStroke();\n    push();\n    translate(330, 270);\n    rotate(radians(min * 6));\n    fill(255, 248, 244);\n    rect(-6, -60, 12, 60, 4);\n    pop();\n\n    \/\/coffee cup\n    strokeWeight(3);\n    fill(220, 200, 186);\n    stroke(255, 248, 244);\n    ellipse(330, 270, 70, 70);\n\n    \/\/coffee \n    fill(78, 34, 0);\n    stroke(120, 52, 0);\n    strokeWeight(2);\n    ellipse(330, 270, 53, 53);\n\n    \/\/coffee bubble [represents second]\n    for (i = 0; i &lt; sec; i ++) {\n        fill(120, 52, 0);\n        ellipse(x[i], y[i], 2, 2);\n    }\n    \/\/keyboard\n    noStroke();\n    fill(188, 188, 188);\n    rect(280, 30, 300, 140, 7);\n    fill(238, 238, 238);\n    rect(280, 30, 300, 10, 1);\n\n    \/\/keyboard keys\n    fill(255, 255, 255);\n    stroke(145,145,145);\n    strokeWeight(1);\n    rect(288, 48, 19, 11, 2); \/\/first row keys\n    rect(310, 48, 19, 11, 2);\n    rect(332, 48, 19, 11, 2);\n    rect(354, 48, 19, 11, 2);\n    rect(376, 48, 19, 11, 2);\n    rect(398, 48, 19, 11, 2);\n    rect(420, 48, 19, 11, 2);\n    rect(442, 48, 19, 11, 2);\n\n    rect(288, 63, 19, 17, 2); \/\/second row keys\n    rect(310, 63, 19, 17, 2);\n    rect(332, 63, 19, 17, 2);\n    rect(354, 63, 19, 17, 2);\n    rect(376, 63, 19, 17, 2);\n    rect(398, 63, 19, 17, 2);\n    rect(420, 63, 19, 17, 2);\n    rect(442, 63, 19, 17, 2);\n\n    rect(288, 84, 30, 17, 2); \/\/third row keys\n    rect(321, 84, 19, 17, 2); \n    rect(343, 84, 19, 17, 2); \n    rect(365, 84, 19, 17, 2); \n    rect(387, 84, 19, 17, 2); \n    rect(409, 84, 19, 17, 2); \n    rect(431, 84, 19, 17, 2);     \n\n    rect(288, 105, 37, 17, 2); \/\/fourth row keys\n    rect(328, 105, 19, 17, 2); \n    rect(350, 105, 19, 17, 2); \n    rect(372, 105, 19, 17, 2); \n    rect(394, 105, 19, 17, 2); \n    rect(416, 105, 19, 17, 2); \n    rect(438, 105, 19, 17, 2); \n\n    rect(288, 126, 49, 17, 2); \/\/fifth row keys\n    rect(340, 126, 19, 17, 2); \n    rect(362, 126, 19, 17, 2); \n    rect(384, 126, 19, 17, 2); \n    rect(406, 126, 19, 17, 2); \n    rect(428, 126, 19, 17, 2); \n    rect(450, 126, 19, 17, 2); \n\n    rect(288, 147, 19, 17, 2); \/\/sixth row keys\n    rect(310, 147, 19, 17, 2); \n    rect(332, 147, 19, 17, 2); \n    rect(354, 147, 19, 17, 2); \n    rect(376, 147, 100, 17, 2); \n\n\n    \/\/iPad\n    fill(45, 45, 45);\n    stroke(255, 255, 255);\n    strokeWeight(10);\n    translate(90, 230);\n    rotate(PI \/ 5.0);\n    rect(0, 0, 130, 200, 3);\n    fill(0);\n    noStroke();\n    ellipse(65, 0, 3, 3);\n\n}\n\n\n\n\n\n\n\n\n\n\n\n\n\n<\/code><\/pre><\/div>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"1024\" height=\"655\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/IMG_6423-1024x655.jpg\" alt=\"\" class=\"wp-image-67261\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/IMG_6423-1024x655.jpg 1024w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/IMG_6423-300x192.jpg 300w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/IMG_6423-768x491.jpg 768w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/IMG_6423-1536x982.jpg 1536w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/IMG_6423-2048x1310.jpg 2048w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/IMG_6423-1200x768.jpg 1200w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\"><figcaption>Sketch of how I wanted to illustrate my desk setting<\/figcaption><\/figure><p>For this project, I wanted to create a 12-hour clock illustration using a top-view desk setting. To represent the numerical value of &lsquo;hour&rsquo;, I used the leaves of the flower. To represent the &lsquo;minute&rsquo;, I used the handle of the coffee cup to direct actual minute. Last but not least, I used the bubbles of coffee to represent &lsquo;second&rsquo;. In addition, I added details of my desk of an iPad along with my MacBook keyboard. It was super fun to depict my desk surrounding into this project.<\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>For this project, I wanted to create a 12-hour clock illustration using a top-view desk setting. To represent the numerical value of &lsquo;hour&rsquo;, I used the leaves of the flower. To represent the &lsquo;minute&rsquo;, I used the handle of the coffee cup to direct actual minute. Last but not least, I used the bubbles of &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/10\/09\/project-06-abstract-clock-3\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project-06: Abstract Clock&#8221;<\/span><\/a><\/p>\n","protected":false},"author":630,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[106,57],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/67232"}],"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\/630"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=67232"}],"version-history":[{"count":6,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/67232\/revisions"}],"predecessor-version":[{"id":69547,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/67232\/revisions\/69547"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=67232"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=67232"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=67232"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}