{"id":642,"date":"2022-02-08T23:12:56","date_gmt":"2022-02-09T04:12:56","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/?p=642"},"modified":"2022-02-08T23:12:56","modified_gmt":"2022-02-09T04:12:56","slug":"starry-timepiece","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/starry\/02\/08\/starry-timepiece\/","title":{"rendered":"starry &#8211; timepiece"},"content":{"rendered":"<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-649\" src=\"https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-content\/uploads\/2022\/02\/Screenshot-2022-02-08-161101-640x377.png\" alt=\"\" width=\"640\" height=\"377\" srcset=\"https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-content\/uploads\/2022\/02\/Screenshot-2022-02-08-161101-640x377.png 640w, https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-content\/uploads\/2022\/02\/Screenshot-2022-02-08-161101-1024x603.png 1024w, https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-content\/uploads\/2022\/02\/Screenshot-2022-02-08-161101-768x452.png 768w, https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-content\/uploads\/2022\/02\/Screenshot-2022-02-08-161101.png 1046w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px\" \/><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-650\" src=\"https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-content\/uploads\/2022\/02\/Screenshot-2022-02-08-161021-640x378.png\" alt=\"\" width=\"640\" height=\"378\" srcset=\"https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-content\/uploads\/2022\/02\/Screenshot-2022-02-08-161021-640x378.png 640w, https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-content\/uploads\/2022\/02\/Screenshot-2022-02-08-161021-1024x604.png 1024w, https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-content\/uploads\/2022\/02\/Screenshot-2022-02-08-161021-768x453.png 768w, https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-content\/uploads\/2022\/02\/Screenshot-2022-02-08-161021.png 1042w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px\" \/><\/p>\n<p>Project link : <a href=\"https:\/\/openprocessing.org\/sketch\/1468582\">https:\/\/openprocessing.org\/sketch\/1468582<\/a><\/p>\n<p>My project was inspired by the shadows of the tree outside my dorm; I\u2019ve always been interested artistically in how light and shadow change colors depending on the time of day. I thought the clock prompt was appropriate for exploring this concept given the history of timekeeping; I wanted to explore how people in medieval eras thought about time before the move towards accurate and precise timekeeping, how their activities were not divided into rigid blocks of time but more guided by the sun\u2019s position. I didn\u2019t want to include a numerical representation of time, and instead wanted the viewer to be able to interpret the time based off the color of the light and shadow, which are all distinct depending on the time of day. The project\u2019s visuals are mainly created using lerpColor and various blend modes, and the leaves and shadows are created using Perlin noise. The colors lerp through various time periods of the day (morning, afternoon, sunset etc.).<\/p>\n<p>The final project was my third attempt at the piece; my first two attempts were with the WebGL mode and the default 3D primitives, and my second was with Three.js. I ended up switching into 2D because I thought 3D visuals would have less artistic control over the light and shadow. I liked how certain times of day came out in the final result (the evening period from 4PM \u2013 6PM, and the afternoon from 12 \u2013 4PM), and overall I\u2019m happy with the result, but I think some of the colors could be tweaked to be more accurate. I struggled a lot with getting the colors right as well as the visual style of the leaves; I\u2019m still not very happy with how they look. In addition, I didn\u2019t really know what to do with the shadows because they remain the same even though they should change depending on the rotation of the sun, but it was too difficult to calculate that. My main struggle was being unable to determine what was wrong visually with the piece; most of the time I only had a vague sense that something looked bad but was unable to pinpoint what it was exactly.<\/p>\n<p>Video (sped up time)<\/p>\n<p><iframe loading=\"lazy\" title=\"sun shadows\" width=\"840\" height=\"630\" src=\"https:\/\/www.youtube.com\/embed\/3gRJTp3bnq0?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-655\" src=\"https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-content\/uploads\/2022\/02\/CamScanner-02-08-2022-22.44_1-342x480.jpg\" alt=\"\" width=\"342\" height=\"480\" srcset=\"https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-content\/uploads\/2022\/02\/CamScanner-02-08-2022-22.44_1-342x480.jpg 342w, https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-content\/uploads\/2022\/02\/CamScanner-02-08-2022-22.44_1-729x1024.jpg 729w, https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-content\/uploads\/2022\/02\/CamScanner-02-08-2022-22.44_1-768x1079.jpg 768w, https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-content\/uploads\/2022\/02\/CamScanner-02-08-2022-22.44_1-1094x1536.jpg 1094w, https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-content\/uploads\/2022\/02\/CamScanner-02-08-2022-22.44_1-1458x2048.jpg 1458w, https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-content\/uploads\/2022\/02\/CamScanner-02-08-2022-22.44_1-1200x1685.jpg 1200w, https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-content\/uploads\/2022\/02\/CamScanner-02-08-2022-22.44_1-scaled.jpg 1823w\" sizes=\"(max-width: 342px) 85vw, 342px\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Project link : https:\/\/openprocessing.org\/sketch\/1468582 My project was inspired by the shadows of the tree outside my dorm; I\u2019ve always been interested artistically in how light and shadow change colors depending on the time of day. I thought the clock prompt was appropriate for exploring this concept given the history of timekeeping; I wanted to explore &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/starry\/02\/08\/starry-timepiece\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;starry &#8211; timepiece&#8221;<\/span><\/a><\/p>\n","protected":false},"author":15,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[9],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-json\/wp\/v2\/posts\/642"}],"collection":[{"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-json\/wp\/v2\/users\/15"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-json\/wp\/v2\/comments?post=642"}],"version-history":[{"count":1,"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-json\/wp\/v2\/posts\/642\/revisions"}],"predecessor-version":[{"id":656,"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-json\/wp\/v2\/posts\/642\/revisions\/656"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-json\/wp\/v2\/media?parent=642"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-json\/wp\/v2\/categories?post=642"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-json\/wp\/v2\/tags?post=642"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}