{"id":67273,"date":"2021-10-09T22:44:18","date_gmt":"2021-10-10T02:44:18","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=67273"},"modified":"2021-10-10T22:40:56","modified_gmt":"2021-10-11T02:40:56","slug":"project-06-abstract-clock-5","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/10\/09\/project-06-abstract-clock-5\/","title":{"rendered":"Project 06 \u2013 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\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/sketch-66.js\" data-width=\"450\" data-height=\"300\">clock<\/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=\"300\"><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">var x = [];\nvar y = [];\nvar sec; \/\/ second\nvar minutes; \/\/ minute\nvar hr; \/\/ hour\n\n\/\/ every second, coffee fills up a little bit in a cup and coffee mug gets larger\n\/\/ every minute, coffee completely fills up a cup\n\/\/ every hour, the background color darkens\n\nfunction setup() {\n    createCanvas(450, 300);\n}\n\n\/\/ each cup of coffee represents one minute \n\nfunction draw() {\n    var hr = hour();\n    background(255-(hr*5), 255-(hr*5), 255-(hr*3)); \/\/ background color gets darker by the hour\n\n    minutes = minute();\n    sec = second();\n\n    for(var row = 0; row &lt; 6; row +=1 ) {\n        for(var col = 0; col &lt; 10; col += 1) {\n            fill(250, 247, 222); \/\/ cream color for mug\n            var current = row*10+col; \/\/ current mug\n            mug(40+(40*col), 43+(40*row), current); \/\/ draw the mug\n            }\n        }\n}\n\nfunction mug(x, y, cur) { \/\/ function to draw the mug\n    \/\/ body of the mug\n    var frac = 1;\n    if (cur &lt; minutes) {\n        fill(117, 72, 50); \/\/ brown\n    } else if (cur == minutes) {\n        frac = sec\/60;\n        fill(250+(117-250)*frac, 247+(72-247)*frac, 222+(50-222)*frac); \/\/ cream -&gt; brown\n    } else {\n        return;\n    }\n\n    push();\n\n    translate(x, y);\n    scale(frac); \/\/ every second, the mug gets bigger\n\n    ellipse(0, 0, 30, 7); \/\/ top of mug\n    beginShape();\n    curveVertex(-15, 0);\n    curveVertex(-15, 0);\n    curveVertex(-14, 10);\n    curveVertex(-10, 25);\n    curveVertex(-5, 28);\n    curveVertex(0, 28);\n    curveVertex(5, 28);\n    curveVertex(10, 25);\n    curveVertex(14, 10);\n    curveVertex(15, 0);\n    curveVertex(15, 0);\n    endShape();\n\n    \/\/ mug handle\n    noFill(); \n    strokeWeight(1.5);\n    beginShape();\n    curveVertex(12, 20);\n    curveVertex(12, 20);\n    curveVertex(18, 13);\n    curveVertex(15, 5);\n    curveVertex(14, 8);\n    curveVertex(14, 8);\n    endShape();\n    strokeWeight(1);\n\n    pop();\n}\n\n<\/code><\/pre><\/div>\n\n\n<p>The idea behind this project stemmed from my love for coffee. My time is basically measured by cups of coffee, which inspired me to create a canvas full of coffee mugs. The hours of each day are represented by the darkening of the background. The minutes of each hour are represented by the sixty mugs. The seconds of each minute are represented by the size and color of the mugs (filling up the mugs).  <\/p>\n\n\n\n<p>My initial sketch:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"1024\" height=\"1024\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Untitled_Artwork-2-1024x1024.png\" alt=\"\" class=\"wp-image-67277\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Untitled_Artwork-2-1024x1024.png 1024w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Untitled_Artwork-2-300x300.png 300w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Untitled_Artwork-2-150x150.png 150w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Untitled_Artwork-2-768x768.png 768w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Untitled_Artwork-2-1536x1536.png 1536w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Untitled_Artwork-2-1200x1200.png 1200w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Untitled_Artwork-2.png 2048w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\"><figcaption>Sketch<\/figcaption><\/figure><p>I found this project quite challenging. I realized that executing a concept in code can be a lot more difficult than expected. <\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>clock var x = []; var y = []; var sec; \/\/ second var minutes; \/\/ minute var hr; \/\/ hour \/\/ every second, coffee fills up a little bit in a cup and coffee mug gets larger \/\/ every minute, coffee completely fills up a cup \/\/ every hour, the background color darkens function &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/10\/09\/project-06-abstract-clock-5\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project 06 \u2013 Abstract Clock&#8221;<\/span><\/a><\/p>\n","protected":false},"author":671,"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\/67273"}],"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\/671"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=67273"}],"version-history":[{"count":5,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/67273\/revisions"}],"predecessor-version":[{"id":67454,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/67273\/revisions\/67454"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=67273"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=67273"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=67273"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}