{"id":277,"date":"2023-09-20T17:06:08","date_gmt":"2023-09-20T17:06:08","guid":{"rendered":"https:\/\/golancourses.net\/fall23\/?page_id=277"},"modified":"2023-09-24T17:19:43","modified_gmt":"2023-09-24T17:19:43","slug":"05-time","status":"publish","type":"page","link":"https:\/\/golancourses.net\/fall23\/deliverables\/05-time\/","title":{"rendered":"05. Time"},"content":{"rendered":"<p><em>These three exercises are due Monday, October 2nd. There are two creative coding projects, and some readings. <\/em><em>For the sake of time management, <strong>it is recommended<\/strong> that you complete the <strong>Rhythm Loop<\/strong> project by the end of class on Wednesday, 9\/27.<\/em><\/p>\n<ol>\n<li>OpenProcessing: Rhythm Loop: 2 Hours, 30%<\/li>\n<li>Discord: Timekeeping Readings: 1 Hour, 10%<\/li>\n<li>OpenProcessing: Timepiece: 6 Hours, 60%<\/li>\n<\/ol>\n<hr \/>\n<h3>1. Rhythm Loop<\/h3>\n<p><strong><em>(2 hours, 30%)<\/em><\/strong> In this mini-project, you will explore time-based visual rhythm by writing code to create a seamlessly looping, animated GIF. This is a mini-project, so <em>keep it simple<\/em>. The learning goals for this project are for you to develop command of time-based computational graphics, and sensitivity to temporal rhythm.<\/p>\n<p><strong>You have two required deliverables for this project<\/strong>, as follows:<\/p>\n<ol>\n<li><strong>A <a href=\"https:\/\/openprocessing.org\/class\/86356\">p5.js program on OpenProcessing<\/a>.<\/strong> Your animation should be square (640\u00d7640), between 30-300 frames long, and use no more than 4 flat colors. Using this, you must also generate&#8230;.<\/li>\n<li><span style=\"text-decoration: underline;\"><strong>An animated GIF generated by your p5.js program<\/strong><\/span>. This GIF must be <em>seamless<\/em>. (Can you do that? As simple as it sounds, many students are unable to achieve this.) Optimize your GIF so that it is under 8MB in file size. Publish this animated GIF in a Discord post in the<strong> #<em>rhythmloop<\/em><\/strong> channel, along with a few reflective sentences about your project.<\/li>\n<\/ol>\n<p><em>Recommendations<\/em>:<\/p>\n<ul>\n<li><strong>Check out the work<\/strong> of professional loopmakers like <a href=\"https:\/\/www.instagram.com\/davebeesbombs\/\">Bees and Bombs<\/a>, <a href=\"https:\/\/objkt.com\/profile\/tz1UtTasn4DTyb9rHYnLAjxSQHfkvAWtBbAQ\/created\">Melissa Rodriguez<\/a>, <a href=\"https:\/\/cargocollective.com\/cindysuen\">Cindy Suen<\/a>, <a href=\"https:\/\/www.instagram.com\/lucas_zanotto\/?hl=en\">Lucas Zanotto<\/a>, <a href=\"https:\/\/andreaswannerstedt.se\/projects\">Andreas Wannerstedt,<\/a> <a href=\"https:\/\/bleuje.com\/animationsite\/\">Etienne Jacob<\/a>, <a href=\"https:\/\/patakk.tumblr.com\/\">Paolo Ceric<\/a>, <a href=\"https:\/\/www.instagram.com\/dvdp\/\">DVDP<\/a>. Seriously, do it.<\/li>\n<li><strong>To make interesting non-linear movement,<\/strong> I recommend you use the <a href=\"https:\/\/idmnyu.github.io\/p5.js-func\/\">p5.func<\/a> library, which provides shaping and easing functions.<\/li>\n<li><strong>For a place to start,<\/strong> consider working with the human walking loops in <a href=\"https:\/\/github.com\/tetunori\/BMWalker.js\">BMWalker.js<\/a>; there&#8217;s a full-featured <a href=\"https:\/\/openprocessing.org\/sketch\/1543496\">p5 demo here<\/a>, and a <a href=\"https:\/\/openprocessing.org\/sketch\/2018924\">simplified GIF-exporting demo here<\/a>:<br \/>\n<a href=\"https:\/\/openprocessing.org\/sketch\/2018924\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-329\" src=\"https:\/\/golancourses.net\/fall23\/wp-content\/uploads\/2023\/09\/bmwalker-loop.gif\" alt=\"\" width=\"320\" height=\"320\" \/><\/a><\/li>\n<li><strong>To generate the GIF,<\/strong> I recommend that you use the <a href=\"https:\/\/www.npmjs.com\/package\/p5.createloop\">p5.createLoop<\/a> library to create a looping timer and export the animation. (This library can also provide seamlessly looping Perlin noise.) It&#8217;s also possible to export the GIF using the p5 <a href=\"https:\/\/p5js.org\/reference\/#\/p5\/saveGif\">saveGif()<\/a> command, or the OpenProcessing Record feature (available under the Share button)&#8230;but you&#8217;ll need to do more work to ensure that the results are <em>seamless<\/em>.<\/li>\n<li><strong>To optimize your GIF,<\/strong> I recommend you use <a href=\"https:\/\/ezgif.com\/optimize\">ezgif.com<\/a>.<\/li>\n<li><a href=\"https:\/\/openprocessing.org\/sketch\/2018078\"><strong>Here&#8217;s a template program<\/strong><\/a> that shows how to use p5.createLoop and p5.func together.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/openprocessing.org\/sketch\/2018078\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-309\" src=\"https:\/\/golancourses.net\/fall23\/wp-content\/uploads\/2023\/09\/cd47ce5a-5398-4522-a5f7-d6cdb65e90e0.gif\" alt=\"\" width=\"320\" height=\"320\" \/><\/a><\/p>\n<p><em>Here are some loops made by previous students in this course (Nik Diamant, Alyssa Lee, Paul Park):<\/em><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-299\" src=\"https:\/\/golancourses.net\/fall23\/wp-content\/uploads\/2023\/09\/dinkolas-AnimatedLoop.gif\" alt=\"\" width=\"250\" height=\"250\" \/> <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-300\" src=\"https:\/\/golancourses.net\/fall23\/wp-content\/uploads\/2023\/09\/nogradient.gif\" alt=\"\" width=\"250\" height=\"250\" \/> <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-301\" src=\"https:\/\/golancourses.net\/fall23\/wp-content\/uploads\/2023\/09\/ezgif.com-gif-maker-2.gif\" alt=\"\" width=\"250\" height=\"250\" \/><\/p>\n<hr \/>\n<h3>2. Readings and Viewings: Timekeeping<\/h3>\n<p><em><strong>(&lt;1 hour, 10%)<\/strong> You are asked to enrich your understanding of<strong> clocks and timekeeping<\/strong> by reviewing and\/or examining the following resources. These readings and viewings should take less than half an hour.<\/em><\/p>\n<p>Attempts to mark time stretch back many thousands of years, with some of the earliest timekeeping technologies being gnomons, sundials, water clocks, and lunar calendars. Even today\u2019s standard representation of time, with hours and minutes divided into 60 parts, is a legacy inherited from the ancient Sumerians, who used a sexagesimal counting system.<\/p>\n<p>The history of timekeeping is a history driven by economic and militaristic desires for greater precision, accuracy, and synchronization. Every increase in our ability to precisely measure time has had a profound impact on science, agriculture, navigation, communications, and, as always, warcraft.<\/p>\n<p>Despite the widespread adoption of technological standards, there are many other ways to understand time. <em>Psychological<\/em> time contracts and expands with attention; <em>biological<\/em> cycles affect our moods and behavior; <em>ecological<\/em> time is observed in species and resource dynamics; <em>geological<\/em> and <em>astronomical<\/em> rhythms can span millennia. In the twentieth century, Einstein\u2019s theory of relativity further upended our understanding of time, showing that it does not flow in a constant way, but rather in relation to the position from which it is measured\u2014a possibly surprising return to the significance of the observer.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-278\" src=\"https:\/\/golancourses.net\/fall23\/wp-content\/uploads\/2023\/09\/history-of-calendar.jpg\" alt=\"\" width=\"1024\" height=\"533\" srcset=\"https:\/\/golancourses.net\/fall23\/wp-content\/uploads\/2023\/09\/history-of-calendar.jpg 1024w, https:\/\/golancourses.net\/fall23\/wp-content\/uploads\/2023\/09\/history-of-calendar-300x156.jpg 300w, https:\/\/golancourses.net\/fall23\/wp-content\/uploads\/2023\/09\/history-of-calendar-768x400.jpg 768w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><\/p>\n<p>Please look at the following 5 resources:<\/p>\n<ol>\n<li>Please\u00a0<strong>read<\/strong>\u00a0this\u00a0<a href=\"https:\/\/golancourses.net\/fall23\/wp-content\/uploads\/2023\/09\/drucker_timekeeping.pdf\"><strong>this 5-page text about timekeeping<\/strong><\/a> (PDF; <a href=\"https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-content\/uploads\/2022\/02\/drucker_timekeeping.pdf\">alternate link<\/a>) by design theorist Johanna Drucker, from her book <em>Graphesis: Visual Forms of Knowledge Production<\/em> (Harvard Press, 2014).<\/li>\n<li>Please\u00a0<strong>watch<\/strong>\u00a0this excellent 6-minute\u00a0<strong><a href=\"https:\/\/www.youtube.com\/watch?v=SsULOvIWSUo\">YouTube video on the history of timekeeping devices<\/a><\/strong>.<\/li>\n<li>If you didn\u2019t already watch it in class on Monday 9\/25, please <strong>watch<\/strong>\u00a0the first 13 minutes of\u00a0<strong><a href=\"https:\/\/www.youtube.com\/watch?v=OaYMK2n9Aow\" rel=\"nofollow\">A Brief History of the Calendar and Timekeeping<\/a><\/strong>, a YouTube lecture by <a href=\"https:\/\/www.maastrichtuniversity.nl\/dl-carroll\">Dr. Donna Carroll<\/a>, Lecturer of Physics, Maastricht University.<\/li>\n<li><strong>Browse<\/strong>\u00a0or skim the\u00a0<a href=\"https:\/\/en.wikipedia.org\/wiki\/History_of_timekeeping_devices\"><strong>Wikipedia History of Timekeeping Devices<\/strong>.<\/a><\/li>\n<li><strong>Check out<\/strong>\u00a0<strong><a href=\"https:\/\/yourcalendricalfallacyis.com\/\">https:\/\/yourcalendricalfallacyis.com\/<\/a><\/strong>. (It\u2019s awesome!)<\/li>\n<\/ol>\n<p><strong><em>Now: <\/em><\/strong>In a Discord post in the #<strong><em>timeKeepingReadings<\/em><\/strong> channel, please <strong>write<\/strong>\u00a0two sentences about something that stuck with you from any of these readings\/viewings.\u00a0<em>What did you see that was interesting? Why was it interesting to you?<\/em><\/p>\n<hr \/>\n<h3>3. Timepiece<\/h3>\n<figure id=\"attachment_4792\" class=\"wp-caption alignnone\" aria-describedby=\"caption-attachment-4792\"><figcaption id=\"caption-attachment-4792\" class=\"wp-caption-text\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-279\" src=\"https:\/\/golancourses.net\/fall23\/wp-content\/uploads\/2023\/09\/Proposals-for-Clocks_03-1.jpg\" alt=\"\" width=\"1199\" height=\"799\" srcset=\"https:\/\/golancourses.net\/fall23\/wp-content\/uploads\/2023\/09\/Proposals-for-Clocks_03-1.jpg 1199w, https:\/\/golancourses.net\/fall23\/wp-content\/uploads\/2023\/09\/Proposals-for-Clocks_03-1-300x200.jpg 300w, https:\/\/golancourses.net\/fall23\/wp-content\/uploads\/2023\/09\/Proposals-for-Clocks_03-1-1024x682.jpg 1024w, https:\/\/golancourses.net\/fall23\/wp-content\/uploads\/2023\/09\/Proposals-for-Clocks_03-1-768x512.jpg 768w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/>\u201cProposals for Clocks\u201d by David Horvitz<\/figcaption><\/figure>\n<p><strong><em>(6 hours; 60%)<\/em>\u00a0<\/strong>The interactive and dynamic control of visual media over\u00a0<em>time<\/em> is a core concern in new media arts. In this project, you are asked to design a visualization that displays a novel or unconventional representation of the time. Your timepiece should appear different at all times of the day, and it should probably repeat its appearance every 24 hours (or other relevant cycle, if desired). You are invited to make the time legible through means other than Roman, Arabic, or Chinese numerals \u2014 such as by visualizing numeric bit patterns, or using iteration to present countable graphic elements.<\/p>\n<p><strong>Learning Objectives:<\/strong><\/p>\n<p>Through completion of this assignment, you will:<\/p>\n<ul>\n<li style=\"list-style-type: none;\">\n<ul>\n<li><em>Become acquainted with the history of systems and devices for timekeeping<\/em><\/li>\n<li><em>Devise technologies and graphic concepts for representing time that go beyond conventional methods of visualization and mediation<\/em><\/li>\n<li><em>Refine craft skills in the use of\u00a0code to govern a spatiotemporal design, by effectively and expressively controlling shape, color, form, and motion<\/em><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>Try to devise a\u00a0<em>novel graphic concept.\u00a0<\/em>I encourage you to question basic assumptions about how time is represented. Feel free to experiment with any of the graphical tools at your disposal, including color, shape, transparency, etc. You\u2019ll probably need to use the\u00a0<code>hour()<\/code>,\u00a0<code>minute()<\/code>,\u00a0<code>second()<\/code>, and\u00a0<code>millis()<\/code>\u00a0functions, but you\u2019re also welcome to use\u00a0<code>day()<\/code>,\u00a0<code>month()<\/code>, and\u00a0<code>year()<\/code>\u00a0functions in order to build a clock that evolves over longer timescales, lifetimes, etc. If your timepiece measures other phenomena, that\u2019s fine too.<\/p>\n<p><strong>Requirements:<\/strong><\/p>\n<ol>\n<li><strong>Sketch<\/strong>\u00a0first in your paper sketchbook.\u00a0<strong>Consider<\/strong>\u00a0things like biological time (<a href=\"https:\/\/en.wikipedia.org\/wiki\/Chronobiology\" target=\"_blank\" rel=\"noopener noreferrer\">chronobiology<\/a>),\u00a0<a href=\"https:\/\/en.wikipedia.org\/wiki\/Ultradian_rhythm\" target=\"_blank\" rel=\"noopener noreferrer\">ultradian rhythms<\/a>\u00a0and\u00a0<a href=\"https:\/\/en.wikipedia.org\/wiki\/Infradian_rhythm\" target=\"_blank\" rel=\"noopener noreferrer\">infradian rhythms<\/a>, solar and lunar cycles, celestial time, geological time, decimal time, historical time,\u00a0<a href=\"http:\/\/cpl.revues.org\/4998\" target=\"_blank\" rel=\"noopener noreferrer\">psychological time<\/a>, and subjective time. (This list is not exclusive.)<\/li>\n<li><strong>Create<\/strong> your clock using p5.js at OpenProcessing. You may choose the dimensions and aspect ratio of your canvas, including (if you wish) fullscreen.<\/li>\n<li>In a Discord post in the channel <em>#<strong>timepiece<\/strong>,<\/em> <strong>embed<\/strong>\u00a0at least two images of your clock, showing what it looks like or how it behaves at different times of day. If your clock involves animation, embed\u00a0an animated GIF\u00a0or a\u00a0brief video recording.<\/li>\n<li>In your Discord post, provide a <strong>link<\/strong>\u00a0to your p5 sketch at the OpenProcessing web site.<\/li>\n<li>In the Discord post, <strong>write<\/strong> a couple sentences that describes your project (what is the concept, how is it made, how is a person meant to experience it). <strong>Write<\/strong> another few sentences reflecting on your work (what was successful, what was a struggle).<\/li>\n<\/ol>\n<p>Here&#8217;s a <a href=\"https:\/\/openprocessing.org\/sketch\/2018166\">template project<\/a> that uses basic time functions in p5.js:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-313\" src=\"https:\/\/golancourses.net\/fall23\/wp-content\/uploads\/2023\/09\/clock-demo.gif\" alt=\"\" width=\"450\" height=\"300\" \/><\/p>\n<p>There&#8217;s also a Coding Train video about making clocks <a href=\"https:\/\/www.youtube.com\/watch?v=E4RyStef-gY\">here<\/a>.<\/p>\n<p><iframe loading=\"lazy\" title=\"Coding Challenge #74: Clock with p5.js\" width=\"840\" height=\"473\" src=\"https:\/\/www.youtube.com\/embed\/E4RyStef-gY?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe><\/p>\n","protected":false},"excerpt":{"rendered":"<p>These three exercises are due Monday, October 2nd. There are two creative coding projects, and some readings. For the sake of time management, it is recommended that you complete the Rhythm Loop project by the end of class on Wednesday, 9\/27. OpenProcessing: Rhythm Loop: 2 Hours, 30% Discord: Timekeeping Readings: 1 Hour, 10% OpenProcessing: Timepiece: &hellip; <a href=\"https:\/\/golancourses.net\/fall23\/deliverables\/05-time\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;05. Time&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":10,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-277","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/golancourses.net\/fall23\/wp-json\/wp\/v2\/pages\/277","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/golancourses.net\/fall23\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/golancourses.net\/fall23\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/golancourses.net\/fall23\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/golancourses.net\/fall23\/wp-json\/wp\/v2\/comments?post=277"}],"version-history":[{"count":28,"href":"https:\/\/golancourses.net\/fall23\/wp-json\/wp\/v2\/pages\/277\/revisions"}],"predecessor-version":[{"id":331,"href":"https:\/\/golancourses.net\/fall23\/wp-json\/wp\/v2\/pages\/277\/revisions\/331"}],"up":[{"embeddable":true,"href":"https:\/\/golancourses.net\/fall23\/wp-json\/wp\/v2\/pages\/10"}],"wp:attachment":[{"href":"https:\/\/golancourses.net\/fall23\/wp-json\/wp\/v2\/media?parent=277"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}