{"id":67243,"date":"2021-10-09T21:58:32","date_gmt":"2021-10-10T01:58:32","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=67243"},"modified":"2021-10-09T21:58:32","modified_gmt":"2021-10-10T01:58:32","slug":"project-06-abstract-clock-4","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/10\/09\/project-06-abstract-clock-4\/","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 this project, I first think about the way I want to represent the current time. Then, I choose to use two circles, one controlled by current second, the other controlled by current minute, to represent two planets rotating around the red sun in the center. The lines in gradually varied colors are the hour representation, 1 am\/pm to 12am\/pm starting from the line in lightest color to the brightest color to the lightest color. Since this is a 12 hours clock, the background color changes based on pm\/am. When it is pm, the background is in dark blue, and when it is am, the background will be in light blue.<\/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\/WechatIMG24-1024x768.jpeg\" alt=\"\" class=\"wp-image-67252\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/WechatIMG24-1024x768.jpeg 1024w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/WechatIMG24-300x225.jpeg 300w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/WechatIMG24-768x576.jpeg 768w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/WechatIMG24-1200x900.jpeg 1200w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/WechatIMG24.jpeg 1440w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\"><figcaption>Project Draft<\/figcaption><\/figure><div class=\"wp-block-file\"><a class=\"p5_sketch_link\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/sketch-44.js\" data-width=\"480\" data-height=\"480\">Abstract Clock<\/a><iframe src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/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\">\/*Name:Camellia(Siyun) Wang; \nSection: C; \nEmail Address: siyunw@andrew.cmu.edu;*\/\n\nvar angle= -180;\nvar radius = 0;\n\nvar s;\nvar h;\nvar m;\n\n\nfunction setup() {\n    createCanvas(480, 480);\n\n}\n\nfunction hourLine(h){\n\/\/draw the time lines of 1-12 am\/pm\n    translate(240,240);\n    stroke(238,232,170);\n    line(-200,0,0,0);\/\/1pm\/am\n    stroke(240,230,140);\n    line(0,0,200*cos(radians(-150)),200*sin(radians(-150)));\/\/2pm\/am\n    stroke(255,255,0);\n    line(0,0,200*cos(radians(-120)),200*sin(radians(-120)));\/\/3pm\/am\n    stroke(255,215,0);\n    line(0,0,200*cos(radians(-90)),200*sin(radians(-90)));\/\/4pm\/am\n    stroke(218,165,32);\n    line(0,0,200*cos(radians(-60)),200*sin(radians(-60)));\/\/5pm\/am\n    stroke(255,165,0);    \n    line(0,0,200*cos(radians(-30)),200*sin(radians(-30)));\/\/6pm\/am\n    stroke(255,69,0);\n    line(200,0,0,0);\/\/7pm\/am\n    stroke(240,230,140);\n    line(0,0,200*cos(radians(150)),200*sin(radians(150)));\/\/8pm\/am\n    stroke(255,255,0);\n    line(0,0,200*cos(radians(120)),200*sin(radians(120)));\/\/9pm\/am\n    stroke(255,215,0);\n    line(0,0,200*cos(radians(90)),200*sin(radians(90)));\/\/10pm\/am\n    stroke(218,165,32);\n    line(0,0,200*cos(radians(60)),200*sin(radians(60)));\/\/11pm\/am\n    stroke(255,165,0);    \n    line(0,0,200*cos(radians(30)),200*sin(radians(30)));\/\/12pm\/am\n    noStroke();\n}\n\n\/\/the rotating circle(planet) on the outside representing minute\nfunction minuteSun(m){\n    stroke(255,165,0);\n    fill(255,69,0);\n    circle(150*cos(radians(angle+m*6)),150*sin(radians(angle+m*6)),10);\n}\n\/\/the rotating circle(planet) on the inside representing second\nfunction secondSun(s){\n    stroke(255,215,0);\n    fill(255,99,71);\n    circle(60*cos(radians(angle+s*6)),60*sin(radians(angle+s*6)),10);\n}\n\/\/the quuivery line representing current hour\nfunction Hour(h){\n    strokeWeight(3);\n    stroke(255,240,245);\n    line(200*cos(radians(-210+30*h+random(-2,2))),200*sin(radians(-210+30*h+random(-2,2))),0,0);\n    strokeWeight(1);\n}\n\nfunction draw() {\n    if(h&lt;=12){\n        background(173,216,230);\/\/when it is am\n    }\n    else{\n        background(0,0,139);\/\/when it is pm\n    }\n    noFill();\n    strokeWeight(4);\n    stroke(255,160,122);\n    circle(240,240,120);\/\/orbit of second planet\n    circle(240,240,300);\/\/orbit of minute planet\n    strokeWeight(2);\n    noStroke();\n    s = second();\n    m = minute();\n    h = hour();\n    hourLine();\n    minuteSun(m);\n    secondSun(s);\n    Hour(h);\n    \/\/the center sun\n    strokeWeight(2);\n    stroke(255,0,0);\n    fill(255,0,0);\n    circle(0,0,20);\n    noFill();\n    noStroke();\n}\n\n<\/code><\/pre><\/div><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>For this project, I first think about the way I want to represent the current time. Then, I choose to use two circles, one controlled by current second, the other controlled by current minute, to represent two planets rotating around the red sun in the center. The lines in gradually varied colors are the hour &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/10\/09\/project-06-abstract-clock-4\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project-06: Abstract Clock&#8221;<\/span><\/a><\/p>\n","protected":false},"author":676,"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\/f2021\/wp-json\/wp\/v2\/posts\/67243"}],"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\/676"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=67243"}],"version-history":[{"count":7,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/67243\/revisions"}],"predecessor-version":[{"id":67260,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/67243\/revisions\/67260"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=67243"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=67243"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=67243"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}