{"id":67395,"date":"2021-10-11T00:20:10","date_gmt":"2021-10-11T04:20:10","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=67395"},"modified":"2021-10-11T00:20:10","modified_gmt":"2021-10-11T04:20:10","slug":"project-06-abstract-clock-14","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/10\/11\/project-06-abstract-clock-14\/","title":{"rendered":"Project-06: Abstract Clock"},"content":{"rendered":"\n

sketch<\/a>Download<\/a><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/Catherine Liu\n\/\/Section D\n\/\/jianingl@andrew.cmu.edu\n\/\/Assignment-06-Project\n\n\/\/an abstract clock where the objects move according to seconds, minutes, and hours\n\nvar xPos = []; \/\/array for x position of clouds\nvar yPos = []; \/\/array for y position of clouds\n\nfunction setup() {\n createCanvas(480, 400);\n \/\/creates random positions for 60 clouds\n for (i = 0; i < 60; i++) { \n xPos[i] = random(0,480);\n yPos[i] = random(0,150)\n }\n}\n\nfunction draw() {\n background(155,212,255);\n fill(0,0,102);\n rect(0,height\/2, width, height\/2);\n \/\/draws a number of clouds according to the current second\n for (i = 0; i <= second(); i++) { \n clouds(xPos[i], yPos[i]);\n }\n push();\n sunMoon(-150, 0); \/\/calls function that draws the rotating sun and moon\n pop();\n \/\/aliens move closer to each other according to minutes\n print(minute().toString())\n rightAlien(480 - 8 * minute(), height\/2); \/\/calls function that draws right alien\n leftAlien(0 + 8 * minute(), height\/2); \/\/calls function that draws left alien\n}\n\nfunction rightAlien (x, y) { \/\/draws right alien\n stroke(0,102,51);\n strokeWeight(5);\n \/\/arm waves up and down according to seconds using mod \n if (second() % 2 == 0) {\n line(x-40, y-60, x-13,y-30); \/\/left arm\n } else if (second() % 2 != 0) {\n line(x-45, y-50, x-13,y-30); \/\/left arm\n }\n line(x+13, y-30, x+30, y-15); \/\/right arm\n line(x, y-50, x, y-30); \/\/neck\n stroke(204, 255, 153);\n line(x-10, y, x-10, height); \/\/left leg\n line(x+10, y, x+10, height); \/\/ right leg\n stroke(0,102,51);\n line(x-17, y-70, x-7, y-50); \/\/antennae\n line(x+17, y-70, x+7, y-50); \/\/antennae\n noStroke();\n fill(204, 255, 153);\n ellipse(x, y-50, 30,20); \/\/head\n rect(x-15, y-35, 30,120,10); \/\/body\n fill(0,102,51)\n \/\/eyes look back when the aliens pass each other halfway\n if (minute() < 31) {\n circle(x-10, y-51, 5); \/\/ left eye\n circle(x-3, y-51, 5); \/\/ right eye\n } else if (minute() >= 31) {\n circle(x+10, y-51, 5); \/\/ left eye\n circle(x+3, y-51, 5); \/\/ right eye\n }\n}\n\nfunction leftAlien(x, y) { \/\/draws left alien\n stroke(0,102,51);\n strokeWeight(5);\n \/\/arm waves up and down according to seconds using mod \n if (second() % 2 != 0) {\n line(x+40, y-60, x+13,y-30); \/\/left arm\n } else if (second() % 2 == 0) {\n line(x+45, y-50, x+13,y-30); \/\/left arm\n }\n line(x-13, y-30, x-30, y-15); \/\/left arm\n line(x, y-50, x, y-30); \/\/neck\n stroke(204, 255, 153);\n line(x-10, y, x-10, height); \/\/left leg\n line(x+10, y, x+10, height); \/\/right leg\n stroke(0,102,51);\n line(x-17, y-70, x-7, y-50); \/\/left antennae\n line(x+17, y-70, x+7, y-50); \/\/right antennae\n noStroke();\n fill(204, 255, 153);\n ellipse(x, y-50, 30,20); \/\/left man's head\n rect(x-15, y-35, 30,120,10); \/\/left man's body\n fill(0,102,51)\n \/\/eyes look back when the aliens pass each other halfway\n if (minute() < 31) {\n circle(x+10, y-51, 5); \/\/ left eye\n circle(x+3, y-51, 5); \/\/ right eye\n } else if (minute() >= 31) {\n circle(x-10, y-51, 5); \/\/ left eye\n circle(x-3, y-51, 5); \/\/ right eye\n }\n}\n\nfunction sunMoon (x, y) { \/\/sun and moon rotates according to hour, from 0-12 it is sun, from 12-23 it is moon\n translate(width\/2, height\/2);\n var dx = 30 * hour(); \n rotate (radians(dx));\n if (hour() > 12 & hour() <=23) {\n fill(255, 243, 176);\n arc(x, y, 100, 100, 0, PI + QUARTER_PI, PIE); \/\/moon\n ellipse(x + 30, y - 30, 5, 10);\n ellipse(x - 30, y + 70, 5, 10);\n } else if (hour() >= 0 & hour() <= 12) {\n fill(255, 128, 0);\n ellipse(x, y, 100, 100); \/\/sun\n }\n}\n\nfunction clouds(x, y) { \/\/draws a cloud at position x, y\n fill(233, 254, 255);\n rect(x, y, 20, 10,30); \/\/cloud\n}\n\n\n<\/code><\/pre><\/p>\n\n\n\n<p>I started off this project by sketching a rough idea of what I wanted to make, which was two people playing badminton, with the shuttlecock moving from one end to the next in minutes. The sun and moon would then rotate according to the hour.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"1024\" height=\"768\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Untitled_Artwork-29-1024x768.jpg\" alt=\"\" class=\"wp-image-67406\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Untitled_Artwork-29-1024x768.jpg 1024w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Untitled_Artwork-29-300x225.jpg 300w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Untitled_Artwork-29-768x576.jpg 768w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Untitled_Artwork-29-1536x1152.jpg 1536w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Untitled_Artwork-29-2048x1536.jpg 2048w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Untitled_Artwork-29-1200x900.jpg 1200w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\"><figcaption>original sketch<\/figcaption><\/figure><p>However, I came across some coding problems so I changed my idea slightly. Now, they are aliens that can only move with every minute. As they move closer to each other, they are waving and their eyes follow each other. While I kept the sun and moon concept the same, I changed the background clouds to increase numbers according to seconds. <\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>sketchDownload \/\/Catherine Liu \/\/Section D \/\/jianingl@andrew.cmu.edu \/\/Assignment-06-Project \/\/an abstract clock where the objects move according to seconds, minutes, and hours var xPos = []; \/\/array for x position of clouds var yPos = []; \/\/array for y position of clouds function setup() { createCanvas(480, 400); \/\/creates random positions for 60 clouds for (i = 0; … <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/10\/11\/project-06-abstract-clock-14\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> “Project-06: Abstract Clock”<\/span><\/a><\/p>\n","protected":false},"author":654,"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\/f2021\/wp-json\/wp\/v2\/posts\/67395"}],"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\/654"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=67395"}],"version-history":[{"count":3,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/67395\/revisions"}],"predecessor-version":[{"id":67518,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/67395\/revisions\/67518"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=67395"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=67395"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=67395"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}