{"id":304,"date":"2022-01-30T22:51:31","date_gmt":"2022-01-31T03:51:31","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/?page_id=304"},"modified":"2022-02-05T14:18:32","modified_gmt":"2022-02-05T19:18:32","slug":"2-rhythm-and-time","status":"publish","type":"page","link":"https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/deliverables\/2-rhythm-and-time\/","title":{"rendered":"#2: Rhythm &#038; Time"},"content":{"rendered":"<p><strong>This set of Deliverables is due Wednesday, February 9th at 9am, and has 4 parts:<\/strong><\/p>\n<ul>\n<li>2A.Viewing\/Research: Loops as Art \u2014 10%<\/li>\n<li>2B. Rhythm Loop Mini-Project \u2014 20%<\/li>\n<li>2C. Readings\/Viewings: Timekeeping \u2014 10%<\/li>\n<li>2D. Timepiece \u2014 60%<\/li>\n<\/ul>\n<hr \/>\n<p><a name=\"2a\"><\/a><\/p>\n<h3>2A. Viewing\/Research: Loops as Art<\/h3>\n<p><strong>(&lt;1<em> hour, 10%<\/em>)<\/strong> In this exercise, you are asked to spend time examining GIF projects by Dave Whyte (<a href=\"https:\/\/beesandbombs.tumblr.com\/\">Bees and Bombs<\/a>), Cindy Suen, and Lucas Zanotto or Andreas Wannerstedt. Please spend 5-10 minutes per artist. You can find their work at these links:<\/p>\n<ul>\n<li>Bees and Bombs (David Whyte):\u00a0<a href=\"https:\/\/www.instagram.com\/davebeesbombs\/\">Instagram<\/a>\u00a0\u2022\u00a0<a href=\"https:\/\/twitter.com\/beesandbombs\">Twitter<\/a>\u00a0\u2022\u00a0<a href=\"https:\/\/beesandbombs.tumblr.com\/\">Tumblr<\/a><\/li>\n<li>Cindy Suen:\u00a0<a href=\"https:\/\/cargocollective.com\/cindysuen\">Website<\/a>\u00a0\u2022\u00a0<a href=\"https:\/\/cindysuen.tumblr.com\/\">Tumblr<\/a><\/li>\n<li><a href=\"https:\/\/www.instagram.com\/lucas_zanotto\/?hl=en\">Lucas Zanotto<\/a> or\u00a0<a href=\"https:\/\/andreaswannerstedt.se\/projects\">Andreas Wannerstedt<\/a><\/li>\n<\/ul>\n<p><strong><em>Now:<\/em><\/strong><\/p>\n<ul>\n<li>In a brief blog post,\u00a0<strong>embed<\/strong>\u00a0one project by each artist (three embeds total) that caught your attention. Don\u2019t just pick the first thing you come across, it breaks my heart.<\/li>\n<li>In just a single sentence or two, please\u00a0<strong>write<\/strong>:\u00a0<em>What did you find interesting\/successful, and why?<\/em><\/li>\n<li><strong>Title<\/strong>\u00a0your blog post\u00a0<em>Nickname-LoopResearch<\/em><\/li>\n<li><strong>Categorize<\/strong>\u00a0your blog post\u00a0<em>02-LoopResearch<\/em>.<\/li>\n<\/ul>\n<p><iframe id=\"instagram-embed-0\" class=\"instagram-media instagram-media-rendered\" src=\"https:\/\/www.instagram.com\/p\/B3dHAHCHSrv\/embed\/?cr=1&amp;v=13&amp;wp=1620&amp;rd=http%3A%2F%2Fwww.courses.art.cmu.edu&amp;rp=%2F2021s%2F60210a%2Fdeliverables%2Fdeliverables-04%2F#%7B%22ci%22%3A0%2C%22os%22%3A432.6999999284744%2C%22ls%22%3A397.2999999523163%2C%22le%22%3A398.09999990463257%7D\" height=\"745\" frameborder=\"0\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\" data-instgrm-payload-id=\"instagram-media-payload-0\" data-mce-fragment=\"1\"><\/iframe><\/p>\n<p>E.g. by Cindy Suen:<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-322\" src=\"https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-content\/uploads\/2022\/01\/cindy-suen-cubes.gif\" alt=\"\" width=\"512\" height=\"512\" \/><\/p>\n<p>E.g. by Andreas Wannerstedt:<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-323\" src=\"https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-content\/uploads\/2022\/01\/andreas_wannerstedt_pendulum.gif\" alt=\"\" width=\"512\" height=\"512\" \/><\/p>\n<hr \/>\n<p><a name=\"2b\"><\/a><\/p>\n<h3>2B. Rhythm Loop<\/h3>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone  wp-image-501\" src=\"https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-content\/uploads\/2022\/02\/rect-loop-demo.gif\" alt=\"\" width=\"320\" height=\"320\" \/><\/p>\n<p><span style=\"color: #ff00ff;\"><strong>(<em>2 Hours, 20%<\/em>)<\/strong><\/span><em> In this mini-project, you will explore visual rhythm\u2014 by creating a seamlessly looping, animated GIF using computationally generated graphics. <strong>This is a mini-project, so KEEP IT SIMPLE.<\/strong> <\/em><em>There are several important constraints:<\/em><\/p>\n<ul>\n<li><strong>Your looping gif must be\u00a0<em>seamless<\/em>.<\/strong> Abrupt temporal hiccups and stutters will not be tolerated. Ideally, it should be impossible to determine where your loop \u201cbegins\u201d.<\/li>\n<li><strong>Your canvas must be\u00a0<em>square<\/em>,<\/strong> with dimensions of exactly <strong>640\u00d7640 pixels<\/strong>.<\/li>\n<li><strong>You are restricted to using\u00a0<em>exactly 2 or 3 colors<\/em>.<\/strong> Ultra-flat, folks: no transparency blending. One possibility is to have a background, foreground, and spot (highlight) color.<\/li>\n<li><strong>You are strictly limited to using the p5.js\u00a0<em><a href=\"https:\/\/p5js.org\/reference\/#\/p5\/rect\">rect<\/a><\/em>() command.<\/strong> (You may\u00a0<em>not<\/em> use any other p5.js drawing commands, such as line, arc, triangle, etc.!) Keep in mind that the <em>rect()<\/em> command is quite <a href=\"https:\/\/twitter.com\/_juanrg92\/status\/1487842160691011585\">versatile<\/a>, owing to its corner-rounding options. Remember that you can also make it skinny (to create line-like shapes), and rotate it into other orientations. Here\u2019s a (live) demonstration\u00a0<a href=\"https:\/\/openprocessing.org\/sketch\/1112659\">sketch<\/a>;\u00a0<em>all<\/em>\u00a0of these shapes were made exclusively with the\u00a0<a href=\"https:\/\/p5js.org\/reference\/#\/p5\/rect\"><em>rect<\/em><\/a>() command:<\/li>\n<\/ul>\n<p><iframe loading=\"lazy\" src=\"https:\/\/openprocessing.org\/sketch\/1112659\/embed\/?plusEmbedHash=OWMzMTk2YWQ4ZmI2NGQyYjA3NDI0YmYxZWUzYzA1Mzg3NzkwZWJjNzg0NTNhMWVjOGYwYzMyMzI4ZmNlNWU1ODcyYzZiOWEyZDczMzYwYzJkNzhkOWQ4MTNhODFmNGM5ZmExMWNlOTk3NDNhYjI0Y2EwMTYxMjM5OTA3MmUwZjF3SjdjY2pVdVZpRm5YaEFRWmgzUG9NMEtxK1ZJRGtQbDdtYTlpUEpoYmhvdkFQelBpb3NSYjhJMzdpNFUvY1JYQnMxZmtvUVhEQTNqWTVrdUtWV0wvUT09&amp;plusEmbedTitle=true\" width=\"840\" height=\"330\" data-mce-fragment=\"1\"><\/iframe><\/p>\n<p><em>Now<\/em>:<\/p>\n<ol>\n<li><strong>SKETCH FIRST!<\/strong>\u00a0Before doing\u00a0<em>anything<\/em>, do some visual thinking in your notebook. Try to develop a\u00a0<em>graphic concept<\/em>.<\/li>\n<li><strong>Write code<\/strong>\u00a0which generates a seamlessly looping animation. Be sure to use the p5.createloop addon to make your life easier. The templates below will be helpful.<\/li>\n<li>You are<strong>\u00a0encouraged to limit the duration<\/strong>\u00a0of your GIF to approximately 30-300 frames long (~1-10 seconds).<\/li>\n<li><em><strong>OPTIONAL<\/strong><\/em>: You are\u00a0<strong>encouraged to use<\/strong>\u00a0an\u00a0<em>easing\u00a0function\u00a0<\/em>to create a nuanced articulation of animated form. (Why? because you\u2019ll learn a\u00a0<em>ton<\/em>.) If you can, select an easing function from\u00a0<a href=\"https:\/\/idmnyu.github.io\/p5.js-func\/\">p5-func<\/a>\u00a0(p5.js\/JavaScript).\u00a0These easing functions take a number from 0\u20261, and return an\u00a0<em>altered<\/em> but related number from 0\u20261, which has a different character or quality. Note, you\u2019ll need to add the p5-func library to your sketch.<\/li>\n<li><strong>Export<\/strong>\u00a0your GIF using the provided code structure.\u00a0<em>Do NOT use a screencapture program to make your GIF!<\/em>\u00a0Also:\n<ul>\n<li><strong>be sure<\/strong>\u00a0that your GIF loops\u00a0<em>infinitely<\/em>, with a duration of\u00a0<em>forever.<\/em>\u00a0Make sure it loops\u00a0without a \u201chiccup\u201d.<\/li>\n<li><strong>be sure<\/strong>\u00a0to create your GIF so that it plays back at least 20 frames per second (preferably 30 FPS). These are options you can set with proper GIF creation tools. You may need to specify the frame rate using milliseconds per frame (e.g. 30 FPS = 33 ms\/f).<\/li>\n<li><strong>be sure<\/strong>\u00a0your GIF is under 10MB in filesize, preferably under 5MB. You can optimize (compress) your GIF with a tool like\u00a0<a href=\"https:\/\/ezgif.com\/\">https:\/\/ezgif.com\/<\/a>.<\/li>\n<\/ul>\n<\/li>\n<li>In a blog post,\u00a0<strong>upload and embed<\/strong>\u00a0your animated GIF. <span style=\"color: #ff00ff;\"><strong>Important<\/strong><\/span>: Embed the GIF at the original resolution of 640\u00d7640 pixels.\u00a0<em>Be sure not to embed any version that has been automatically resized by WordPress; it will not be animated!<\/em> (It&#8217;s always good idea to check your post after you publish it, to make sure it looks correct.) Also important: please upload your GIF <strong>directly to\u00a0<em>this WordPress site.\u00a0<\/em><\/strong>GIFs that are cross-site embedded from Giphy.com or elsewhere on the web are <em>not acceptable.<\/em><\/li>\n<li><strong>Write<\/strong>\u00a0a paragraph about the experience of creating the piece.\u00a0<strong>Critique<\/strong>\u00a0your work: in what ways do you feel you succeeded? Where you feel you fell short of what you\u2019d hoped to achieve?<\/li>\n<li>Make sure your project is uploaded to OpenProcessing (Exercise #23), and <strong>link<\/strong>\u00a0to it from your blog.<\/li>\n<li><strong>Include<\/strong>\u00a0a scan or photo of your pen-and-paper sketches.<\/li>\n<li><strong>Categorize<\/strong>\u00a0your blog post with the Category,\u00a0<em>02-Loop<\/em>.<\/li>\n<li><strong>Title<\/strong>\u00a0your blog post,\u00a0<em>nickname-Loop.<\/em><\/li>\n<\/ol>\n<p>Here\u2019s a template project for a seamless loop:<\/p>\n<ul>\n<li>At OpenProcessing: <a href=\"https:\/\/openprocessing.org\/sketch\/1461691\">https:\/\/openprocessing.org\/sketch\/1461691<\/a><\/li>\n<li>At Editor.p5js.org: <a href=\"https:\/\/editor.p5js.org\/golan\/sketches\/KAF80owRC\">https:\/\/editor.p5js.org\/golan\/sketches\/KAF80owRC<\/a><\/li>\n<\/ul>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-317\" src=\"https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-content\/uploads\/2022\/01\/ad98f619-d906-46d8-8f63-fc2e21e69b3f.gif\" alt=\"\" width=\"640\" height=\"640\" \/><\/p>\n<p>Here\u2019s a template for\u00a0a Lissajous-inspired loop using sin() and cos():<\/p>\n<ul>\n<li>At OpenProcessing: <a href=\"https:\/\/openprocessing.org\/sketch\/1461727\">https:\/\/openprocessing.org\/sketch\/1461727<\/a><\/li>\n<li>At Editor.p5js.org: <a href=\"https:\/\/editor.p5js.org\/golan\/sketches\/iTE-QYKLZ\">https:\/\/editor.p5js.org\/golan\/sketches\/iTE-QYKLZ<\/a><\/li>\n<\/ul>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-318\" src=\"https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-content\/uploads\/2022\/01\/65c14805-d42a-4c77-af1f-33e16754f780.gif\" alt=\"\" width=\"640\" height=\"640\" \/><\/p>\n<p>Here\u2019s a reminder\u00a0that you can eliminate visual discontinuity by going all the way offscreen:<\/p>\n<ul>\n<li>At OpenProcessing: <a href=\"https:\/\/openprocessing.org\/sketch\/1464781\">https:\/\/openprocessing.org\/sketch\/1464781<\/a><\/li>\n<li>At Editor.p5js.org: <a href=\"https:\/\/editor.p5js.org\/golan\/sketches\/s42vcR_pO\">https:\/\/editor.p5js.org\/golan\/sketches\/s42vcR_pO<\/a><\/li>\n<\/ul>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-321\" src=\"https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-content\/uploads\/2022\/01\/5cb33ff4-4fed-493f-abe4-ae6596b02144.gif\" alt=\"\" width=\"640\" height=\"320\" \/><\/p>\n<hr \/>\n<p><a name=\"2c\"><\/a><\/p>\n<h2>2C. Readings and Viewings: Timekeeping<\/h2>\n<p><em><span style=\"color: #ff00ff;\"><strong>(&lt;1 hour, 10%)<\/strong><\/span> You are asked to enrich your concept of clocks and timekeeping by reviewing and\/or examining the following resources. Taken together, these readings and viewings should take less than half an hour.<\/em><\/p>\n<p><a href=\"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/history-of-calendar.jpg\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-4816\" src=\"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/history-of-calendar.jpg\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" srcset=\"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/history-of-calendar.jpg 1024w, https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/history-of-calendar-640x333.jpg 640w, https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/history-of-calendar-768x400.jpg 768w\" alt=\"\" width=\"1024\" height=\"533\" \/><\/a><\/p>\n<ul>\n<li>Please\u00a0<strong>read<\/strong>\u00a0this\u00a0<strong><a href=\"https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-content\/uploads\/2022\/02\/drucker_timekeeping.pdf\">this 5-page text about timekeeping<\/a><\/strong>\u00a0(PDF) by design theorist Johanna Drucker, from her book\u00a0<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&#8217;t already see it in class, 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 Dr. Donna Carroll, 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>Check out\u00a0<strong><a href=\"https:\/\/yourcalendricalfallacyis.com\/\">https:\/\/yourcalendricalfallacyis.com\/<\/a><\/strong>. (It&#8217;s awesome!)<\/li>\n<\/ul>\n<p><strong><em>Now:<\/em><\/strong><\/p>\n<ol>\n<li>In a blog post, please\u00a0<strong>write<\/strong> two sentences about something that stuck with you from any of these readings\/viewings. <em>What did you see that was interesting? Why was it interesting to you?<\/em><\/li>\n<li><strong>Title<\/strong>\u00a0your blog post,\u00a0<em>nickname-timeresearch<\/em><\/li>\n<li><strong>Categorize<\/strong>\u00a0your post\u00a0<em>02-TimeResearch<\/em><\/li>\n<\/ol>\n<hr \/>\n<p><a name=\"2d\"><\/a><\/p>\n<h2>2D. Timepiece<\/h2>\n<figure id=\"attachment_4792\" aria-describedby=\"caption-attachment-4792\" style=\"width: 840px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/Proposals-for-Clocks_03-1.jpg\"><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-4792 size-large\" src=\"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/Proposals-for-Clocks_03-1-1024x682.jpg\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" srcset=\"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/Proposals-for-Clocks_03-1-1024x682.jpg 1024w, https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/Proposals-for-Clocks_03-1-640x426.jpg 640w, https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/Proposals-for-Clocks_03-1-768x512.jpg 768w, https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/Proposals-for-Clocks_03-1.jpg 1199w\" alt=\"\u201cProposals for Clocks\u201d\u00a0by David Horvitz\" width=\"840\" height=\"559\" \/><\/a><figcaption id=\"caption-attachment-4792\" class=\"wp-caption-text\">\u201cProposals for Clocks\u201d\u00a0by David Horvitz<\/figcaption><\/figure>\n<p><span style=\"color: #ff00ff;\"><strong><em>(6 hours; 60%)<\/em> <\/strong><\/span>The interactive and dynamic control of visual media over <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 discouraged from using Roman, Arabic, or Chinese numerals; instead, you are encouraged to make the time readable through other means, 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 <code>hour()<\/code>,\u00a0<code>minute()<\/code>,\u00a0<code>second()<\/code>, and <code>millis()<\/code>\u00a0functions, but you\u2019re also welcome to use\u00a0<code>day()<\/code>,\u00a0<code>month()<\/code>, and\u00a0<code>year()<\/code> functions in order to build a clock that evolves over longer timescales, lifetimes, etc. If your timepiece measures other phenomena, that&#8217;s fine too.<\/p>\n<p><strong>Requirements:<\/strong><\/p>\n<ol>\n<li><strong>Sketch<\/strong> first in your paper sketchbook. <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 (Exercise #24). You may choose the dimensions and aspect ratio of your canvas, <b>but your design must be no larger than 840 \u00d7 840<\/b>\u00a0<strong>pixels<\/strong>, please.<\/li>\n<li>In your blog post,\u00a0<strong>embed<\/strong> at 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 <a href=\"https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/syllabus\/making-animated-gifs\/\">an animated GIF<\/a> or a <a href=\"https:\/\/www.youtube.com\/watch?v=G2hI9XL6oyk\">brief video recording<\/a>, which you can make with the OpenProcessing <em>screen-recording<\/em> feature.<\/li>\n<li>In your blog post, provide a <strong>link<\/strong> to your p5 sketch at the OpenProcessing web site.<\/li>\n<li><strong>Write<\/strong> a paragraph that describes you project (what is the concept, how is it made, how is a person meant to experience it).<\/li>\n<li><strong>Write<\/strong> another paragraph reflecting on your work (what was successful, what was a struggle).<\/li>\n<li><strong>Document<\/strong>\u00a0your work by embedding images of\u00a0paper sketches from your notebook. These could be as simple as photos of your sketches, captured with your phone.<\/li>\n<li><strong>Label<\/strong>\u00a0your project\u2019s\u00a0blog post\u00a0with the Category,\u00a0<em>02-Timepiece<\/em>.<\/li>\n<li><b>Title\u00a0<\/b>your\u00a0project\u2019s blog post with the title,\u00a0<em>nickname-timepiece<\/em>.<\/li>\n<li><strong>Submit <\/strong>the Checklist below.<\/li>\n<\/ol>\n<p><iframe loading=\"lazy\" src=\"https:\/\/docs.google.com\/forms\/d\/e\/1FAIpQLSftkdwJCnhgJkIgN_4kyK0he5_b7aKPtYEblzEvItTNDlG2Gw\/viewform?embedded=true\" width=\"640\" height=\"953\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\">Loading\u2026<\/iframe><\/p>\n<p>Below are some code templates you can use to get started. This p5.js example shows milliseconds that roll-over correctly, in synchrony with the advancing seconds.<\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/openprocessing.org\/sketch\/503875\/embed\/?plusEmbedHash=NDc5NGMyMzgyZTU3NGQ5NTNhYjY3NWZiYjM2MTNhYTE2NDUwMmM5MzBiY2MxMTczNDY4Y2Q5ZTAyODMwYjMzNTgzMmM1YjY4OTUwYzRiMWJkMzVjMWE2OTFhN2E1NzY0YzBkNTg1ZmFlNzgyZDdiNjY5NzBlYWNhODY4OGMyZGI1cmNLS2N0OGY0R1g1cDF5dDg2Um9vNUlpYnZTckNadGpSb0ZzKzYwVkNFRzF5YmJtSlhmb3ZMSDJGRURkVExsRjMxSTgwdkU2MHhQZyt6ZC8rS1RwUT09\" width=\"400\" height=\"400\"><\/iframe><\/p>\n<ul>\n<li><a href=\"https:\/\/www.openprocessing.org\/sketch\/503875\">p5.js Clock Template at OpenProcessing<\/a><\/li>\n<li><a href=\"https:\/\/editor.p5js.org\/golan\/sketches\/ByiODxm_m\">p5.js Clock Template at Editor.p5js.org<\/a><\/li>\n<\/ul>\n<p><iframe loading=\"lazy\" src=\"https:\/\/www.youtube.com\/embed\/E4RyStef-gY?feature=oembed\" width=\"840\" height=\"473\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\" data-mce-fragment=\"1\"><\/iframe><\/p>\n<pre>\/\/ Simple p5.js (JavaScript) Clock Template\r\n\/\/ Golan Levin, 2016-2018\r\n\u00a0\r\nvar prevSec;\r\nvar millisRolloverTime;\r\n\u00a0\r\n\/\/--------------------------\r\nfunction setup() {\r\n  createCanvas(300, 300);\r\n  millisRolloverTime = 0;\r\n}\r\n\u00a0\r\n\/\/--------------------------\r\nfunction draw() {\r\n  background(255, 200, 200); \/\/ My favorite pink\r\n\u00a0\r\n  \/\/ Fetch the current time\r\n  var H = hour();\r\n  var M = minute();\r\n  var S = second();\r\n\u00a0\r\n  \/\/ Reckon the current millisecond, \r\n  \/\/ particularly if the second has rolled over.\r\n  \/\/ Note that this is \"more correct\" than using millis()%1000;\r\n  if (prevSec != S) {\r\n    millisRolloverTime = millis();\r\n  }\r\n  prevSec = S;\r\n  var mils = floor(millis() - millisRolloverTime);\r\n\u00a0\r\n  noStroke();\r\n  fill('black');\r\n  var currTimeString = \"Time: \"+ (H%12)+ \":\" + nf(M,2)+ \":\"+ nf(S,2)+ ((H>12) ? \"pm\":\"am\");\r\n  text(currTimeString, 10, 25);\r\n  text(\"Hour: \"   + H, 10, 40);\r\n  text(\"Minute: \" + M, 10, 55);\r\n  text(\"Second: \" + S, 10, 70);\r\n  text(\"Millis: \" + mils, 10, 85);\r\n\u00a0\r\n  var hourBarWidth   = map(H, 0, 24, 0, width);\r\n  var minuteBarWidth = map(M, 0, 60, 0, width);\r\n  var secondBarWidth = map(S, 0, 60, 0, width);\r\n\u00a0\r\n  \/\/ Make a bar which *smoothly* interpolates across 1 minute.\r\n  \/\/ We calculate a version that goes from 0...60, \r\n  \/\/ but with a fractional remainder:\r\n  var secondsWithFraction   = S + (mils \/ 1000.0);\r\n  var secondsWithNoFraction = S;\r\n  var secondBarWidthChunky = map(secondsWithNoFraction, 0, 60, 0, width);\r\n  var secondBarWidthSmooth = map(secondsWithFraction,   0, 60, 0, width);\r\n\u00a0\r\n  fill(40);\r\n  rect(0, 100, hourBarWidth, 50);\r\n  fill(80);\r\n  rect(0, 150, minuteBarWidth, 50);\r\n  fill(120);\r\n  rect(0, 200, secondBarWidthChunky, 50);\r\n  fill(160);\r\n  rect(0, 250, secondBarWidthSmooth, 50);\r\n}<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>This set of Deliverables is due Wednesday, February 9th at 9am, and has 4 parts: 2A.Viewing\/Research: Loops as Art \u2014 10% 2B. Rhythm Loop Mini-Project \u2014 20% 2C. Readings\/Viewings: Timekeeping \u2014 10% 2D. Timepiece \u2014 60% 2A. Viewing\/Research: Loops as Art (&lt;1 hour, 10%) In this exercise, you are asked to spend time examining GIF &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/deliverables\/2-rhythm-and-time\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;#2: Rhythm &#038; Time&#8221;<\/span><\/a><\/p>\n","protected":false},"author":3,"featured_media":0,"parent":22,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-json\/wp\/v2\/pages\/304"}],"collection":[{"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-json\/wp\/v2\/comments?post=304"}],"version-history":[{"count":23,"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-json\/wp\/v2\/pages\/304\/revisions"}],"predecessor-version":[{"id":503,"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-json\/wp\/v2\/pages\/304\/revisions\/503"}],"up":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-json\/wp\/v2\/pages\/22"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-json\/wp\/v2\/media?parent=304"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}