{"id":67209,"date":"2021-10-09T19:22:31","date_gmt":"2021-10-09T23:22:31","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=67209"},"modified":"2021-10-09T19:22:31","modified_gmt":"2021-10-09T23:22:31","slug":"project-06-abstract-clock-2","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/10\/09\/project-06-abstract-clock-2\/","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-height=\"480\" data-width=\"480\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/sketch-39.js\">sketch<\/a><iframe src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/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\">\/\/Anthony Pan\n\/\/Section C\n\nvar d = 0; \/\/diameter for 24 hr circles\nvar d1 = 0; \/\/diameter for 24 hr circles\n\/\/var d2; \/\/first circle diameter\n\/\/var d3; \/\/first cirlce diameter\n\nvar c1 = []; \/\/color array for the 24 hrs of a day\nvar hours = []; \/\/hours in a day\n\nfunction setup() {\n    createCanvas(480, 480);\n    for(var i = 0; i &lt;= 23; i++) {\n        hours[i] = i;\n\n        if(i &gt;= 0 & i <= 8){\n            c1[i] = color(0, random(256), random(256)); \/\/random green + blue, no red first 8 hrs\n        }\n\n        if(i &gt; 8 & i <= 16) {\n            c1[i] = color(random(256), 0 , random(256)); \/\/random red + blue, no green between 8-16 hrs\n\n        }\n\n        if(i &gt;16 & i<=23) {\n            c1[i] = color(random(256), random(256), 0); \/\/random red + green, no blue 16-24 hrs \n\n        }\n\n    }\n\n}\n\n\n\nfunction draw() {\n    background(0);\n    draw_circle(d, d1);\n    \/\/fill_circle(d2, d3);\n\n    noStroke();\n    fill(c1[hour()]); \/\/fill color based on the hour\n\n    \/\/draw a circle that grows based on the number of minutes that has passed\n    ellipse(240, 240, 20*hour() + minute()\/3, 20*hour() + minute()\/3); \n\n    \/\/display clock\n    textSize(15);\n    strokeWeight(1);\n    fill(255);\n    text(hour() + \":\" + minute() + \":\" + second(), 10, 470); \/\/display time on 24 hr clock at bottom left corner\n   \n}\n\nfunction draw_circle(d, d1){\n    for(var i = 1; i &lt;= 25; i++) {\n        noFill();\n        stroke(255); \/\/create why circle stroke\n        ellipse(240, 240, d, d1); \/\/create 24 concentric cirlces for 24 hrs in a day\n        d += 20; \n        d1 += 20; \/\/d and d1 grow each cirlce's radius\n\n    }\n\n}\n\n\n\/\/process for creating fill circle\n\/*\nfunction fill_circle(d2, d3) { \/\/fill circle based on minute\n    for(var i = 0; i &lt;= hour(); i++) {\n        noStroke();\n        fill(c1[hour()]); \/\/fill color based on the hour\n        ellipse(240, 240, 10*hour() + d2*minute(), 10*hour() + d3*minute());\n\n        d2 += 1\/6; \/\/rate of growth based on time \/proportions\n        d3 += 1\/6;\n        print(d2);\n    }\n}\n*\/\n\n\/*\nfunction fill_circle(d2, d3) { \/\/fill circle based on minute\n    noStroke();\n    fill(c1[hour()]); \/\/fill color based on the hour\n    ellipse(240, 240, 20*hour() + minute()\/3, 20*hour() + minute()\/3);\n    \n}\n\n\/*\nfunction draw_circle(d, d1){\n    for(var i = 0; i &lt;= 23; i++) {\n        noFill();\n        stroke(255);\n        ellipse(240, 240, d, d1); \/\/create 24 concentric cirlces for 24 hrs in a day\n        d += 20;\n        d1 += 20; \/\/d and d1 grow each cirlce's radius\n\n    }\n\n\n}\n*\/\n\n\/*\nfunction fill_circle(d2, d3) { \/\/fill circle based on minute\n    for(var i = 0; i &lt;= minute(); i++) {\n        noStroke();\n        fill(c1[hour()]); \/\/fill color based on the hour\n        ellipse(240, 240, d2, d3);\n        d2 += 0.33; \/\/rate of growth based on time \/proportions\n        d3 += 0.33;\n\n    }\n\n}\n*\/\n<\/code><\/pre><\/div>\n\n\n\n<p><strong>Project Description:<\/strong><\/p>\n\n\n\n<p>This clock has 24 concentric circles representing the 24 hours in a day. A second function creates a circle that is filled with a random color based on the range of time: 0-8, 8-16, and 16-24. The circle fills the concentric circles slowly, growing based on each minute passed. There is a display of the time on a 24-hour clock at the bottom of the canvas to show the exact time as the circle fills the concentric circles very slowly. <\/p>\n\n\n\n<p><strong>Process\/Ideation:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"712\" height=\"1024\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Untitled_Artwork-5-712x1024.jpg\" alt=\"\" class=\"wp-image-67211\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Untitled_Artwork-5-712x1024.jpg 712w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Untitled_Artwork-5-208x300.jpg 208w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Untitled_Artwork-5-768x1105.jpg 768w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Untitled_Artwork-5-1067x1536.jpg 1067w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Untitled_Artwork-5-1423x2048.jpg 1423w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Untitled_Artwork-5-1200x1727.jpg 1200w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Untitled_Artwork-5.jpg 1640w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px\"><\/figure><p>This was some of my process working on creating this clock. <\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>sketch \/\/Anthony Pan \/\/Section C var d = 0; \/\/diameter for 24 hr circles var d1 = 0; \/\/diameter for 24 hr circles \/\/var d2; \/\/first circle diameter \/\/var d3; \/\/first cirlce diameter var c1 = []; \/\/color array for the 24 hrs of a day var hours = []; \/\/hours in a day function &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/10\/09\/project-06-abstract-clock-2\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project 06: Abstract Clock&#8221;<\/span><\/a><\/p>\n","protected":false},"author":635,"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\/67209"}],"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\/635"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=67209"}],"version-history":[{"count":1,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/67209\/revisions"}],"predecessor-version":[{"id":67212,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/67209\/revisions\/67212"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=67209"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=67209"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=67209"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}