{"id":74009,"date":"2022-10-08T20:33:12","date_gmt":"2022-10-09T00:33:12","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/?p=74009"},"modified":"2022-10-08T20:39:25","modified_gmt":"2022-10-09T00:39:25","slug":"project-06-abstract-clock-7","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/10\/08\/project-06-abstract-clock-7\/","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>For this project, I thought about the growth of plants as a representation of time. However, I decided to combine that concept by creating a method where by looking at the image, one can know in a more literal sense what time of day it is while still being an abstract representation. <\/p>\n\n\n\n<p>The stem grows a little longer each minute and refreshes from the bottom once it reaches 59. This allows the viewer to know what minute of the hour it is. The number o pedals is representative of the hour and the shade change of the pedals represents the seconds. The background also changes from night to day depending on the typical times when the sun and moon are out.<\/p>\n\n\n\n<div><a class=\"p5_sketch_link\" data-height=\"480\" data-width=\"400\" id=\"wp-block-file--media-c1a9aa46-e889-4e90-90ac-3bc2aa3bc0ea\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/10\/sketch-78.js\">clock sketch<\/a><iframe src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/plugins\/p5-embedder\/p5_iframe.html\" class=\"p5_exampleFrame\" width=\"400\" height=\"480\"><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/ Sandy Youssef\n\/\/ syoussef@andrew.cmu.edu\n\/\/ section D\n\/\/Assignment 6\nvar x; \nvar y;\n \nfunction setup() {\n    createCanvas(400, 480);\n\n   \n}\n\nfunction draw() {\n    x = width\/2;\n    y = 450;\n    \n\n    \/\/ draw sun or moon depending on time of day where sun or moon are typically out\n    var h = hour(); \/\/ current hour of day 0-23\n    \n    if ( h &gt; 6 & h < 17) {\n        background(205,236,255);\n        \/\/sun\n        fill(\"yellow\");\n        ellipse(70, 70, 70);  \n    \n    } else  {\n        background(32,58,131); \n        \/\/ draw moon\n        fill(\"white\")\n        ellipse(330,70,70);\n        fill(32,58,131);\n        ellipse(310, 70,70);\n        \n    }\n    \/\/clouds \n    var xc = 100; \/\/ x cloud\n    var xy = 100; \/\/ y cloud\n    \n    fill(\"white\");\n    \/\/left cloud\n    ellipse(xc + 25, xy +15, 50,25);\n    ellipse(xc+ 55, xy + 35, 50,33);\n    ellipse( xc, xy + 35, 60, 40);\n    ellipse(xc +35, xy + 37, 50, 50);\n    \/\/right cloud\n    push();\n    translate(190,90);\n    ellipse(xc + 25, xy +15, 50,25);\n    ellipse(xc+ 55, xy + 35, 50,33);\n    ellipse( xc, xy + 35, 60, 40);\n    ellipse(xc +35, xy + 37, 50, 50);\n    pop();\n    \n    \/\/dirt\n    noStroke();\n    fill(\"brown\");\n    rect(0, 460, width, height);\n    \n   \n    \/\/stem\n    var m = minute(); \/\/ current minute in hour 0-59\n    fill(74,115,69);\n    rect(x-10,y-10- (m *5), 5, 300); \/\/ every minute the stem will grow and once it reaches 59 it will start over. \n  \n\n   \n    var s = second(); \/\/ current seconds 0-59\n    var h = hour(); \/\/ current hour of day 0-23\n    for (var i = 0; i &lt; h; i ++) { \/\/ loop that creates a new pedal at each hour to count hour\n        push();\n        translate(x-10 +3, y-10- (m*5)); \/\/ translates pedals to the center of flower \n        rotate(radians(360\/24)*i);\n        stroke(\"yellow\")\n        strokeWeight(1);\n        \/\/ count seconds by changing shade of pedals at each second\n        if (s %2) { \/\/ if second is odd make light pink\n           fill(227,180,242);\n        } else {\n            fill(225,154,246); \/\/ if second is even make dark pink\n        }\n        ellipse(5 , (-15), 10, 25);\n        pop();\n        \n    }\n   \n\n    \/\/ center of flower\n    fill(243,255,131); \/\/ yellow\n    ellipse(x-10 + 3 , y-10- (m *5) , 20);\n    \n     \n   \n\n    \/\/ grass \n    for (var x = 1; x &lt; width; x = x+ 4) { \n        fill(0,240,0);\n        triangle(x,480, x+ 5 , 480, x +2.5, 440);\n    }\n\n\n    \n\n   \n}\n<\/code><\/pre><\/div>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"1024\" height=\"617\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/10\/IMG_027710921-1024x617.jpg\" alt=\"\" class=\"wp-image-74014\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/10\/IMG_027710921-1024x617.jpg 1024w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/10\/IMG_027710921-300x181.jpg 300w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/10\/IMG_027710921-768x463.jpg 768w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/10\/IMG_027710921-1536x926.jpg 1536w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/10\/IMG_027710921-1200x723.jpg 1200w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/10\/IMG_027710921.jpg 1934w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\"><figcaption>brainstorming process<\/figcaption><\/figure><figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"528\" height=\"1024\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/10\/IMG_027610919-528x1024.jpg\" alt=\"\" class=\"wp-image-74015\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/10\/IMG_027610919-528x1024.jpg 528w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/10\/IMG_027610919-155x300.jpg 155w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/10\/IMG_027610919-768x1490.jpg 768w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/10\/IMG_027610919-792x1536.jpg 792w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/10\/IMG_027610919-1056x2048.jpg 1056w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/10\/IMG_027610919.jpg 1184w\" sizes=\"(max-width: 528px) 85vw, 528px\"><figcaption>messy brainstorming process <\/figcaption><\/figure><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>For this project, I thought about the growth of plants as a representation of time. However, I decided to combine that concept by creating a method where by looking at the image, one can know in a more literal sense what time of day it is while still being an abstract representation. The stem grows &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/10\/08\/project-06-abstract-clock-7\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project 06 \u2013 Abstract Clock&#8221;<\/span><\/a><\/p>\n","protected":false},"author":776,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[106,58],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/74009"}],"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\/776"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=74009"}],"version-history":[{"count":7,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/74009\/revisions"}],"predecessor-version":[{"id":74022,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/74009\/revisions\/74022"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=74009"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=74009"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=74009"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}