{"id":74087,"date":"2022-10-08T23:41:38","date_gmt":"2022-10-09T03:41:38","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/?p=74087"},"modified":"2022-10-08T23:42:30","modified_gmt":"2022-10-09T03:42:30","slug":"project-06-abstract-clock-10","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/10\/08\/project-06-abstract-clock-10\/","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><p>For this project, I used driving as the way of demonstrating time, which the driver will drive endlessly during day and night.<\/p>\n\n\n\n<p>-The position of the car represents every second within a minute, moving from left to right (0-59).<\/p>\n\n\n\n<p>-The position of the Tree represents every minute within an hour, moving from left to right (0-59).<\/p>\n\n\n\n<p>-The Sun and light clouds demonstrate it&rsquo;s the first 12 hours, while the Moon and the dark clouds demonstrate the 13th-24th hours.<\/p>\n\n\n\n<p>-The amount of day bars (light blue) demonstrates how many hours it&rsquo;s into the first 12 hours, while the amount of night bars (dark gray) demonstrates how many hours it&rsquo;s into the 13th to 24th hours. All bars appear from left to right. <\/p>\n\n\n\n<p>-The day bars are background of the sky in the nights, while the night bars are background of the sky in the day.<\/p>\n\n\n\n<p>-The clouds are just dynamic decorations.<\/p>\n\n\n\n<div class=\"wp-block-file\"><a class=\"p5_sketch_link\" data-width=\"480\" data-height=\"480\" id=\"wp-block-file--media-e9f508cc-6226-4788-9c6a-91c3ba6523aa\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/10\/sketch-87.js\">sketch<\/a><a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/10\/sketch-87.js\" class=\"wp-block-file__button\" download aria-describedby=\"wp-block-file--media-e9f508cc-6226-4788-9c6a-91c3ba6523aa\">Download<\/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\">\/* Jiayi Chen\n   jiayiche    Section A *\/\nvar h  \/\/hours\nvar s  \/\/seconds\nvar m  \/\/minutes\nvar dayColor\nvar nightColor\nvar boxColor=[]\nvar cloudAndStarX=[]\nvar cloudAndStarY=[]\nvar cloudAndStarL=[]\nvar cloudAndStarH=[]\nfunction setup() {\n    createCanvas(480, 480);\n    h = hour();\n    s = second();\n    m = minute();\n    dayColor= color(135,206,250);\n    nightColor= color(112,128,144);\n    for(var i=0; i&lt;12;i++){\n        if(h &lt; 12){\n            boxColor[i]=nightColor;   \/\/color of the day\n        }else if(h&gt;11){\n        boxColor[i]=dayColor; \/\/color of the night\n        }\n    }\n\n    for(var i=0; i&lt;17;i++){\n        cloudAndStarX[i]=random(0,width-240);\n        cloudAndStarY[i]=random(0,140);\n        cloudAndStarL[i]=random(30,120)\n        cloudAndStarH[i]=random(30,100)\n    }\n}\n\nfunction draw() {\n    \/\/The Sky that represent hours\n    \/\/change the number of box to represent hours in night tmie\n    h = hour();\n    s = second();\n    m = minute();\n    background('gray');\n    push();\n    if (h &lt; 12){ \n        for (var i=0; i&lt;h;i++){\n            boxColor[i]=dayColor\n        }  \n    \/\/change the number of box to represent hours in night tmie\n    }else if(h &gt;= 12){\n        for (var i=0; i&lt;(h-12);i++){\n            boxColor[i]=nightColor;\n        }\n\n    }\n\n    for (var i=0; i&lt;12;i++){  \/\/Background sky colors changing base on day or night\n        fill(boxColor[i])\n        rect(i*width\/12,0,width\/12,height\/2);\n    }\n    pop();\n\n    \/\/grass\n    push();\n    fill(0,255,127);\n    rect(0,240,width,70)\n    rect(0,height-65,width,65)\n    pop();\n    \/\/road\n    for (var i=0; i&lt;5;i++){ \n        rect(i*100,350,50,25);\n    }\n\n    \/\/The Car represent seconds\n    car(s\/60*width,360);\n\n\n    \/\/The Tree Represent minutes\n    tree(m\/60*width,200);\n\n\n    \/\/clouds and sun\n    push();\n    if(h&lt;12){\n        fill(255,69,0)   \/\/ the colors and shape for sun\n        circle(60,60,50)\n        for (var i=0; i&lt;5;i++){\n            fill(255,255,255,100) \/\/clouds in day\n            rect(cloudAndStarX[i]+s\/60*width\/4,cloudAndStarY[i],cloudAndStarL[i],cloudAndStarH[i]);   \n        }\n    \/\/Clouds and a full moon \n    }else if(h&gt;11){\n        fill(246, 241, 213)   \/\/ the colors and shape for moon\n        circle(width-50,60,50)\n        for (var i=0; i&lt;5;i++){\n            fill(0,0,0,150) \/\/ clouds in night\n            rect(cloudAndStarX[i]+s\/60*width\/4,cloudAndStarY[i],cloudAndStarL[i],cloudAndStarH[i]);   \n        }\n    }\n    pop();\n\n}\n\n\nfunction car(cx,cy){\n    \/\/car body\n    push();\n    fill('red')\n    rect(cx,cy,100,40);\/\/main body\n    rect(cx+25,cy-30,40,30);\/\/middle\n    triangle(cx+65,cy,cx+65,cy-30,cx+95,cy);\/\/right\n    triangle(cx+5,cy,cx+25,cy-30,cx+25,cy);\/\/left\n\n    \/\/Weels\n    fill('gray') \/\/outer weels\n    circle(cx+25,cy+40,25);\n    circle(cx+75,cy+40,25);\n    fill('ivory')\/\/inner weels\n    circle(cx+25,cy+40,17);\n    circle(cx+75,cy+40,17);\n\n    \/\/windows\n    fill('azure');\n    rect(cx+28,cy-27,34,24);\n    triangle(cx+68,cy-3,cx+68,cy-27,cx+92,cy-3);\n    triangle(cx+10,cy-3,cx+22,cy-25,cx+22,cy-3);\n\n    \/\/lights\n    fill('gold');\/\/back lights and sub lights\n    rect(cx+80,cy+20,20,5);\n    rect(cx,cy+3,10,15);\n    fill('yellow');\/\/front light\n    rect(cx+90,cy+5,10,12);\n    pop();\n}\n\n\nfunction tree(tx,ty){\n    push();\n    push();\n    fill('green');\/\/leaves\n    rect(tx-30,ty,90,50);\n    rect(tx-15,ty-30,60,30);\n    pop();\n    fill(139,69,19);\/\/tree log\n    rect(tx,ty+20,30,80);\n    pop();\n}\n\n\n<\/code><\/pre><\/div><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>For this project, I used driving as the way of demonstrating time, which the driver will drive endlessly during day and night. -The position of the car represents every second within a minute, moving from left to right (0-59). -The position of the Tree represents every minute within an hour, moving from left to right &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/10\/08\/project-06-abstract-clock-10\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project-06-Abstract-Clock&#8221;<\/span><\/a><\/p>\n","protected":false},"author":710,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[106,55],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/74087"}],"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\/710"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=74087"}],"version-history":[{"count":3,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/74087\/revisions"}],"predecessor-version":[{"id":74097,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/74087\/revisions\/74097"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=74087"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=74087"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=74087"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}