{"id":73841,"date":"2022-10-07T17:31:27","date_gmt":"2022-10-07T21:31:27","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/?p=73841"},"modified":"2022-10-07T17:32:14","modified_gmt":"2022-10-07T21:32:14","slug":"project-06-abstract-clock","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/10\/07\/project-06-abstract-clock\/","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 my abstract clock, I was having a creative block and had trouble approaching what to make. I thought since most of my other projects have been pretty literal, I would make this one more abstract with a focus on shapes and how they can change based on hours, minutes, and seconds. I was thinking about how time is focused around growing, until it restarts and how that concept could be reflected into my clock. I decided to have &ldquo;bubbles&rdquo; that represent hours, minutes, and seconds organized in columns. I wanted these bubbles to slowly grow based on each of the timings. I also made it so the bubble slowly goes from transparent to opaque as seconds, minutes, and hours increase. Originally, I was thinking I wanted a shape inside the bubbles that would turn based on the time, but decided on a line to draw a better connection to a clock. I gave each bubble a line in the center that rotates based on the timing.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"812\" height=\"1024\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/10\/IMG_6033-812x1024.jpg\" alt=\"\" class=\"wp-image-73843\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/10\/IMG_6033-812x1024.jpg 812w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/10\/IMG_6033-238x300.jpg 238w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/10\/IMG_6033-768x968.jpg 768w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/10\/IMG_6033-1218x1536.jpg 1218w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/10\/IMG_6033-1625x2048.jpg 1625w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/10\/IMG_6033-1200x1513.jpg 1200w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/10\/IMG_6033-scaled.jpg 2031w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px\"><\/figure><div><a class=\"p5_sketch_link\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/10\/sketch-57.js\" data-width=\"480\" data-height=\"480\">project6<\/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\">\/\/Rachel Legg \/ rlegg \/ section C\n\nvar col;\n\nfunction setup() {\n    createCanvas(480, 480);\n}\n\nfunction draw() {\n    \/\/background color changes every hour\n    background(0);\n    frameRate(15);\n\n    \/\/variables for time\n    var sec = second();\n    var min = minute();\n    var hr = hour();\n\n    strokeWeight(2);\n\n    \/\/Have Bubbles expand with each increment\n    \/\/line on each bubble to mimic a clock based on hr, min, sec\n    \/\/Hr Row\n    for(col = 0; col &lt;= 3\/4 * height; col += 120){\n        \/\/have hr be yellow\n        fill(255, 255, 0, 30 + hr);                  \/\/have opacity grow with time\n        stroke(255, 255, 0);\n        ellipse(width\/6, height\/8 + col, 2 * hr);\n        \/\/have line in center that moves with change in hr\n        push();\n        translate(width\/6, height\/8 + col);\n        rotate(radians(-90 + (hr * 15)));                     \/\/ 360\/24 = 15\n        line(0, 0, 10, 10);\n        pop();\n    }\n\n\n    \/\/Min Row\n    for(col = 0; col &lt;= 3\/4 * height; col += 120){\n        \/\/have min be pink\n        fill(255, 0, 255, 30 + min);                 \/\/have opacity grow with time\n        stroke(255, 0, 255);\n        ellipse(width\/2, height\/8 + col, 2 * min);\n        \/\/have line in center that moves with change in min\n        push();\n        translate(width\/2, height\/8 + col);\n        rotate(radians(-90 + (min * 6)));                    \/\/ 360\/60 = 6\n        line(0, 0, 10, 10);\n        pop();\n    }\n\n    \/\/Sec Row\n    for(col = 0; col &lt;= 3\/4 * height; col += 120){\n        \/\/have sec be blue\n        fill(0, 255, 255, 30 + sec);                 \/\/have opacity grow with time\n        stroke(0, 255, 255);\n        ellipse(5\/6 * width, height\/8 + col, 2 * sec);\n        \/\/have line in center that moves with change in sec\n        push();\n        translate(5\/6 * width, height\/8 + col);\n        rotate(radians(-90 + (sec * 6)));                   \/\/ 360\/60 = 6\n        line(0, 0, 10, 10);\n        pop();\n    }\n\n}\n<\/code><\/pre><\/div><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>For my abstract clock, I was having a creative block and had trouble approaching what to make. I thought since most of my other projects have been pretty literal, I would make this one more abstract with a focus on shapes and how they can change based on hours, minutes, and seconds. I was thinking &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/10\/07\/project-06-abstract-clock\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project 06 Abstract Clock&#8221;<\/span><\/a><\/p>\n","protected":false},"author":737,"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\/73841"}],"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\/737"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=73841"}],"version-history":[{"count":2,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/73841\/revisions"}],"predecessor-version":[{"id":73845,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/73841\/revisions\/73845"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=73841"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=73841"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=73841"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}