{"id":67195,"date":"2021-10-09T12:07:46","date_gmt":"2021-10-09T16:07:46","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=67195"},"modified":"2021-10-09T12:07:46","modified_gmt":"2021-10-09T16:07:46","slug":"random-time","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/10\/09\/random-time\/","title":{"rendered":"Random Time"},"content":{"rendered":"\n

I must say this design happened a bit by accident. I was trying to make it so that based on my clock motions, particularly of the dot that represents the second hand, that I would have moving dots around it that would change position using noise. During this process because of how I was doing my rotations using frameCount, I ended up creating this instead. I liked it so much on the second hand I used it for my hour and minute to create the moving circles. They move very fast but sometimes it will show down and the hour and minute circles will intersect and I think it is very beautiful. <\/p>\n\n\n\n

\"\" — thought process before accident<\/figcaption><\/figure>
sketch<\/a>file<\/a><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/Georgia Miller\n\/\/15-104\n\/\/section d\n\nvar w; \nvar seconds; \nvar minutes;\nvar hours;\n\nfunction setup() {\n createCanvas(480, 480);\n background(220);\n var radius = min(width, height) \/ 2;\n seconds = radius * 0.71; \/\/radius measurements for circle shape\n minutes = radius * 0.5;\n hours = radius * 0.5;\n w = width \/ 2;\n}\n\n\nfunction draw() {\n background(255);\n var s = map(second(), 0, 60, 0, TWO_PI) - HALF_PI; \/\/for second\n var m = map(minute() + norm(second(), 0, 60), 0, 60, 0, TWO_PI) - HALF_PI; \/\/for minute\n var h = map(hour() + norm(minute(), 0, 60), 0, 24, 0, TWO_PI * 2) - HALF_PI; \/\/for hour\n push();\nfor(var elhour = 0; elhour < 50; elhour++){ \/\/create circles around hour circle\n \/\/frameRate(30);\n translate(w + cos(h) * hours, w + sin(h) * hours);\n rotate(frameCount\/1000);\n stroke(0)\n fill(120, 0, 120);\n ellipse(35, 0, 30, 30);\n fill(140, 0, 140);\n ellipse(0, 35, 30, 30);\n fill(160, 0, 160);\n ellipse(35, 35, 30, 30)\n fill(160, 0, 160);\n ellipse(-35, -35, 30, 30);\n fill(180, 0, 180);\n ellipse(0, -35, 30, 30);\n fill(200, 0, 200);\n ellipse(-35, 0, 30, 30);\n fill(220, 0, 220);\n ellipse(35, -35, 30, 30);\n fill(240, 0, 240);\n ellipse(-35, 35, 30, 30);\n}\npop();\npush();\n for(var elmin = 0; elmin < 50; elmin++){ \/\/create circles around minute circle\n translate(w + cos(m) * minutes, w + sin(m) * minutes);\n rotate(frameCount\/800);\n stroke(0)\n fill(150, 75, 0);\n ellipse(25, 0, 20, 20);\n fill(200, 100, 0);\n ellipse(0, 25, 20, 20);\n fill(250, 130, 0);\n ellipse(25, 25, 20, 20)\n fill(255, 150, 50);\n ellipse(-25, -25, 20, 20);\n fill(150, 75, 0);\n ellipse(0, -25, 20, 20);\n fill(200, 100, 0);\n ellipse(-25, 0, 20, 20);\n fill(255, 130, 0);\n ellipse(25, -25, 20, 20);\n fill(255, 150, 50);\n ellipse(-25, 25, 20, 20);\n}\npop();\n push();\n for(var elsec = 0; elsec < 50; elsec++){ \/\/create circles around second circle\n translate(w + cos(s) * seconds, w + sin(s) * seconds);\n rotate(frameCount\/500);\n stroke(0)\n fill(100, 0, 0);\n ellipse(15, 0, 10, 10);\n fill(120, 0, 0);\n ellipse(0, 15, 10, 10);\n fill(140, 0, 0);\n ellipse(15, 15, 10, 10)\n fill(160, 0, 0);\n ellipse(-15, -15, 10, 10);\n fill(180, 0, 0);\n ellipse(0, -15, 10, 10);\n fill(200, 0, 0);\n ellipse(-15, 0, 10, 10);\n fill(220, 0, 0);\n ellipse(15, -15, 10, 10);\n fill(240, 0, 0);\n ellipse(-15, 15, 10, 10);\n }\n pop();\n stroke(0);\n fill(255);\n ellipse(w + cos(s) * seconds, w + sin(s) * seconds, 10, 10); \/\/second circle\n ellipse(w + cos(m) * minutes, w + sin(m) * minutes, 20, 20); \/\/minute circle\n ellipse(w + cos(h) * hours, w + sin(h) * hours, 30, 30); \/\/hour circle\n}\n<\/code><\/pre><\/p><p><\/p>\">\n\n\n\n<p><\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>I must say this design happened a bit by accident. I was trying to make it so that based on my clock motions, particularly of the dot that represents the second hand, that I would have moving dots around it that would change position using noise. During this process because of how I was doing … <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/10\/09\/random-time\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> “Random Time”<\/span><\/a><\/p>\n","protected":false},"author":660,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[106,58,1],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/67195"}],"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\/660"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=67195"}],"version-history":[{"count":1,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/67195\/revisions"}],"predecessor-version":[{"id":67200,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/67195\/revisions\/67200"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=67195"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=67195"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=67195"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}