{"id":67540,"date":"2021-10-11T21:41:39","date_gmt":"2021-10-12T01:41:39","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=67540"},"modified":"2021-10-11T21:41:39","modified_gmt":"2021-10-12T01:41:39","slug":"project-06-abstract-clock-15","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/10\/11\/project-06-abstract-clock-15\/","title":{"rendered":"Project 06 \u2013 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\" data-width=\"480\" data-height=\"480\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/sketch-75.js\">sketch<\/a><a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/sketch-75.js\" class=\"wp-block-file__button\" download>Download<\/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\">\/\/ this program draws a 24\/hour abacus that keeps track of day and time. \n\/\/ each row of the abacus represents a different time-telling parameter:\nvar rowHeight = [-140, -74, -8, 58, 125];\t\/\/  [month, day, hr, min, sec]\nvar rowColor;\nvar beadw = 7;\t\t\t\/\/ width of beads \n\/\/ arrays will be filled with bead objects:\nvar monthBeads = [];\nvar dayBeads = [];\nvar hrBeads = [];\nvar minBeads = [];\nvar secBeads = [];\nvar resetMonth = [];\nvar resetDay = [];\nvar resetHr = [];\nvar resetMin = [];\nvar resetSec = [];\nvar allRows = [monthBeads, dayBeads, hrBeads, minBeads, secBeads];\n\n\nfunction setup() {\n    createCanvas(480, 480);\n    background(220);\n    rectMode(CENTER);\n    \n    rowColor = [color(145, 110, 205), \t\t\/\/ [month\n\t\t\t\tcolor(200, 140, 205), \t\t\/\/  day\n\t\t\t\tcolor(145, 140, 255), \t\t\/\/  hour\n\t\t\t\tcolor(145, 185, 215), \t\t\/\/  minute\n\t\t\t\tcolor(145, 200, 130)];\t\t\/\/  second]\n\n\t\/\/ populate monthBeads array with 12 beads:\n\tfor (i=0; i&lt;12; i++) {\t\t\t\t\t\t\t\n\t\tmonthBeads[i] = {x: beadw*i, y: rowHeight[0]}\n\t\tarrayCopy(monthBeads, resetMonth);\n\t}\n\t\/\/ populate dayBeads array with 31 beads:\n\tfor (i=0; i&lt;31; i++) {\t\t\t\t\t\t\t\t\n\t\tdayBeads[i] = {x: beadw*i, y: rowHeight[1]}\n\t\tarrayCopy(dayBeads, resetDay);\n\t}\n\t\/\/ populate hrBeads array with 24 beads:\n\tfor (i=0; i&lt;24; i++) {\n\t\thrBeads[i] = {x: beadw*i, y: rowHeight[2]}\n\t\tarrayCopy(hrBeads, resetHr);\n\t}\n\t\/\/ populate minBeads array with 30 beads:\n\tfor (i=0; i&lt;30; i++) {\n\t\tminBeads[i] = {x: beadw*i, y: rowHeight[3]}\n\t\tarrayCopy(minBeads, resetMin);\n\t}\n\t\/\/ populate secBeads array with 30 beads:\n\tfor (i=0; i&lt;30; i++) {\n\t\tsecBeads[i] = {x: beadw*i, y: rowHeight[4]}\n\t\tarrayCopy(secBeads, resetSec);\n\t}\n}\n\nfunction draw() {\n\tbackground(220);\n\t\n\t\/\/center canvas\n    translate(width\/2, height\/2);\n\n    \/\/ draw frame and rows of abacus\n\tdrawAbacus();\n\t\n\t\/\/ draw all of the beads using the array for their row:\n\tfor (j=0; j&lt;allRows.length; j++) {\n\t\tsetBeads(allRows[j]);\n\t}\n\t\n\t\/\/ check the time and move the beads accordingly:\n\tmoveBeads(monthBeads, month(), 0, resetMonth);\n\tmoveBeads(dayBeads, day(), 1, resetDay);\n\tmoveBeads(hrBeads, hour(), 2, resetHr);\n\tmoveBeads(minBeads, minute(), 3, resetMin);\n\tmoveBeads(secBeads, second(), 4, resetSec);\t\n\t\/\/noLoop();\n}\n\n\/\/Draws the frame of the abacus:\nfunction drawAbacus() {\n\tfill(80, 55, 30);\n\t\/\/base:\n    quad(-195,190, 195,190, 220,215, -220,215);\n    quad(-195,190, 195,190, 200,200, -200,200);\t\n    quad(-200,200, 200,200, 220,220, -220,220);\t\n\t\/\/left post:\n    quad(-190,-200, -185,-210, -192,-210, -199,-200);\n    quad(-190,200, -185,190, -185,-210, -190,-200);\n    rect(-195, 0, 7, 400);\n\t\/\/right post:\n    quad(190,-200, 185,-210, 192,-210, 199,-200);\n    quad(190,200, 185,190, 185,-210, 190,-200);\n    rect(195, 0, 7, 400);\n    \/\/rows for beads:\n    for (i=0; i&lt;rowHeight.length; i++) {\n        rect(0, rowHeight[i], 375, 5);\n    }\n\t\/\/labels:\n\ttextSize(16);\n\ttextFont('monospace');\n\tfill(0);\n    text('month', -181, rowHeight[0]+28);\n    text('day', -181, rowHeight[1]+28);\n    text('hour', -181, rowHeight[2]+28);\n    text('minute', -181, rowHeight[3]+28);\n    text('second', -181, rowHeight[4]+28);\n}\n\n\n\/\/ draws all of the beads into their rows\nfunction setBeads(beadArray) {\n    fill(rowColor[j]);\t\t\t\t\/\/ color taken from for loop in draw function\n    strokeWeight(1.5);\n\tfor (i=0; i&lt;beadArray.length; i++) {\t\t\n\t\tif (beadArray.length == 31) { ellipse(beadArray[i].x-30, beadArray[i].y, beadw, 30) }\n\t    else if (beadArray.length == 30) { ellipse(beadArray[i].x-23, beadArray[i].y, beadw, 30) }\n\t    else if (beadArray.length == 24) { ellipse(beadArray[i].x+19, beadArray[i].y, beadw, 30) }\n\t    else if (beadArray.length == 12) { ellipse(beadArray[i].x+103, beadArray[i].y, beadw, 30) }        \n\t}\n}\n\n\/\/ checks time and moves the corresponding beads:\nfunction moveBeads(row, func, ind, rowReset) {\n\tvar dist;\n\tif (row.length == 12) {dist = 283 }\t\t\/\/different distances based on number of beads in the row\n\tif (row.length == 31) {dist = 150 }\n\tif (row.length == 24) {dist = 199 }\n\tif (row.length == 30) {dist = 157 }\n\tfor (i=0; i&lt;func; i++) {\n\t\t\/\/ the minutes and seconds beads will move every 2x they are passed bc it looks better like that:\n\t\tif (dist == 157) {\n\t\t\trow[i\/2] = {x: beadw*i\/2-dist, y: rowHeight[ind]}\n\t\t} else {\t\t\t\t\t\t\n\t\t    row[i] = {x: beadw*i-dist, y: rowHeight[ind]}\n\t\t}\n\t\t\/\/ february has 28 days:\n\t\tif (func == 28 & row.length == 31 && month()==2) { resetBeads(rowReset, monthBeads) }\n\t\t\/\/ 30 days has september, april, june, and november:\n\t\tif (func == 30 && row.length == 31 && month()==9) { resetBeads(rowReset, monthBeads) }\n\t\tif (func == 30 && row.length == 31 && month()==4) { resetBeads(rowReset, monthBeads) }\n\t\tif (func == 30 && row.length == 31 && month()==6) { resetBeads(rowReset, monthBeads) }\n\t\tif (func == 30 && row.length == 31 && month()==11) { resetBeads(rowReset, monthBeads) }\n\n\t}\n\t\/\/ once the time parameter resets to 0, so do the beads:\n\tif (func == 0) { resetBeads(rowReset, row) }\n}\n\t\t\t\n\/\/ sets the beads back to their original position, by row:\nfunction resetBeads(rowReset, row) {\n    arrayCopy(rowReset, row);\n\n}\n<\/code><\/pre><\/div>\n\n\n\n<p>This project took me way longer than I had hoped, but I am so so pleased with the outcome. After thinking about a few ideas, I decided to make an abacus because I think it would be very helpful for me personally to visualize time in that way. I struggled a lot to get the beads where they are supposed to go, but eventually I figured out how to use the arrayCopy function to my advantage. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"768\" height=\"1024\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/IMG_2079-1-768x1024.jpg\" alt=\"\" class=\"wp-image-67544\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/IMG_2079-1-768x1024.jpg 768w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/IMG_2079-1-225x300.jpg 225w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/IMG_2079-1-1152x1536.jpg 1152w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/IMG_2079-1-1536x2048.jpg 1536w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/IMG_2079-1-1200x1600.jpg 1200w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/IMG_2079-1-scaled.jpg 1920w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px\"><figcaption>initial sketch of the project<\/figcaption><\/figure><p><\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>sketchDownload \/\/ this program draws a 24\/hour abacus that keeps track of day and time. \/\/ each row of the abacus represents a different time-telling parameter: var rowHeight = [-140, -74, -8, 58, 125]; \/\/ [month, day, hr, min, sec] var rowColor; var beadw = 7; \/\/ width of beads \/\/ arrays will be filled &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/10\/11\/project-06-abstract-clock-15\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project 06 \u2013 Abstract Clock&#8221;<\/span><\/a><\/p>\n","protected":false},"author":673,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/67540"}],"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\/673"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=67540"}],"version-history":[{"count":3,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/67540\/revisions"}],"predecessor-version":[{"id":68980,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/67540\/revisions\/68980"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=67540"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=67540"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=67540"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}