WNM498/699 Module 04
There are twin concepts covered in this module that will be with you for the rest of the course. The first is the concept of a function, which is a key concept in almost every type of programming. The second is time, which is dealt with in specific ways in p5js, but is also going to be a thematic and critical part of your assignment and new media practice.
A lot of instruction is inline in the comments in this week’s code examples, so be sure to read read through all of the source code.
Demo Files
Demo Videos
Watch 5.1–6.2 at The Coding Train
References and URLS
Golan Levin has compiled an amazing compendium of resources, references, and ephemera associated with this assignment. His lecture notes can be found on his GitHub. He’s also provided some examples from previous student solutions to the assignment.
Prof Golan Levin, lecture on time in New Media Art
A gallery of student work from CMU School of Art
Clocks and Time
Time is the vary stuff of our life. It dictates us, drives us, and we mark its passage. But what is it? You’ll need to harness and command time to make any kind of interactive art. A great way to get practice doing this is to create a time keeper.
So, you are tasked with creating a clock. However, your clock shouldn’t simply be a conventional measure of time keep.
This assignment comes to us from Prof Golan Levin, a prominent artist and educator living in Pittsburgh. He instructs at Carnegie Mellon University, and directs the STUDIO for Creative Inquiry, an interdisciplinary arts-research center. He was given this assignment by the great John Maeda. Now, it’s your turn.
From Prof. Levin:
The interactive and dynamic control of visual media over time is a core concern in new-media arts. In this open-ended Project, you are asked to create an abstract visual clock to represent the current time. (Alternatively, you may also think of this as creating a “day-long animation”.)
Your clock should appear different at all times of the day, and it should repeat its appearance every 24 hours. (You are permitted to make a 12-hour clock if you prefer, or one which depicts a non-circadian rhythm). The final piece should somehow show the current time, either literally or abstractly.
For example, you might depict the rising and setting of the sun, as a way of representing the time of day, or you might show particles flowing within an hourglass, or a shadow moving across a sundial, or a collection of colored stripes.
If you do decide to make the time literally readable, you are not permitted to use conventional numerals (Roman, Arabic, Chinese etc.)! Instead, you would have to use countable graphic elements, or a display of numeric bit patterns, or some kind of tally system, or some other system that you devise.
Try to devise a novel graphic concept, e.g. not just a clock face without numbers! Feel free to experiment with any of the graphical tools at your disposal, including color, shape, transparency. Reactivity to the cursor is optional. Naturally, you’ll need to use p5’s hour(), minute(), second(), and millis() functions, but you’re also welcome to use day() and month() for a calendar-sensitive clock.
The goal of this assignment is to give you practice in using code to control visual design over time. Sometimes this is called animation, but the practical demands of producing a “day-long animation” illustrate the necessity of using code to achieve this.
Requirements
- Sketch your ideas on paper.
- Create your clock in p5.js.
- Your canvas should have a 1:1 aspect ratio. I’d suggest 800 x 800 pixels for this assignment. Your clock may work as a watch face, if you like.
- Document your working images of paper sketches from your notebook; these could be as simple as photos captured with your phone.
Submission Directions
Please submit all requisite source files and assets in a folder, ready to be viewed in a browser or server.
Due Date
This project is 3 modules in duration.
- Due module 01: Sketches and Concepts
- Due module 02: First round of abstract clocks
- Due module 03: Final abstract clock