{"id":74199,"date":"2022-10-09T22:42:51","date_gmt":"2022-10-10T02:42:51","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/?p=74199"},"modified":"2022-10-09T22:42:51","modified_gmt":"2022-10-10T02:42:51","slug":"mug-clock","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/10\/09\/mug-clock\/","title":{"rendered":"Mug 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><p>I was inspired by the coffee mugs that change based on the temperature of the liquid inside. However instead of temperature this mug changes based on time. The color depends on the hour of the day, the height depends on the minute and the steam depends on the second.   <\/p><div><a class=\"p5_sketch_link\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/10\/sketch-98.js\" data-width=\"480\" data-height=\"480\">sketch<\/a><iframe src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/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\">\/\/Nakshatra Menon\n\/\/Section C\n\nvar cupHeight; \n\nfunction setup() {\n    createCanvas(480, 480);\n    background(246, 242, 240);\n}\n\n\n\nfunction draw() {\n    push();\n    colorMode(HSB);\n    background(180, hour()*2, 42);         \n    pop()\n    fill(44, 28, 7);\n    noStroke();\n    rect(0, 300, width, 200);             \n    cup(240, 300);\n}\n\n\nfunction cup(x,y){ \/\/ draws cup\n    cupHeight = -minute();                           \/\/ makes the cup taller with the min  \n    push();\n    translate(x,y)                                   \/\/ center of the liquid becomes the origin \n    \/\/ cup handle\n    strokeWeight(10);\n    stroke(170);\n    noFill(); \n    ellipse(70, cupHeight+40, 48-cupHeight, 44);\n\n    \/\/ saucer\n    strokeWeight(1);\n    noStroke();\n    c();                               \/\/ color \n    ellipse(0, 75, 120, 20);\n    fill(0, 0, 0, 50);                \/\/ shadow \n    ellipse(0, 75, 100, 15); \n \n    \/\/ body of cup \n    strokeWeight(1); \n    noStroke();\n    c();                               \/\/ color \n    beginShape();\n        curveVertex(-76, cupHeight);\n        curveVertex(-76, cupHeight);\n        curveVertex(-62, 27);\n        curveVertex(-38, 60);\n        curveVertex(0, 75);\n        curveVertex(38, 60);\n        curveVertex(62, 27);\n        curveVertex(76, cupHeight);\n        curveVertex(76, cupHeight);\n    endShape();\n\n    \/\/ liquid\n    strokeWeight(5);\n    stroke(170);\n    fill(110, 69, 17);\n    ellipse(0, cupHeight, 150, 20);\n    pop();\n\n    \/\/ steam \n    push();\n    translate(x, y-45)                      \n    steam();\n    pop();\n}\n    \nfunction c(){ \/\/ changes the color based on the hour \n    \/\/ rounds up the number\n    var f = ceil(hour()\/2)                            \n    var f2 = ceil(hour()\/3)\n    var f3 = ceil((hour()-12)\/2)\n    var f4 = ceil((hour()-12)\/3) \n\n    \/\/ color changes based on hour \n    if(hour()&gt;= 0 & hour()<= 4){                   \/\/ color goes from red to green\n        fill((255-63*hour()),63*hour(), 0)\n    }\n\n    if (hour() > 4 && hour() <= 8){                 \/\/ color goes from green to blue\n        fill(0,(255-63*f),43*f)\n    }\n\n    if(hour()> 8 && hour()<= 12){                   \/\/ color goes from blue to red\n        fill(43*f2, 0, (255-43*f2))\n    }\n\n    if(hour()> 12 && hour()<= 16){                \/\/ color goes from red to green\n        fill((255-43*(hour()-12)),43*(hour()-12), 0)\n    }\n\n    if (hour() > 16 && hour() < 20){             \/\/ color goes from green to blue\n        fill(0,(255-43*(f3)),43*(f3))\n    }\n\n    if(hour()>= 20 && hour()<= 24){             \/\/ color goes from blue to red\n        fill(43*(f4), 0, (255-43*(f4)))\n    }   \n}\n\n\nfunction steam(){ \/\/ steam changes based on second \n    if (second()<=30){                           \/\/ when sec less\/equal than 30\n        fill(255, 255, 255, 120-2*second());    \/\/ the opacity changes depending on the second \n        beginShape()                            \/\/ shape 1 \n            curveVertex(0, -12);\n            curveVertex(0, -12);\n            curveVertex(-16+second(), -34);\n            curveVertex(-53+second(), -57);\n            curveVertex(-52+second(), -107);\n            curveVertex(21+second(), -119);\n            curveVertex(10+second(), -158);\n            curveVertex(47, -171);\n            curveVertex(54-second(), -108);\n            curveVertex(18-second(), -80);\n            curveVertex(42-second(), -43);\n            curveVertex(13-second(), -24);\n            curveVertex(0, -12);\n            curveVertex(0, -12);\n        endShape();\n    }\n    if (second()&gt;30){                           \/\/ when sec greater than 30\n        fill(255, 255, 255, 120-2*second());   \/\/ opacity changes based on second \n        beginShape()                           \/\/ shape 2 \n            curveVertex(0, -12);\n            curveVertex(0, -12);\n            curveVertex(-16-second(), -34);\n            curveVertex(-53-second(), -57);\n            curveVertex(-52-second(), -107);\n            curveVertex(21-second(), -119);\n            curveVertex(10-second(), -158);\n            curveVertex(47, -171);\n            curveVertex(54+second(), -108);\n            curveVertex(18+second(), -80);\n            curveVertex(42+second(), -43);\n            curveVertex(13+second(), -24);\n            curveVertex(0, -12);\n            curveVertex(0, -12);\n        endShape();\n    }\n}\n\n\n\n\n\n<\/code><\/pre><\/div><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>I was inspired by the coffee mugs that change based on the temperature of the liquid inside. However instead of temperature this mug changes based on time. The color depends on the hour of the day, the height depends on the minute and the steam depends on the second. sketch \/\/Nakshatra Menon \/\/Section C var &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/10\/09\/mug-clock\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Mug Clock&#8221;<\/span><\/a><\/p>\n","protected":false},"author":746,"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\/f2022\/wp-json\/wp\/v2\/posts\/74199"}],"collection":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/users\/746"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=74199"}],"version-history":[{"count":2,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/74199\/revisions"}],"predecessor-version":[{"id":74201,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/74199\/revisions\/74201"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=74199"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=74199"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=74199"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}