{"id":73965,"date":"2022-10-08T18:55:23","date_gmt":"2022-10-08T22:55:23","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/?p=73965"},"modified":"2022-10-08T18:58:38","modified_gmt":"2022-10-08T22:58:38","slug":"project-06-abstract-clock-5","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/10\/08\/project-06-abstract-clock-5\/","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, the inner circle represents every second, the outer circle shows the seconds turning to minutes, the different colored rays of the &ldquo;sun&rdquo; show the different minutes, and the pink background shows the number of hours in the day!<\/p>\n<div><a class=\"p5_sketch_link\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/10\/sketch-75.js\" data-width=\"480\" data-height=\"480\">sketch<\/a><iframe src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/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\">function setup() {\n    createCanvas(350, 350);\n    background(173, 216, 230);\n}\n\nfunction draw() {\n    background(173, 216, 230);\n    hoursBackground();\n    minutesCircle();\n    secondsCircle();\n}\n\nfunction hoursBackground() { \/\/creates pink rectangles every hour\n    push();\n    for(var i = 0; i &lt; hour(); i++) {\n        strokeWeight(0.1);\n        fill(243, 196, 207);\n        rect(0,0, width\/24, height);\n        translate(width\/24,0);\n    }\n    pop();\n}\n\nfunction minutesCircle() { \/\/every minute, a new ray appears coming out of the inner circle\n    push();\n    strokeWeight(11);\n    translate(width\/2, height\/2);\n    for (var i = 0; i &lt; minute(); i ++) {\n        angleMode(DEGREES);\n        if(i % 2 == 0) { \/\/if i mod 2 is 0, then a short yellow line is drawn\n            stroke(253, 253, 150, 200);\n            line(0,0, 0, -100);\n            rotate(6);\n        }else{ \/\/ else a long orange line is drawn\n            stroke(255, 179, 71, 200);\n            line(0,0, 0, -125);\n            rotate(6);\n        }   \n    }\n    pop();\n}\n\nfunction secondsCircle() {\n        fill(173, 216, 230); \/\/creates inner blue circle\n        strokeWeight(0.1);\n        circle(width\/2, height\/2, 40);\n\n        strokeWeight(10); \/\/creates outer white circle that counts 60 seconds in a minute\n        stroke(255);\n        noFill();\n        arc(width\/2, height\/2, 250, 250, 270, 270 + second()*6);\n\n        strokeWeight(1); \/\/ creates inner circle that visually shows every second\n        fill(255);\n        arc(width\/2, height\/2, 30, 30, 270, 270 + millis()*0.36);\n}<\/code><\/pre><\/div><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>For this project, the inner circle represents every second, the outer circle shows the seconds turning to minutes, the different colored rays of the &ldquo;sun&rdquo; show the different minutes, and the pink background shows the number of hours in the day! sketch function setup() { createCanvas(350, 350); background(173, 216, 230); } function draw() { background(173, &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/10\/08\/project-06-abstract-clock-5\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project 06: Abstract-Clock&#8221;<\/span><\/a><\/p>\n","protected":false},"author":753,"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\/f2022\/wp-json\/wp\/v2\/posts\/73965"}],"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\/753"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=73965"}],"version-history":[{"count":2,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/73965\/revisions"}],"predecessor-version":[{"id":73968,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/73965\/revisions\/73968"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=73965"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=73965"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=73965"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}