{"id":5214,"date":"2020-09-16T14:40:15","date_gmt":"2020-09-16T18:40:15","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/?p=5214"},"modified":"2020-09-16T20:27:51","modified_gmt":"2020-09-17T00:27:51","slug":"gregariosa-clock","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/yoonjuhandrew-cmu-edu\/09\/16\/gregariosa-clock\/","title":{"rendered":"gregariosa-Clock"},"content":{"rendered":"<h6><a href=\"https:\/\/editor.p5js.org\/gregariosa\/full\/_JTUHBHPg\">Matroyshka clock<\/a><\/h6>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-5215\" src=\"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/Sep-16-2020-11-22-27.gif\" alt=\"\" width=\"480\" height=\"357\" \/><\/p>\n<p>For this project, I wanted to explore how the idea of rebirth and growth can be expressed through time. I chose the matroyshka dolls for inspiration, as the nesting of these dolls resemble how the concept of time is relative, yet it still feels like a &#8220;continuous&#8221; cycle.<\/p>\n<p>To read the time: the number of red matroyshkas on the left represent the hours. The number of blue dots represent the minutes (it makes a full circle when it reaches an hour.) And the overlapping blue dolls represent the seconds. (The seconds refresh themselves after a minute passes.)<\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-5216\" src=\"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/Sep-16-2020-11-25-43.gif\" alt=\"\" width=\"480\" height=\"357\" \/><\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-5217\" src=\"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/Sep-16-2020-11-28-42.gif\" alt=\"\" width=\"480\" height=\"357\" \/><\/p>\n<p>Overall, I&#8217;m not too satisfied with the outcome. I had initially wanted the top and bottom to be separated at an interval, to show how the dolls are nested within each other. However, I spent too much of my time trying to craft a good &#8220;rocking motion&#8221; that I couldn&#8217;t figure out a stable solution for my initial goal. My lack of experience with object oriented programming contributed too. I spent a lot of time conceptually understanding how my code operates, rather than deftly making progress to the project. As a result, I compromised the outcome by overlapping the dolls on top of each other.<\/p>\n<p>While I don&#8217;t love the outcome, I learned a lot about how motion is conveyed through code in this project. I learned about the pendulum motion, sinusoidal movements, physics behind roly poly toys, etc. to inform my decisions. I hope to apply these findings to better convey my thoughts in future projects.<\/p>\n<p><strong>Process:<\/strong><\/p>\n<p>I had two initial project directions:<\/p>\n<ol>\n<li>Create a circle of &#8220;sand&#8221; with 24 points on the circumference. For every hour, a point travels into the circle to make shifts and turns, changing its direction every minute and chugging through the sand every second. By the 24th hour, an intricate blob of lines is formed, where each &#8220;hour line&#8221; interacts with each other in space, but never collides. (I wanted to convey how the hours in the day overlap and form an entirely new picture everyday.)<\/li>\n<li>The matryoshka doll idea. Create an animation where a new doll is born at every interval, to indicate the &#8220;rebirth&#8221; of time, and our existence.<\/li>\n<\/ol>\n<p>(Below are sketches of those ideas.)<\/p>\n<p><strong><img loading=\"lazy\" class=\"alignnone size-medium wp-image-5222\" src=\"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/IMG_20200916_113343-360x480.jpg\" alt=\"\" width=\"360\" height=\"480\" srcset=\"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/IMG_20200916_113343-360x480.jpg 360w, https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/IMG_20200916_113343-768x1024.jpg 768w, https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/IMG_20200916_113343-1152x1536.jpg 1152w, https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/IMG_20200916_113343-1536x2048.jpg 1536w, https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/IMG_20200916_113343-1200x1600.jpg 1200w, https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/IMG_20200916_113343-scaled.jpg 1920w\" sizes=\"(max-width: 360px) 85vw, 360px\" \/><\/strong><\/p>\n<p>While I was intrigued by the first idea&#8217;s concept, I had to consider the context in which the first project would be in. A messy blob of lines can be hard to appreciate in a public display, while big solid objects are easier to comprehend. As such, I decided to go with the second idea, in consideration of the context that this project will be in. (I was also not confident that drawing smooth curvy lines that don&#8217;t collide into each other was doable under the time constraints.)<\/p>\n<p>Below are some notes to consider the animation of the piece. It was interesting that many of my considerations were far from what would be executed. I thought a staggered mountain of bowls would be created, and I only realized after programming that such mountain isn&#8217;t physically possible.<\/p>\n<p><strong><img loading=\"lazy\" class=\"alignnone size-medium wp-image-5221\" src=\"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/IMG_20200916_113323-360x480.jpg\" alt=\"\" width=\"360\" height=\"480\" srcset=\"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/IMG_20200916_113323-360x480.jpg 360w, https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/IMG_20200916_113323-768x1024.jpg 768w, https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/IMG_20200916_113323-1152x1536.jpg 1152w, https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/IMG_20200916_113323-1536x2048.jpg 1536w, https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/IMG_20200916_113323-1200x1600.jpg 1200w, https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/IMG_20200916_113323-scaled.jpg 1920w\" sizes=\"(max-width: 360px) 85vw, 360px\" \/> \u00a0<\/strong><\/p>\n<p>I don&#8217;t have too many iterations for this project on code, as I spent a lot more time calculating things on paper than coding stuff out.<\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-medium wp-image-5283\" src=\"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/IMG_20200916_172344-640x480.jpg\" alt=\"\" width=\"640\" height=\"480\" srcset=\"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/IMG_20200916_172344-640x480.jpg 640w, https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/IMG_20200916_172344-1024x768.jpg 1024w, https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/IMG_20200916_172344-768x576.jpg 768w, https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/IMG_20200916_172344-1536x1152.jpg 1536w, https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/IMG_20200916_172344-2048x1536.jpg 2048w, https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/IMG_20200916_172344-1200x900.jpg 1200w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px\" \/><\/p>\n<p>(Last note: I enjoyed using Lerpcolor and svg strings to make nice color combinations, like this one below:)<\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-medium wp-image-5282\" src=\"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/Screen-Shot-2020-09-16-at-5.22.27-PM-483x480.png\" alt=\"\" width=\"483\" height=\"480\" srcset=\"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/Screen-Shot-2020-09-16-at-5.22.27-PM-483x480.png 483w, https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/Screen-Shot-2020-09-16-at-5.22.27-PM-1024x1017.png 1024w, https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/Screen-Shot-2020-09-16-at-5.22.27-PM-150x150.png 150w, https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/Screen-Shot-2020-09-16-at-5.22.27-PM-768x763.png 768w, https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/Screen-Shot-2020-09-16-at-5.22.27-PM.png 1176w\" sizes=\"(max-width: 483px) 85vw, 483px\" \/><\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Matroyshka clock For this project, I wanted to explore how the idea of rebirth and growth can be expressed through time. I chose the matroyshka dolls for inspiration, as the nesting of these dolls resemble how the concept of time is relative, yet it still feels like a &#8220;continuous&#8221; cycle. To read the time: the &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/yoonjuhandrew-cmu-edu\/09\/16\/gregariosa-clock\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;gregariosa-Clock&#8221;<\/span><\/a><\/p>\n","protected":false},"author":47,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[49],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-json\/wp\/v2\/posts\/5214"}],"collection":[{"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-json\/wp\/v2\/users\/47"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-json\/wp\/v2\/comments?post=5214"}],"version-history":[{"count":3,"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-json\/wp\/v2\/posts\/5214\/revisions"}],"predecessor-version":[{"id":5284,"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-json\/wp\/v2\/posts\/5214\/revisions\/5284"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-json\/wp\/v2\/media?parent=5214"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-json\/wp\/v2\/categories?post=5214"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-json\/wp\/v2\/tags?post=5214"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}