{"id":4788,"date":"2020-09-09T12:28:48","date_gmt":"2020-09-09T16:28:48","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/?page_id=4788"},"modified":"2020-11-01T04:29:20","modified_gmt":"2020-11-01T09:29:20","slug":"3-clock-due-9-16","status":"publish","type":"page","link":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/deliverables\/3-clock-due-9-16\/","title":{"rendered":"#3 Abstract Clock"},"content":{"rendered":"<p><strong>This project has 3 components, due by the beginning of class on Wednesday, 9\/16:<\/strong><\/p>\n<ol>\n<li><em>Meander<\/em> Reading &amp; Response<\/li>\n<li>Readings &amp; Viewings on Timekeeping<\/li>\n<li>Abstract Clock<\/li>\n<\/ol>\n<hr \/>\n<h2>1. &#8220;Meander&#8221; Reading &amp; Response.<\/h2>\n<p><a href=\"http:\/\/roberthodgin.com\/about\">Robert Hodgin<\/a> is a new-media artist and designer who has been professionally active since ~1998.\u00a0 Earlier this year he developed a project called &#8220;<a href=\"http:\/\/roberthodgin.com\/project\/meander\">Meander<\/a>&#8220;, a &#8220;procedural system for generating historical maps of rivers that never existed&#8221;.<\/p>\n<ul>\n<li>Please <strong>read<\/strong> Robert&#8217;s <a href=\"http:\/\/roberthodgin.com\/project\/meander\">1100-word writeup of his Meander project<\/a>. (This should take about 7-10 minutes).<\/li>\n<li>In a blog post, please <strong>write<\/strong> two sentences about something you learned from this writeup.<\/li>\n<li><strong>Title<\/strong> your blog post, <em>nickname-meander<\/em>.<\/li>\n<li><strong>Categorize<\/strong> your post <em>03-Meander<\/em>.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/meander_a2_insta.jpg\"><img loading=\"lazy\" class=\"alignnone size-large wp-image-4798\" src=\"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/meander_a2_insta-1024x768.jpg\" alt=\"\" width=\"840\" height=\"630\" srcset=\"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/meander_a2_insta-1024x768.jpg 1024w, https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/meander_a2_insta-640x480.jpg 640w, https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/meander_a2_insta-768x576.jpg 768w, https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/meander_a2_insta-1536x1152.jpg 1536w, https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/meander_a2_insta-1200x900.jpg 1200w, https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/meander_a2_insta.jpg 1920w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><\/a><\/p>\n<p><a href=\"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/unnamed.jpg\"><img loading=\"lazy\" class=\"alignnone size-full wp-image-4813\" src=\"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/unnamed.jpg\" alt=\"\" width=\"480\" height=\"360\" \/><\/a><em>Robert Hodgin.<\/em><\/p>\n<hr \/>\n<h2>2. Readings and Viewings: Timekeeping<\/h2>\n<p><em>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 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\" alt=\"\" width=\"1024\" height=\"533\" 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\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><\/a><\/p>\n<ul>\n<li>Please <strong>read<\/strong> this <strong><a href=\"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/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>\u00a0(Harvard Press, 2014).<\/li>\n<li>Please <strong>watch<\/strong> the first 13 minutes of <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>Please <strong>watch<\/strong> this excellent 6-minute <strong><a href=\"https:\/\/www.youtube.com\/watch?v=SsULOvIWSUo\">YouTube video on the history of timekeeping devices<\/a><\/strong>.<\/li>\n<li><strong>Browse<\/strong> or skim the <a href=\"https:\/\/en.wikipedia.org\/wiki\/History_of_timekeeping_devices\"><strong>Wikipedia History of Timekeeping Devices<\/strong>.<\/a><\/li>\n<li>Check out <strong><a href=\"https:\/\/yourcalendricalfallacyis.com\/\">https:\/\/yourcalendricalfallacyis.com\/<\/a><\/strong>.<\/li>\n<\/ul>\n<p><strong><em>Now:<\/em><\/strong><\/p>\n<ul>\n<li>In a blog post, please <strong>write<\/strong> two sentences about something that stuck with you from these readings\/viewings.<\/li>\n<li><strong>Title<\/strong> your blog post, <em>nickname-timekeeping<\/em>.<\/li>\n<li><strong>Categorize<\/strong> your post <em>03-Timekeeping<\/em>.<\/li>\n<\/ul>\n<hr \/>\n<h2>3. Abstract Clock<\/h2>\n<p><a href=\"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/Proposals-for-Clocks_03-1.jpg\"><img loading=\"lazy\" class=\"alignnone size-large wp-image-4792\" src=\"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/Proposals-for-Clocks_03-1-1024x682.jpg\" alt=\"\" width=\"840\" height=\"559\" 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\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><\/a><\/p>\n<p><em>(Above) &#8220;Proposals for Clocks&#8221;\u00a0by David Horvitz<\/em><\/p>\n<p>The interactive and dynamic control of visual media over\u00a0<em>time<\/em> is a core concern in new media arts. In this\u00a0 project, you are asked to design an abstract visualization that displays a novel or unconventional representation of the time. Your clock should appear different at all times of the day, and it should repeat its appearance every 24 hours (or other relevant cycle, if desired). You are restricted from using Roman, Arabic, or Chinese numerals, and discouraged from using type; instead, you should 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>If your project is judged to be suitable for public display*, it will be presented on rotation with the other students&#8217; projects at <a href=\"http:\/\/forbesplaza.org\/about\/\">Forbes Digital Plaza<\/a>\u00a0in the Oakland neighborhood for two weeks.<\/p>\n<p><a href=\"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/08\/forbes-digital-plaza.jpg\"><img loading=\"lazy\" class=\"alignnone size-full wp-image-3982\" src=\"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/08\/forbes-digital-plaza.jpg\" alt=\"\" width=\"1024\" height=\"768\" srcset=\"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/08\/forbes-digital-plaza.jpg 1024w, https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/08\/forbes-digital-plaza-640x480.jpg 640w, https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/08\/forbes-digital-plaza-768x576.jpg 768w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><\/a><\/p>\n<p>Through completion of this assignment, you will:<\/p>\n<ul>\n<li>Become acquainted with the history of systems and devices for timekeeping<\/li>\n<li>Devise technologies and graphic concepts for representing time that go beyond conventional methods of visualization and mediation<\/li>\n<li>Refine craft skills in the use of\u00a0code to govern a spatiotemporal design, by effectively and expressively controlling shape, color, form, and motion<\/li>\n<\/ul>\n<p>Try to devise a\u00a0<em>novel graphic concept.\u00a0<\/em>I encourage you to seriously 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. Naturally, you&#8217;ll need to use the <code>hour()<\/code>,\u00a0<code>minute()<\/code>,\u00a0<code>second()<\/code>, and\u00a0<code>millis()<\/code>\u00a0functions, but you&#8217;re 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.<\/p>\n<p><strong>Requirements:<\/strong><\/p>\n<ul>\n<li><strong>Ponder<\/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.<\/li>\n<li><strong>Sketch<\/strong>\u00a0first\u00a0on paper.<\/li>\n<li><strong>Consider<\/strong> how your project will appear and operate in the context of a large LED display in a public square. Note that your project will likely not have an internet connection and should work offline.<\/li>\n<li><strong>Create<\/strong> your clock in p5.js.<\/li>\n<li><span style=\"text-decoration: underline;\"><b>Your design must be 800&#215;600<\/b>\u00a0<strong>pixels<\/strong>, please<\/span>. This is necessary because of the public LED display.<\/li>\n<li>In your blog post, <strong>embed<\/strong> at least three animated GIFs (or screenshot images) of your clock, showing what it looks like or how it behaves at different times of day.<\/li>\n<li>In your blog post,\u00a0<strong>link<\/strong>\u00a0to your p5 sketch at the Editor web site.<\/li>\n<li><strong>Write<\/strong>\u00a0a paragraph\u00a0or two (~100-150 words) reflecting on your process and evaluating your product.<\/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&#8217;s\u00a0blog post\u00a0with the Category,\u00a0<em>03-Clock<\/em>.<\/li>\n<li><b>Title\u00a0<\/b>your\u00a0project&#8217;s blog post with the title,\u00a0<em>nickname-clock<\/em>.<\/li>\n<\/ul>\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<ul>\n<li style=\"list-style-type: none;\">\n<ul>\n<li style=\"list-style-type: none;\">\n<ul>\n<li><a href=\"https:\/\/editor.p5js.org\/golan\/sketches\/ByiODxm_m\">p5.js Clock Template at Editor.p5js.org<\/a><\/li>\n<li><a href=\"https:\/\/www.openprocessing.org\/sketch\/503875\">p5.js Clock Template at OpenProcessing<\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><iframe 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<table>\n<tbody>\n<tr>\n<td class=\"code\">\n<pre class=\"javascript\">\/\/ 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&amp;gt;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<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h3>*NOTE about PUBLIC DISPLAY:<\/h3>\n<p>Owing to the fact that this will be exhibited on a screen owned by <a href=\"https:\/\/onlyinoakland.org\/obid\/overview-2\/\">OBID<\/a>, in a heavily-trafficked public space on University of Pittsburgh property, your work is expected to be G-rated (suitable for a general audience), and will be subject to multiple stages of review. In particular, it is subject to &#8216;<a href=\"http:\/\/www.artistrights.info\/time-place-and-manner-restrictions\">time, place, and manner restrictions<\/a>&#8216; and must hew to the following conditions:<\/p>\n<ul>\n<li><em>No depictions of obscenity, nudity, drugs, violence,\u00a0gore, or death<\/em><\/li>\n<li><em>No hate speech, symbols, or insignia<\/em><\/li>\n<li><em>No flags or corporate logos<\/em><\/li>\n<li><em>No defamation or slander<\/em><\/li>\n<li><em>No intense flashing<\/em><\/li>\n<\/ul>\n<p>Please note that your <em>assignment<\/em> is to produce a clock; the <em>public display<\/em> of your work is a special opportunity separate from the graded project. You are welcome to make any design you want, but OBID and the University of Pittsburgh are under no obligation to host it.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This project has 3 components, due by the beginning of class on Wednesday, 9\/16: Meander Reading &amp; Response Readings &amp; Viewings on Timekeeping Abstract Clock 1. &#8220;Meander&#8221; Reading &amp; Response. Robert Hodgin is a new-media artist and designer who has been professionally active since ~1998.\u00a0 Earlier this year he developed a project called &#8220;Meander&#8220;, a &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/deliverables\/3-clock-due-9-16\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;#3 Abstract Clock&#8221;<\/span><\/a><\/p>\n","protected":false},"author":3,"featured_media":0,"parent":79,"menu_order":3,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-json\/wp\/v2\/pages\/4788"}],"collection":[{"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-json\/wp\/v2\/comments?post=4788"}],"version-history":[{"count":14,"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-json\/wp\/v2\/pages\/4788\/revisions"}],"predecessor-version":[{"id":6915,"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-json\/wp\/v2\/pages\/4788\/revisions\/6915"}],"up":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-json\/wp\/v2\/pages\/79"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-json\/wp\/v2\/media?parent=4788"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}