{"id":67333,"date":"2021-10-10T00:09:56","date_gmt":"2021-10-10T04:09:56","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=67333"},"modified":"2021-10-10T01:20:22","modified_gmt":"2021-10-10T05:20:22","slug":"category-project-06-abstract-clock","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/10\/10\/category-project-06-abstract-clock\/","title":{"rendered":"Tartan Clock"},"content":{"rendered":"\n

sketch<\/a>Download<\/a><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/Yanina Shavialenka\n\/\/Section B\n\/\/yshavial@andrew.cmu.edu\n\nvar x = 15;\nvar y = 15;\n\nvar xSpeed = 1;\nvar ySpeed = 0;\n\nvar xCircleSec = 40;\nvar yCircleSec = 30;\n\nvar xCircleMin = 70;\nvar yCircleMin = 60;\n\nvar xCircleHour = 103;\nvar yCircleHour = 103;\n\nfunction setup() {\n createCanvas(480, 480);\n background(220);\n text(\"p5.js vers 0.9.0 test.\", 10, 15);\n}\n\nfunction draw() {\n background(160, 160, 160);\n seconds();\n minutes();\n hours();\n}\n\nfunction seconds() {\n stroke(255, 255, 0);\n fill(0, 102, 0);\n square(x, y, 450);\n\n \/*\n These for loops draw the 13 lines on the green square to \n make space for the seconds.\n Counting starts at top left triangle to the right and \n continues clockwise.\n *\/\n for(var i=37.5; i<=420; i+=28.8) {\n stroke(255, 255, 0);\n line(x+i, y, x+i, y+37.5);\n }\n for(var i=37.5; i<=420; i+=28.8) {\n stroke(255, 255, 0);\n line(x+412.5, y+i, x+450, y+i);\n }\n for(var i=37.5; i<=420; i+=28.8) {\n stroke(255, 255, 0);\n line(x+i, y+412.5, x+i, y+450);\n }\n for(var i=37.5; i<=420; i+=28.8) {\n stroke(255, 255, 0);\n line(x, y+i, x+37.5, y+i);\n }\n \n \/\/ These are 4 corner lines for seconds.\n line(x, y, x+37.5, y+37.5);\n line(x+450, y, x+412.5, y+37.5);\n line(x+450, y+450, x+412.5, y+412.5);\n line(x, y+450, x+37.5, y+412.5);\n \n \/\/Ball for seconds.\n fill(0);\n circle(xCircleSec, yCircleSec, 10);\n\n \/*\n These if-else statements check when to move the position of the ball\n based on the seconds.\n *\/ \n if(15 <= second() & second() < 30) {\n xCircleSec = width - 32;\n yCircleSec = 38 + 28.8 * (second() - 15);\n xSpeed = 0;\n ySpeed = 1;\n }\n else if(30 <= second() & second() < 45) {\n xCircleSec = width - 38 - 28.8 * (second() - 30);\n yCircleSec = height - 33;\n xSpeed = -1;\n ySpeed = 0;\n }\n else if(second() >= 45) {\n xCircleSec = 33;\n yCircleSec = height - 38 - 28.8 * (second() - 45);\n xSpeed = 0;\n ySpeed = -1;\n }\n else if(second() < 15) {\n xCircleSec = 38 + 28.8 * second();\n yCircleSec = 33;\n xSpeed = 1;\n ySpeed = 0;\n }\n}\n\nfunction minutes() {\n stroke(255, 255, 0);\n fill(0, 0, 190);\n square(x+37.5, y+37.5, 375);\n\n \/*\n These for loops draw the 13 lines on the green square to \n make space for the minutes.\n Counting starts at top left triangle to the right and \n continues clockwise.\n *\/\n for(var i=75; i<=375; i+=23.07) {\n stroke(255, 255, 0);\n line(x+i, y+37.5, x+i, y+75);\n }\n for(var i=75; i<=375; i+=23.07) {\n stroke(255, 255, 0);\n line(x+375, y+i, x+412.5, y+i);\n }\n for(var i=75; i<=375; i+=23.07) {\n stroke(255, 255, 0);\n line(x+i, y+375, x+i, y+412.5);\n }\n for(var i=75; i<=375; i+=23.07) {\n stroke(255, 255, 0);\n line(x+37.5, y+i, x+75, y+i);\n }\n \n \/\/ These are 4 corner lines for minutes.\n line(x+37.5, y+37.5, x+(37.5*2), y+(37.5*2));\n line(x+412.5, y+37.5, x+375, y+(37.5*2));\n line(x+412.5, y+412.5, x+375, y+375);\n line(x+37.2, y+412.5, x+(37.5*2), y+375);\n \n \/\/Ball for minutes.\n fill(0);\n circle(xCircleMin, yCircleMin, 10);\n\n \/*\n These if-else statements check when to move the position of the ball\n based on the minutes.\n *\/ \n if(15 <= minute() & minute() < 30){\n xCircleMin = width - 72;\n yCircleMin = 56 + 23.07 * (minute() - 15);\n xSpeed = 0;\n ySpeed = 1;\n }\n else if(30 <= minute() & minute() < 45) {\n xCircleMin = width- 55 - 23.07 * (minute() - 30);\n yCircleMin = height - 72;\n xSpeed = -1;\n ySpeed = 0;\n }\n else if(minute() >= 45) {\n xCircleMin = 72;\n yCircleMin= height- 56 - 23.07 * (minute() - 45);\n xSpeed = 0;\n ySpeed = -1;\n }\n else if(minute() < 15) {\n xCircleMin = 56 + 23.07 * minute();\n yCircleMin = 72;\n xSpeed = 1;\n ySpeed = 0;\n }\n}\n\nfunction hours(){\n stroke(255, 255, 0);\n fill(240, 20, 20);\n square(x+75, y+75, 300);\n \n \/\/These lines divide 24 spaces for hours\n stroke(255, 255, 0);\n line(x+75, y+121.14, x+121.14, y+75);\n line(x+75, y+167.28, x+167.28, y+75);\n line(x+75, y+213.42, x+213.42, y+75);\n line(x+75, y+259.56, x+259.56, y+75);\n line(x+75, y+305.7, x+305.7, y+75);\n line(x+(37.5*2), y+351.84, x+351.84, y+(37.5*2));\n\n line(x+98.07, y+375, x+375, y+98.07);\n line(x+144.221, y+375, x+375, y+144.21);\n line(x+190.35, y+375, x+375, y+190.35);\n line(x+236.49, y+375, x+375, y+236.49);\n line(x+282.63, y+375, x+375, y+282.63);\n line(x+328.77, y+375, x+375, y+328.77);\n\n line(113, 113, 367, 367);\/\/Middle division line for hours\n \n \/\/Ball for hours.\n fill(0);\n circle(xCircleHour, yCircleHour, 10);\n\n \/*\n These if-else statements check for the hours.\n The position of a circle updates based on the hour 0-23. \n Upper and bottom triangles represent 12 am and 12 pm or \n 00:00 and 12:00.\n Counting starts from 00:00 at the top triangle and goes clockwise.\n *\/\n if(hour() == 0) {\n xCircleHour = 103;\n yCircleHour = 103;\n xSpeed = 1;\n ySpeed = 1;\n }\n else if(hour() == 1) {\n xCircleHour = 140;\n yCircleHour = 110;\n xSpeed = 1;\n ySpeed = 1;\n }\n else if(hour() == 2) {\n xCircleHour = 175;\n yCircleHour = 120;\n xSpeed = 1;\n ySpeed = 1;\n }\n else if(hour() == 3) {\n xCircleHour = 210;\n yCircleHour = 130;\n xSpeed = 1;\n ySpeed = 1;\n }\n else if(hour() == 4) {\n xCircleHour = 245;\n yCircleHour = 140;\n xSpeed = 1;\n ySpeed = 1;\n }\n else if(hour() == 5) {\n xCircleHour = 280;\n yCircleHour = 150;\n xSpeed = 1;\n ySpeed = 1;\n }\n else if(hour() == 6) {\n xCircleHour = 317;\n yCircleHour = 160;\n xSpeed = 1;\n ySpeed = 1;\n }\n else if(hour() == 7) {\n xCircleHour = 340;\n yCircleHour = 185;\n xSpeed = 1;\n ySpeed = 1;\n }\n else if(hour() == 8) {\n xCircleHour = 350;\n yCircleHour = 220;\n xSpeed = 1;\n ySpeed = 1;\n }\n else if(hour() == 9) {\n xCircleHour = 360;\n yCircleHour = 260;\n xSpeed = 1;\n ySpeed = 1;\n }\n else if(hour() == 10) {\n xCircleHour = 360;\n yCircleHour = 305;\n xSpeed = 1;\n ySpeed = 1;\n }\n else if(hour() == 11) {\n xCircleHour = 370;\n yCircleHour = 340;\n xSpeed = 1;\n ySpeed = 1;\n }\n else if(hour() == 12) {\n xCircleHour = 377;\n yCircleHour = 377;\n xSpeed = 1;\n ySpeed = 1;\n }\n else if(hour() == 13) {\n xCircleHour = 340;\n yCircleHour = 370;\n xSpeed = 1;\n ySpeed = 1;\n }\n else if(hour() == 14) {\n xCircleHour = 305;\n yCircleHour = 360;\n xSpeed = 1;\n ySpeed = 1;\n }\n else if(hour() == 15) {\n xCircleHour = 265;\n yCircleHour = 355;\n xSpeed = 1;\n ySpeed = 1;\n }\n else if(hour() == 16) {\n xCircleHour = 235;\n yCircleHour = 340;\n xSpeed = 1;\n ySpeed = 1;\n }\n else if(hour() == 17) {\n xCircleHour = 200;\n yCircleHour = 325;\n xSpeed = 1;\n ySpeed = 1;\n }\n else if(hour() == 18) {\n xCircleHour = 165;\n yCircleHour = 315;\n xSpeed = 1;\n ySpeed = 1;\n }\n else if(hour() == 19) {\n xCircleHour = 150;\n yCircleHour = 285;\n xSpeed = 1;\n ySpeed = 1;\n }\n else if(hour() == 20) {\n xCircleHour = 135;\n yCircleHour = 255;\n xSpeed = 1;\n ySpeed = 1;\n }\n else if(hour() == 21) {\n xCircleHour = 130;\n yCircleHour = 215;\n xSpeed = 1;\n ySpeed = 1;\n }\n else if(hour() == 22) {\n xCircleHour = 120;\n yCircleHour = 175;\n xSpeed = 1;\n ySpeed = 1;\n }\n else if(hour() == 23) {\n xCircleHour = 110;\n yCircleHour = 140;\n xSpeed = 1;\n ySpeed = 1;\n }\n}<\/code><\/pre><\/p>|\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"391\" height=\"512\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/unnamed-14-1.jpg\" alt=\"\" class=\"wp-image-67338\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/unnamed-14-1.jpg 391w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/unnamed-14-1-229x300.jpg 229w\" sizes=\"(max-width: 391px) 85vw, 391px\"><\/figure><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"431\" height=\"512\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/unnamed-15-1.jpg\" alt=\"\" class=\"wp-image-67339\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/unnamed-15-1.jpg 431w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/unnamed-15-1-253x300.jpg 253w\" sizes=\"(max-width: 431px) 85vw, 431px\"><\/figure><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"400\" height=\"512\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/unnamed-16.jpg\" alt=\"\" class=\"wp-image-67341\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/unnamed-16.jpg 400w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/unnamed-16-234x300.jpg 234w\" sizes=\"(max-width: 400px) 85vw, 400px\"><\/figure><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"397\" height=\"512\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/unnamed-17.jpg\" alt=\"\" class=\"wp-image-67342\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/unnamed-17.jpg 397w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/unnamed-17-233x300.jpg 233w\" sizes=\"(max-width: 397px) 85vw, 397px\"><\/figure><p>This project was very difficult in the aspect of just coming up with ideas how to make it look like a clock without it actually being a clock. My outer green square represents seconds: each side has 15 seconds such as it is easy to count time by quoters. Blue square stands for minutes with same description for how it works. The pink square represents hours. Two triangles in top left and bottom right corners represents 12 am and 12 pm or 00:00 and 12:00. <\/p>\n\n\n\n<p>I’ve used primary colors of CMU such as green, blue, red, yellow and black to make it a Tartan Clock.<\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>sketchDownload \/\/Yanina Shavialenka \/\/Section B \/\/yshavial@andrew.cmu.edu var x = 15; var y = 15; var xSpeed = 1; var ySpeed = 0; var xCircleSec = 40; var yCircleSec = 30; var xCircleMin = 70; var yCircleMin = 60; var xCircleHour = 103; var yCircleHour = 103; function setup() { createCanvas(480, 480); background(220); text(“p5.js vers 0.9.0 … <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/10\/10\/category-project-06-abstract-clock\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> “Tartan Clock”<\/span><\/a><\/p>\n","protected":false},"author":670,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[106,56],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/67333"}],"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\/670"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=67333"}],"version-history":[{"count":8,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/67333\/revisions"}],"predecessor-version":[{"id":67354,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/67333\/revisions\/67354"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=67333"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=67333"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=67333"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}