{"id":67185,"date":"2021-10-08T22:26:35","date_gmt":"2021-10-09T02:26:35","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=67185"},"modified":"2021-10-08T22:26:35","modified_gmt":"2021-10-09T02:26:35","slug":"project-06-abstract-clock","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/10\/08\/project-06-abstract-clock\/","title":{"rendered":"Project 06: Abstract Clock"},"content":{"rendered":"\n

sketch<\/a>\n\n\n\n<\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/Alana Wu\n\/\/ID: alanawu\n\/\/Project 06 Abstract Clock\n\n\nfunction setup()\n{\n createCanvas(400, 400);\n}\n\nfunction draw()\n{\n\/\/color of background changes by minute\n fill (minute()*5, minute()*3 + 100, 255 - minute());\n rect (0, 0, 400, 400);\n\n\/\/how many curves are drawn depends on hour\n if (hour() > 0)\n {\n anenome (100, 240, 240, 10, 65);\n }\n if (hour() > 1)\n {\n anenome (200, 255, 230, 35, 53)\n }\n if (hour() > 2)\n {\n anenome (200, 0, 200, 17, 35);\n }\n if (hour() > 3)\n {\n anenome (255, 200, 230, 25, 5);\n }\n if (hour() > 4)\n {\n anenome (255, 100, 170, 30, 75);\n }\n if (hour() > 5)\n {\n anenome (100, 240, 240, 10, 65);\n }\n if (hour() > 6)\n {\n anenome (255, 255, 200, 15, 25);\n }\n if (hour() > 7)\n {\n anenome (200, 220, 50, 25, 40);\n }\n if (hour() > 8)\n {\n anenome (150, 100, 255, 10, 85);\n }\n if (hour() > 9)\n {\n anenome (0, 200, 255, 24, 30);\n }\n if (hour() > 10)\n {\n anenome (200, 180, 255, 8, 30);\n }\n if (hour() > 11)\n {\n anenome (255, 50, 50, 28, 92);\n }\n\n\/\/draws 3 octopi, each of which display, hour, minute, or second\n octopus(mouseX, mouseY - 25, minute());\n octopus(mouseX + 30, mouseY + 25, second());\n octopus(mouseX - 30, mouseY + 25, hour());\n\n\/\/while within the canvas, waves move down each second\n waveRows(constrain (second()*25 + 50, 0, height+20));\n\n}\n\n\/\/grid of waves\nfunction waveRows (start)\n{\n red = 10;\n green = 100;\n blue = 255;\n for (var h = start; h < height + 60; h +=50)\n {\n row3(h);\n row4(h);\n }\n}\n\n\/\/horizontal row of 3 waves\nfunction row3 (y)\n{\n for (var x = 85; x <= width; x += 125)\n { \n for (var i = 5; i > 0; i--)\n {\n strokeWeight (1);\n fill (red, green, blue);\n ellipse (x, y - 25, i*20, i*20);\n red += 30;\n green += 30;\n }\n\n red = 10;\n green = 100;\n }\n}\n\n\/\/horizontal row of 4 waves\nfunction row4 (y)\n{\n for (var x = 25; x <= width; x += 125)\n { \n for (var i = 5; i > 0; i--)\n {\n strokeWeight (1);\n fill (red, green, blue);\n ellipse (x, y, i*20, i*20);\n red += 30;\n green += 30;\n }\n\n red = 10;\n green = 100;\n }\n}\n\n\/\/draws colorful wavy curve\nfunction anenome (red, green, blue, length, tilt)\n{ \n push();\n translate (10, 350);\n frameRate (6);\n rotate (radians (-tilt));\n for (var n = 0; n < 10; n++)\n {\n for (var x = 0; x < length; x += .1)\n {\n noStroke();\n fill (red, green, blue);\n circle (x*20 + random (0,15), -25*cos(x) + random (0, 15), 13-x); \n\n }\n }\n pop ();\n}\n\n\/\/draws octopus w\/ a color that changes by the minute\nfunction octopus (x, y, time)\n{\n noStroke();\n fill (minute()*10, 255 - minute(), 250);\n ellipse (x, y, 50, 40);\n for (var i = 0; i < 5; i++)\n {\n push();\n translate (x, y);\n rotate (radians (i*15 - 29));\n ellipse (15 - i*6.8, 22, 10, 20);\n pop();\n }\n fill (0);\n ellipse (x - 12, y + 2, 8, 8);\n ellipse (x + 12, y + 2, 8, 8);\n noFill();\n stroke(0);\n arc (x, y+7, 8, 8, 0, PI, OPEN);\n strokeWeight (1);\n textSize (10);\n text (time, x - 14, y - 6);\n\n}\n\n<\/code><\/pre><\/p><p>In this project, the abstract waves change by second, the three octopi reflect the time, the number of colorful curves (I was originally thinking anemone, but it really didn’t translate and I liked these anyways) change by the hour, and the colors of the background and the octopi change as the time changes. <\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>sketch \/\/Alana Wu \/\/ID: alanawu \/\/Project 06 Abstract Clock function setup() { createCanvas(400, 400); } function draw() { \/\/color of background changes by minute fill (minute()*5, minute()*3 + 100, 255 – minute()); rect (0, 0, 400, 400); \/\/how many curves are drawn depends on hour if (hour() > 0) { anenome (100, 240, 240, 10, … <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/10\/08\/project-06-abstract-clock\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> “Project 06: Abstract Clock”<\/span><\/a><\/p>\n","protected":false},"author":677,"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\/f2021\/wp-json\/wp\/v2\/posts\/67185"}],"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\/677"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=67185"}],"version-history":[{"count":3,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/67185\/revisions"}],"predecessor-version":[{"id":67190,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/67185\/revisions\/67190"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=67185"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=67185"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=67185"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}