{"id":74099,"date":"2022-10-08T23:47:07","date_gmt":"2022-10-09T03:47:07","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/?p=74099"},"modified":"2022-10-08T23:47:07","modified_gmt":"2022-10-09T03:47:07","slug":"project-06-abstract-clock-11","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/10\/08\/project-06-abstract-clock-11\/","title":{"rendered":"Project 06 &#8211; 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 wanted to deconstruct the clock in hours, minutes and seconds, so I created three separate motions of the clock to illustrate the time in 24 hours. <\/p> <div><a class=\"p5_sketch_link\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/10\/sketch-88.js\" data-width=\"450\" data-height=\"440\">sketch<\/a><iframe src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/plugins\/p5-embedder\/p5_iframe.html\" class=\"p5_exampleFrame\" width=\"450\" height=\"440\"><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/Angela Yang\n\/\/Section C\n\nfunction setup() {\n  createCanvas(450, 440);\n  angleMode(DEGREES);\n}\n\nfunction draw() {\n  \/\/Default side bar\n  background(0);\n  push();\n  translate(225, 285);\n  rotate(-90);\n\n  \/\/Clock face\n  fill(\"white\");\n  ellipse(0, -12, 5, 5);\n  ellipse(0, 12, 5, 5);\n  stroke(\"white\");\n  strokeWeight(3);\n  line(-18, -5, -18, 3);\n\n  let hours = hour();\n  let minutes = minute();\n  let seconds = second();\n\n  stroke(255, 100, 150);\n  noFill();\n  strokeWeight(5);\n  let end = map(seconds, 0, 60, 0, 360);\n  arc(0, 0, 100, 100, 0, end);\n\n  stroke(\"#0BDA51\");\n  let end2 = map(minutes, 0, 60, 0, 360);\n  arc(0, 0, 80, 80, 0, end2);\n\n  stroke(\"yellow\");\n  let end3 = map(hours, 0, 24, 0, 360);\n  arc(0, 0, 60, 60, 0, end3);\n  pop();\n\n  fill(255);\n  noStroke();\n  text(hours + \":\" + minutes + \":\" + seconds, 390, 20);\n\n  \/\/ stroke()\n  push();\n  translate(112.5, 112.5);\n  noFill();\n  stroke(255);\n  ellipse(0, 0, 70);\n  noStroke();\n\n  rotate(-90);\n  \n  \/\/Hour clock on the left corner \n  for (let i = 0; i &lt; 12; i++) {\n    if (i == hours % 12) {\n      fill(\"yellow\");\n      ellipse(50, 0, 15);\n    } else {\n      fill(255);\n      ellipse(50, 0, 10);\n    }\n    rotate(360 \/ 12);\n  }\n  pop();\n\n  push();\n    translate(225 + 112.5, 112.5);\n    rotate(-90);\n    noFill();\n    stroke(255);\n    ellipse(0, 0, 110);\n    noStroke();\n    rotate(-90);\n  \n  \/\/Minute clock on the right corner \n  for (let i = 0; i &lt; 60; i++) {\n    if (i == minutes % 60) {\n      fill(\"#0BDA51\"); \/\/Draws the indicator circle \n      ellipse(70, 0, 8);\n    } else {\n      fill(255);\n      ellipse(70, 0, 4);\n    }\n    rotate(360 \/ 60);\n  }\n  pop();\n  \n  \/\/Second clock in the middle \n  push();\n   translate(225, 112.5 + 170);\n   noFill();\n   stroke(255);\n   ellipse(0, 0, 160);\n   noStroke();\n   rotate(-90);\n\n  for (let i = 0; i &lt; 60; i++) {\n    if (i == seconds % 60) {\n      fill(255, 100, 150);\n      ellipse(100, 0, 10);\n    } else {\n      fill(255);\n      ellipse(100, 0, 6);\n    }\n    rotate(360 \/ 60);\n  }\n  pop();\n\n}<\/code><\/pre><\/div><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>For my abstract clock, I wanted to deconstruct the clock in hours, minutes and seconds, so I created three separate motions of the clock to illustrate the time in 24 hours. sketch \/\/Angela Yang \/\/Section C function setup() { createCanvas(450, 440); angleMode(DEGREES); } function draw() { \/\/Default side bar background(0); push(); translate(225, 285); rotate(-90); \/\/Clock &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/10\/08\/project-06-abstract-clock-11\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project 06 &#8211; Abstract clock&#8221;<\/span><\/a><\/p>\n","protected":false},"author":774,"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\/74099"}],"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\/774"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=74099"}],"version-history":[{"count":2,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/74099\/revisions"}],"predecessor-version":[{"id":74103,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/74099\/revisions\/74103"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=74099"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=74099"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=74099"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}