{"id":67321,"date":"2021-10-10T00:02:14","date_gmt":"2021-10-10T04:02:14","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=67321"},"modified":"2021-10-10T00:02:14","modified_gmt":"2021-10-10T04:02:14","slug":"project-6-abstract-clock-4","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/10\/10\/project-6-abstract-clock-4\/","title":{"rendered":"Project 6: 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><div class=\"wp-block-file\"><a class=\"p5_sketch_link\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/wpf-abstract-clock.js\" data-width=\"600\" data-height=\"600\">wpf-abstract-clock.js<\/a><iframe src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/plugins\/p5-embedder\/p5_iframe.html\" class=\"p5_exampleFrame\" width=\"600\" height=\"600\"><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/Patrick Fisher, Section B, wpf@andrew.cmu.edu Assignment-06-project\nvar cloudVar = []; \/\/array for cloud x coordinate\nvar rainVar = []; \/\/array for cloud y coordinate\nvar hourTime; \/\/variable to store hour\nvar minuteTime; \/\/vairable to store minute\nfunction setup() {\n    createCanvas(600, 600);\n\n    }\nfunction draw(){\n    background(155);\n    hourTime = hour();\n    minuteTime = minute();\n    for(var i = 0; i &lt;= 23; i++){ \/\/sets cloud x position by mapping the current second of the day to an x value on the canvas\n        cloudVar[i] =  map((second()+(60*minute())+(60*60*(hour()-i))),0,(24-i)*60*60,-105,width);\n    }\n\n    for(i = 0; i &lt;= 59; i++){ \/\/sets the rain y position my mapping the current second of the hour to a y value on the canvas\n        rainVar[i] = map((second()+60*(minute()-i)),0,(60-i)*60,-12,height+10)\n    }\n\n    for(var counter = 0; counter &lt;= 23; counter ++) { \/\/for loop that checks how many hours into the day it is and draws that many clouds with the stored x values and each hour that has passed\n        if(hourTime &gt;= counter){\n            drawCloud(cloudVar[counter],counter);\n        }\n    }\n\n    for(var counter = 0; counter &lt;= 59; counter ++) { \/\/for loop that checks how many minutes into the hour it is and draws that many rain drops with the stored y values and each minute that has passed\n        if(minuteTime &gt;= counter){\n            drawRain(rainVar[counter],counter);\n        }\n    }\n}\n\nfunction drawCloud(x,counter) { \/\/function to draw clouds\n    var y; \/\/long amount of if statements to set the y coordinate\n    if(counter == 0) {\n        y = 50\n    }\n    else if(counter == 1) {\n        y = 150\n    }\n    else if(counter == 2) {\n        y = 250\n    }\n    else if(counter == 3) {\n        y = 350\n    }\n    else if(counter == 4) {\n        y = 450\n    }\n    else if(counter == 5) {\n        y = 550\n    }\n    else if(counter == 6) {\n        y = 50\n    }\n    else if(counter == 7) {\n        y = 150\n    }\n    else if(counter == 8) {\n        y = 250\n    }\n    else if(counter == 9) {\n        y = 350\n    }\n    else if(counter == 10) {\n        y = 450\n    }\n    else if(counter == 11) {\n        y = 550\n    }\n    else if(counter == 12) {\n        y = 50\n    }\n    else if(counter == 13) {\n        y = 150\n    }\n    else if(counter == 14) {\n        y = 250\n    }\n    else if(counter == 15) {\n        y = 350\n    }\n    else if(counter == 16) {\n        y = 450\n    }\n    else if(counter == 17) {\n        y = 550\n    }\n    else if(counter == 18) {\n        y = 50\n    }\n    else if(counter == 19) {\n        y = 150\n    }\n    else if(counter == 20) {\n        y = 250\n    }\n    else if(counter == 21) {\n        y = 350\n    }\n    else if(counter == 22) {\n        y = 450\n    }\n    else if(counter == 23) {\n        y = 550\n    }\n\n    fill(255);  \/\/series of ellipses that draws the cloud\n    ellipse(x,y,60,50);\n    ellipse(x+30,y-10,60,50);\n    ellipse(x+80,y,60,50);\n    ellipse(x+20,y+20,60,50);\n    ellipse(x+60,y+15,60,50);\n    push();\n    noStroke();\n    ellipse(x+40,y+10,100,55)\n    pop();\n}\nfunction drawRain(y,counter) { \/\/function to draw rain\n        var x; \/\/insanely long amount of if statements, like seriously there has to be an easier way to do this, to have the raindrops fall in a \"random\" pattern\n        if(counter == 0) {\n        x = 5;\n        }\n        if(counter == 39) {\n        x = 15;\n        }\n        if(counter == 20) {\n        x = 25;\n        }if(counter == 2) {\n        x = 35;\n        }\n        if(counter == 48) {\n        x = 45;\n        }if(counter == 38) {\n        x = 55;\n        }\n        if(counter == 59){\n        x = 65;\n        }\n        if(counter == 23) {\n        x = 75;\n        }\n        if(counter == 19) {\n        x = 85;\n        }\n        if(counter == 21) {\n        x = 95;\n        }\n        if(counter == 47) {\n        x = 105;\n        }\n        if(counter == 24) {\n        x = 115;\n        }\n        if(counter == 1) {\n        x = 125;\n        }\n        if(counter == 27) {\n        x = 135;\n        }\n        if(counter == 25) {\n        x = 145;\n        }\n        if(counter == 37) {\n        x = 155;\n        }\n        if(counter == 49) {\n        x = 165;\n        }\n        if(counter == 3) {\n        x = 175;\n        }\n        if(counter == 28) {\n        x = 185;\n        }\n        if(counter == 46) {\n        x = 195;\n        }\n        if(counter == 58) {\n        x = 205;\n        }\n        if(counter == 57) {\n        x = 215;\n        }\n        if(counter == 50) {\n        x = 225;\n        }\n        if(counter == 36) {\n        x = 235;\n        }\n        if(counter == 45) {\n        x = 245;\n        }\n        if(counter == 9) {\n        x = 255;\n        }\n        if(counter == 35) {\n        x = 265;\n        }\n        if(counter == 5) {\n        x = 275;\n        }\n        if(counter == 51) {\n        x = 285;\n        }\n        if(counter == 40) {\n        x = 295;\n        }\n        if(counter == 17) {\n        x = 305;\n        }\n        if(counter == 13) {\n        x = 315;\n        }\n        if(counter == 22) {\n        x = 325;\n        }\n        if(counter == 16) {\n        x = 335;\n        }\n        if(counter == 34) {\n        x = 345;\n        }\n        if(counter == 4) {\n        x = 355;\n        }\n        if(counter == 29) {\n        x = 365;\n        }\n        if(counter == 12) {\n        x = 375;\n        }\n        if(counter == 56) {\n        x = 385;\n        }\n        if(counter == 55) {\n        x = 395;\n        }\n        if(counter == 11) {\n        x = 405;\n        }\n        if(counter == 26) {\n        x = 415;\n        }\n        if(counter == 15) {\n        x = 425;\n        }\n        if(counter == 33) {\n        x = 435;\n        }\n        if(counter == 41) {\n        x = 445;\n        }\n        if(counter == 44) {\n        x = 455;\n        }\n        if(counter == 30) {\n        x = 465;\n        }\n        if(counter == 10) {\n        x = 475;\n        }\n        if(counter == 6) {\n        x = 485;\n        }\n        if(counter == 18) {\n        x = 495;\n        }\n        if(counter == 42) {\n        x = 505;\n        }\n        if(counter == 14) {\n        x = 515;\n        }\n        if(counter == 52) {\n        x = 525;\n        }\n        if(counter == 7) {\n        x = 535;\n        }\n        if(counter == 53) {\n        x = 545;\n        }\n        if(counter == 31) {\n        x = 555;\n        }\n        if(counter == 8) {\n        x = 565;\n        }\n        if(counter == 54) {\n        x = 575;\n        }\n        if(counter == 43) {\n        x = 585;\n        }\n        if(counter == 32) {\n        x = 595;\n        }\n\n        fill(0,0,255); \/\/draws a small ellipse as a rain drop\n        ellipse(x,y,7,30)\n}<\/code><\/pre><\/div>\n\n\n\n<p>This project was a lot of fun but very challenging. I came up with my idea fairly early on (I was brainstorming and listening to storm sounds). The amount of clouds is the amount of hours in the day, including a cloud for 0:00, and the amount of rain drops is how many minutes it has been in the day, including a drop for minute 0. The drops fall from the top and the clouds move left to right, with their positions being updated every second. I had to do a lot of algebra to have working formulas for the dynamic positions and ran into a lot of bugs when it came to keeping track of so many variables. My sketches became very incoherent very quickly. I also ended up writing an insane amount of for statements which was not good. If I could do this project again I would try to figure out a way to do what the if statements accomplished with some sort of loop.<\/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\/IMG_1715-1024x768.jpeg\" alt=\"\" class=\"wp-image-67329\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/IMG_1715-1024x768.jpeg 1024w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/IMG_1715-300x225.jpeg 300w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/IMG_1715-768x576.jpeg 768w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/IMG_1715-1536x1152.jpeg 1536w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/IMG_1715-2048x1536.jpeg 2048w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/IMG_1715-1200x900.jpeg 1200w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\"><\/figure><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\/IMG_1716-1024x768.jpeg\" alt=\"\" class=\"wp-image-67330\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/IMG_1716-1024x768.jpeg 1024w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/IMG_1716-300x225.jpeg 300w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/IMG_1716-768x576.jpeg 768w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/IMG_1716-1536x1152.jpeg 1536w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/IMG_1716-2048x1536.jpeg 2048w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/IMG_1716-1200x900.jpeg 1200w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\"><\/figure><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>wpf-abstract-clock.js \/\/Patrick Fisher, Section B, wpf@andrew.cmu.edu Assignment-06-project var cloudVar = []; \/\/array for cloud x coordinate var rainVar = []; \/\/array for cloud y coordinate var hourTime; \/\/variable to store hour var minuteTime; \/\/vairable to store minute function setup() { createCanvas(600, 600); } function draw(){ background(155); hourTime = hour(); minuteTime = minute(); for(var i = &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/10\/10\/project-6-abstract-clock-4\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project 6: Abstract Clock&#8221;<\/span><\/a><\/p>\n","protected":false},"author":648,"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\/f2021\/wp-json\/wp\/v2\/posts\/67321"}],"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\/648"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=67321"}],"version-history":[{"count":4,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/67321\/revisions"}],"predecessor-version":[{"id":67331,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/67321\/revisions\/67331"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=67321"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=67321"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=67321"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}