{"id":74209,"date":"2022-10-09T23:21:48","date_gmt":"2022-10-10T03:21:48","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/?p=74209"},"modified":"2022-10-09T23:21:48","modified_gmt":"2022-10-10T03:21:48","slug":"project-06-abstract-clock-15","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/10\/09\/project-06-abstract-clock-15\/","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>I created a lighthouse clock. The ocean level represents the hour of the day with low tide as hour 0 or midnight and when the water level reaches the top of the canvas, or floods the island, it is 11:00. The lighthouse&rsquo;s beam rotates each minute and the lighthouse beam flashes each second. <\/p>\n\n\n\n<div><a class=\"p5_sketch_link\" data-width=\"450\" data-height=\"450\" id=\"wp-block-file--media-ea7cc255-ef63-45fc-80c4-143e8df982dc\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/10\/sketch-99.js\">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=\"450\"><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/amyhu\n\/\/amhyhu@adrew.cmu.edu\n\/\/section d \n\nvar h;  \/\/hour\nvar m;  \/\/minute\nvar s;  \/\/second\nvar theta = 6; \/\/angle to increase by each minute\nvar r = 500;    \/\/radius of light beam\n\nfunction setup() {\n    createCanvas(450,450);\n    background(220);\n}\n\nfunction draw() {\n    background(\"lightblue\");\n\n    let h = hour();\n    let m = minute();\n    let s = second();\n\n    \/\/water level is hour \n    fill(\"blue\");\n    h = map(h,0,24,0,height);\n    rect(0, height-h, width, height);\n\n\n    \/\/lighthouse object\n    drawLighthouse();\n\n    \/\/island object\n    drawIsland();\n\n    \/\/light beam speed is what minute it is\n    push();\n    translate(125,135);\n    var x = r*cos(radians(theta*m));\n    var y = r*sin(radians(theta*m));\n\n    \/\/light beam flashing every second\n    if(s % 2 == 0){\n        stroke(\"yellow\");\n        strokeWeight(18);\n        line(0,0,x,y);   \n    }else{\n        stroke(\"white\");\n        strokeWeight(18);\n        line(0,0,x,y);\n    }\n    pop();\n}\n\nfunction drawIsland(){\n    fill(\"lightyellow\");\n    \/\/noStroke();\n    ellipse(0,height,500);\n}\n\nfunction drawLighthouse(){\n    \/\/rectMode(CENTER);\n    \/\/stroke(1);\n    fill(\"white\");\n    rect(110,120,30,50);    \/\/top white bit\n    fill(\"red\");\n    rect(100,150,50,200);   \/\/red\n    fill(\"white\");\n    rect(100,170,50,20);    \/\/white stripe\n    fill(\"yellow\");\n    circle(125,135,20);      \/\/light circle\n}\n\n<\/code><\/pre><\/div><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>I created a lighthouse clock. The ocean level represents the hour of the day with low tide as hour 0 or midnight and when the water level reaches the top of the canvas, or floods the island, it is 11:00. The lighthouse&rsquo;s beam rotates each minute and the lighthouse beam flashes each second. sketch \/\/amyhu &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/10\/09\/project-06-abstract-clock-15\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project 06: Abstract Clock&#8221;<\/span><\/a><\/p>\n","protected":false},"author":722,"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\/74209"}],"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\/722"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=74209"}],"version-history":[{"count":3,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/74209\/revisions"}],"predecessor-version":[{"id":76275,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/74209\/revisions\/76275"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=74209"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=74209"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=74209"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}