{"id":74230,"date":"2022-10-09T23:42:00","date_gmt":"2022-10-10T03:42:00","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/?p=74230"},"modified":"2022-10-09T23:52:10","modified_gmt":"2022-10-10T03:52:10","slug":"project-06-abstract-clock-16","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/10\/09\/project-06-abstract-clock-16\/","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><p>I created a boba clock which is milk tea with boba from noon to midnight and juice with lychee jelly from midnight to noon. The number of Jelly\/Boba inside the cup, including one inside the straw, represents the hour. Juice\/milk shrinks per second, and the full amount disappears per minute. Lastly, a Jelly\/Boba stuck inside the straw moves upward per minute and got out from the straw each hour.&nbsp;<\/p>\n\n\n\n<div class=\"wp-block-file\"><a class=\"p5_sketch_link\" data-width=\"300\" data-height=\"400\" id=\"wp-block-file--media-c9ae21b2-ea67-44c3-92d3-f44eef0a514b\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/10\/sketch-103.js\">sketch<\/a><a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/10\/sketch-103.js\" class=\"wp-block-file__button\" download aria-describedby=\"wp-block-file--media-c9ae21b2-ea67-44c3-92d3-f44eef0a514b\">Download<\/a><iframe src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/plugins\/p5-embedder\/p5_iframe.html\" class=\"p5_exampleFrame\" width=\"300\" height=\"400\"><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/Alicia Kim\n\/\/Section B\n\nvar x = [];\nvar y = [];\nvar angle = [];\n\n\nfunction setup() {\n    createCanvas(300, 400);\n    for (var i=0; i&lt;(hour()%12-1); i+=1) {\n        x[i] = random (120,190);\n        y[i] = random (200,340);\n        angle[i] = random(360);\n    }\n\n    for(var j=0; j&lt;height; j+=1){\n        stroke(lerpColor(color(255,232,239) ,color(255,253,208),j\/height));\n        line(0,j,width,j);\n    }\n}\n\nfunction draw() {\n    var s = second();\n    var min = minute();\n    stroke(0);    \n\n\/\/juice with lychee jelly from midnight to noon\n\/\/& milk tea with boba from noon to midniht\n    push();\n    if (hour()&gt;12){\n        drawMilk(s);\n    }\n    else if (hour()&lt;=12){\n        drawJuice(s);\n    }\n    pop();\n    \n    push ();\n    drawCup();\n    pop();\n\n    push();\n    drawStraw();\n    pop();\n\n    push();\n    if (hour()&gt;12){\n        drawBoba();\n        strawBoba(min);\n    }\n    else if (hour()&lt;=12){\n        drawJelly();\n        strawJelly(min);\n    }\n    pop();\n\n}\n\n\/\/ juice inside the cup shrinks per sec\nfunction drawJuice(s){\n    fill(255,203,164); \/\/orange\n    quad(70,75,230,75,215,350,85,350); \/\/juice\n\n    \/\/cover\n    fill(255);\n    quad(70,75,230,75,230-(15\/60)*s,75+s*(275\/60),70+(15\/60)*s,75+s*(275\/60));\n\n    stroke(255,178,120); \/\/dark orange \n    fill(255,203,164);\n    ellipse (width\/2, 75+(275\/60)*s, 160-(0.5)*s, 60);\n}\n\nfunction drawCup(){\n\/\/ bigger circle\n    fill(224,255,255); \/\/light cyan\n    ellipse (width\/2, 75 , 160, 60);\n\/\/ smaller circle\n    push();\n    if (hour()&lt;=12){\n        fill(255,203,164);\n    }\n    else if (hour()&gt;12){\n        fill(247,231,200);\n    }\n    ellipse (width\/2, 350, 130, 50);\n    pop();\n\n\/\/connecting lines\n    line (70, 75, 85, 350);\n    line (230, 75, 215, 350);\n}\n\nfunction drawStraw(){\n\/\/ straw body\n    push();\n    fill(0,191,255,50); \/\/sky blue\n    rect(140,30,20,300);\n    pop();\n\/\/ straw holes \n    ellipse(width\/2,30,20,10);\n    ellipse(width\/2,330,20,10);\n    fill(224,255,255); \/\/light cyan\n    arc (width\/2, 75 , 160, 60, 0, PI, OPEN);\n}\n\n\/\/ number of jelly inside the cup represents the hour\nfunction drawJelly(){ \n    for (var i=0; i&lt;(hour()%12-1); i++) {\n        push();\n        translate(x[i],y[i]);\n        rotate(radians(angle[i]));\n        noStroke();\n        fill(249,246,231,150); \/\/lychee \n        rect (0,0,10,30); \/\/lychee jelly\n        pop();  \n    }\n}\n\n\/\/ jelly inside the straw moves up per minute\nfunction strawJelly(m){\n        noStroke();\n        fill(255,255,142);\n        rect (width\/2-5,300-(225\/60)*m,10,30);\n}\n\n\/\/ milk inside the cup shrinks per sec\nfunction drawMilk(s){\n    stroke(236,220,194); \/\/dark milk color\n    fill(247,231,200); \/\/milk color\n    quad(70,75,230,75,215,350,85,350); \/\/juice\n\n    \n    \/\/cover\n    fill(255);\n    quad(70,75,230,75,230-(15\/60)*s,75+s*(275\/60),70+(15\/60)*s,75+s*(275\/60));\n\n \n    fill(247,231,200); \/\/milk color\n    ellipse (width\/2, 75+(275\/60)*s, 160-(0.5)*s, 60);\n}\n\n\/\/ number of boba inside the cup & straw represents the hour\nfunction drawBoba(){\n    for (var i=0; i&lt;(hour()%12-1); i++) {\n        push();\n        stroke(70, 51, 51,100); \/\/darker brown\n        fill(88,59,57,150); \/\/dark brown \n        ellipse (x[i],y[i],20,20); \/\/boba\n        pop();\n    }\n}\n\n\/\/ boba inside the straw moves up per minute\nfunction strawBoba(m){\n    noStroke();\n    fill(88,59,57);\n    ellipse (width\/2,300-(225\/60)*m,20,20);\n}\n\n<\/code><\/pre><\/div><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>I created a boba clock which is milk tea with boba from noon to midnight and juice with lychee jelly from midnight to noon. The number of Jelly\/Boba inside the cup, including one inside the straw, represents the hour. Juice\/milk shrinks per second, and the full amount disappears per minute. Lastly, a Jelly\/Boba stuck inside &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/10\/09\/project-06-abstract-clock-16\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project 06 \u2013 Abstract Clock&#8221;<\/span><\/a><\/p>\n","protected":false},"author":726,"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\/f2022\/wp-json\/wp\/v2\/posts\/74230"}],"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\/726"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=74230"}],"version-history":[{"count":4,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/74230\/revisions"}],"predecessor-version":[{"id":74236,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/74230\/revisions\/74236"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=74230"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=74230"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=74230"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}