{"id":74171,"date":"2022-10-09T21:29:05","date_gmt":"2022-10-10T01:29:05","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/?p=74171"},"modified":"2022-10-09T21:29:05","modified_gmt":"2022-10-10T01:29:05","slug":"project-06-abstract-clock-13","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/10\/09\/project-06-abstract-clock-13\/","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>This abstract clock uses the number of vertices in the polygon to determine the hour. The minute is represented by verticle dots and seconds are represented by the rotation of the polygon.<\/p>\n\n\n\n<div><a class=\"p5_sketch_link\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/10\/sketch-94.js\" data-width=\"400\" data-height=\"400\">sketch<\/a><iframe src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/plugins\/p5-embedder\/p5_iframe.html\" class=\"p5_exampleFrame\" width=\"400\" height=\"400\"><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/ Emily Franco\n\/\/ Section C\n\/\/ efranco@andrew.cmu.edu\n\/\/ Project-06\n \n\n\/\/twelve hr clock\nvar h;\nvar backColor;\n\nfunction setup() {\n    createCanvas(400, 400);\n\n    \/\/convert hour to 12hr cycle\n    if (hour()&gt;12){\n        h = hour()-12;\n    }else if (hour==0){\n        h = 12;\n    }else {\n        h = hour();\n    }\n\n    \/\/set background to white if daytime and black for night time\n    if(hour()&gt;=5 & hour()<=19){\n        backColor = color(215,218,219);\n    }else {\n        backColor = color(\"black\");\n    }\n\n    background (backColor);\n }\n\n\nfunction draw() { \n    \/\/draw minutes\n    minuteDots();\n    \/\/draw hours and seconds\n    polyRotate ();\n    \n} \n\n\n\/\/-----HOUR-----\n\/\/draw polygon for hour - num of vertices = hour\nfunction polygon(x,y,rad,points){\n    noFill();\n    strokeWeight(0.5);\n    var newX = 0;\n    var newY = 0;\n\n    \/\/find angle increments\n    var angle = 360\/points;\n\n    \/\/if hour is 0 than shape is an ellipse\n    if(h==0){\n        ellipse(0,0,rad*2,rad);\n    }else {\n        \/\/if house is more than 1, shape has same num of vertices\n        beginShape();\n        for(var i=0; i&lt;360; i+=angle){\n            newX = x + rad * cos(radians(i));\n            newY = y + rad * sin(radians(i));\n            vertex (newX, newY);\n        }\n        endShape(CLOSE);\n    }\n}\n\n\n\/\/-----SECOND-----\n\/\/draw rotating shape - each shape is a second\nfunction polyRotate (){\n    push();\n    translate (width\/2, height\/2);\n    var angleIncrement = 6; \n\n    \/\/map to 180 not 360 since shape has 2 sides\n    var secMap = map(second(),0,60,0,360);\n    for(var a=0; a&lt;=secMap; a=a+angleIncrement){\n        \/\/marking poly - light blue\n        \/\/drawing \"delay\"\n        if(a&gt;0){\n            push();\n            rotate(radians(a-angleIncrement));\n            stroke(12,222,245);\n            polygon(0,0,100,h);\n            pop(); \n        }\n\n        \/\/tracking poly - magenta\n        push();\n        rotate(radians(a));\n        strokeWeight(1);\n        stroke(255,13,223);\n        polygon(0,0,100,h); \n        pop();\n    }\n    pop();\n    \/\/restart seconds\n    if(second()==59){\n        background(backColor);\n    }\n}\n\n\n\/\/-----MINUTE-----\n\/\/draw dot in line for every minute\nfunction minuteDots(){\n    push();\n    translate (width\/2, 0);\n\n    \/\/map minutes to height of minutes bar\n    var minuteHeights = map(minute(),0,60,20,height-20);\n\n    \/\/draw dots\n    for (var d=20; d&lt;=minuteHeights; d= d +height\/60){\n        strokeWeight(4);\n\n        \/\/marking poly - yellow\n        \/\/drawing \"delay\"\n        if(d&gt;20){\n            stroke(237,204,14);\n            point(0,d-height\/60); \n        }\n        \n        \/\/tracking poly - magenta\n        stroke(255,13,223);\n        point(0,d); \n        \n    }\n    pop();\n\n    \/\/restart minutes\n    if(minute()&gt;=60){\n        background(backColor);\n    }\n}\n<\/code><\/pre><\/div><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>This abstract clock uses the number of vertices in the polygon to determine the hour. The minute is represented by verticle dots and seconds are represented by the rotation of the polygon. sketch \/\/ Emily Franco \/\/ Section C \/\/ efranco@andrew.cmu.edu \/\/ Project-06 \/\/twelve hr clock var h; var backColor; function setup() { createCanvas(400, 400); &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/10\/09\/project-06-abstract-clock-13\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project 06 &#8211; Abstract Clock&#8221;<\/span><\/a><\/p>\n","protected":false},"author":719,"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\/74171"}],"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\/719"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=74171"}],"version-history":[{"count":3,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/74171\/revisions"}],"predecessor-version":[{"id":75629,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/74171\/revisions\/75629"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=74171"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=74171"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=74171"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}