Set 04 (due 9/24)

Recognizing that you have a lab exam on Tuesday September 22, next week’s set of Deliverables is smaller than previous weeks’. The readings, assignments, and projects below constitute the Week 04 Deliverables and are due by 11:59pm EDT on Thursday, September 24th. 

In honor of Ahmed Mohamed, this week’s Deliverables involve clocks.


Technical Readings.

Please read:

  • Chapters 5, 6 and 8 in GSWp5.js.

Looking Outwards 04: Sound

Our Looking Outwards topic for this week is sound and is specifically concerned with how artists use computation to work with sound and music. You might consider how digital storage and networks change the way we think about sound; how sound is generated digitally or processed digitally; how sound data is transformed to physical sound through conventional means (loudspeakers, headphones) and unconventional means; and how sound has been visualized. Computation creates the possibility of sophisticated generative music, ranging from computational soundscapes to automated emulations of musical style, as well as provocative new instruments for human expression.

Identify a particular project or work in the area of sound and computation which you find interesting. In a blog post of about 100-200 words,

  • Please discuss the project. What do you admire about it, and why do you admire these aspects of it?
  • What do you know (or what do you suppose) about the algorithms that generated the work?
  • It what ways are the creator’s artistic sensibilities manifest in the final form?
  • Link (if possible) to the work. To the best of your abilities, be sure to provide the creator’s name, title of the work, and year of creation.
  • Embed an image, sound, and/or a YouTube/Vimeo video of the project (if available).
  • Label your blog post with the Category, LookingOutwards-04.
  • Label your blog post with the Category referring to your section (e.g. GolanSectionRogerSectionA, RogerSectionB, RogerSectionD, or RogerSectionE).

Some additional good places to find projects include:


Assignment 04-A: Tally Marks

In this Assignment, your program will display a tally of the user’s clicks. This Assignment is to be submitted through Autolab. 

josie-tally

Tally marks, also called hash marks, are a unary numeral system, typically used for counting. According to Wikipedia, counting aids (other than body parts) first appeared in the Upper Paleolithic or Late Stone Age; the oldest tally sticks date to between 35,000 and 25,000 years ago, in the form of notched bones, and were likely used to mark time. The above image shows tally marks that count visitors’ drinks at a well-known British pub.

In this Assignment, you will create a p5.js application which uses classic tally marks (in five-mark groupings) to display the number of times that the user has clicked on the screen. Here’s an animated GIF screencap showing an example of what a successful solution would look like:

tally-final

Requirements:

  • Using our lightweight sketch template (template-p5only.zip), create a p5.js program with a canvas of 800 x 100 pixels.
  • Give your program a global variable called gClickCount, which is initialized to 0. Increment the gClickCount variable whenever the user presses the mouse button.
  • Add some additional functionality that resets gClickCount to zero whenever the user presses a keyboard key.
  • Now it’s time to visually display the gClickCount quantity. One possible way to get started is to create a for() loop that draws a series of vertical lines, and then uses the gClickCount variable as part of the termination condition in that for() loop. Doing so will produce a rudimentary tally similar to the following. (If you get this far, you’ll get partial credit):

tally-partial

  • Really, however, we ask you to display gClickCount using good-old “classic” tally marks: the kind you’ve seen a million times in cartoons, consisting of visual groupings of five marks, where the fifth mark in each group is a diagonal slash that intersects the other four.
  • All of your code should adhere to the style guidelines found in our “Style Do’s and Don’ts”.

Then, as usual for all Assignments uploaded to Autolab:

  • Put the following information into comments at the top of your code: Your name; Your class section or time; Your email address, including @andrew.cmu.edu; and Assignment-04-A
  • Name your project UserID-04-a.
  • Zip and upload your code to Autolab, using the provided instructions. Zip your entire sketch folder. (Since you’re using our new lightweight sketch template, there will be no libraries subdirectory to include.)
  • All of your code should adhere to the style guidelines found in our “Style Do’s and Don’ts”.
'Do you have to do that EVERY five minutes?'
‘Do you have to do that EVERY five minutes?’

Assignment 04-B: A Simple Clock

In this Assignment, you are asked to write a program that displays a commonplace circular clock, similar to the animated illustrations below. The purpose of the assignment is to strengthen your skills (1) with graphical rotations, (2) with the system’s functions for accessing the current time, and (3) with simple string formatting. This Assignment is to be submitted through Autolab. 

simple-clock    clco

Requirements:

  • Using our lightweight sketch template (template-p5only.zip), create a p5.js program with a canvas of 300 x 300 pixels.
  • In this canvas, display a standard circular clock: with an hour hand, minute hand, and second hand that rotate around the center of the canvas. (You’ll need to use the p5.js hour(), minute(), and second() functions.) Make sure your clock’s hands look different from each other. Conventionally, the hour hand is short and fat, while the minute hand is longer and thinner. You may render your clock’s hands with any graphical primitives you prefer.
  • To display the clock’s hands, you may choose between calculating their positions directly (with trigonometric functions like sin() and cos()), or using graphics functions like push(), rotate(), translate() and pop(). You’ll probably find it more straightforward to do the latter, but both are acceptable approaches.
  • Your clock should be a 12-hour (not 24-hour!) clock. Because the hour() function returns a number from 0-23, you’ll need to devise a solution for converting from 24-hour to 12-hour time. (The modulus (%) operator is the tidiest method; alternatively, you could use some if/else logic.)
  • The clock’s “zero” should be at the top. For example, when the minute hand rolls over from 59 to 0, it should be at the top of the clock’s face. This may seem obvious, but will require some attentive hacking.
  • Additionally, as in the illustration shown above, and so that you (and we!) may verify your work, please show a written display of the current time using the text() command. You’ll need to use number-formatting string functions like nf() to make sure the time is displayed correctly.

Then, as usual for all Assignments uploaded to Autolab:

  • Put the following information into comments at the top of your code: Your name; Your class section or time; Your email address, including @andrew.cmu.edu; and Assignment-04-B
  • Name your project UserID-04-b.
  • Zip and upload your code to Autolab, using the provided instructions. Zip your entire sketch folder. (Since you’re using our new lightweight sketch template, there will be no libraries subdirectory to include.)
  • All of your code should adhere to the style guidelines found in our “Style Do’s and Don’ts”.

Project 04 – Abstract Clock

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”.)

We ask you to browse these resources for some inspiration on strategies for representing time in unconventional ways:

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, if you’re prepared to argue for it). 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….

Below is an example of the simplest possible, minimally viable “abstract clock”. (Naturally, yours will be much more interesting than this.)

simple-abstract-clock

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, etcetera. 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 first on paper.
  • No, really. Ponder things like biological time (chronobiology), ultradian rhythms and infradian rhythms, solar and lunar cycles, celestial time, geological time, historical time, psychological time, and subjective time. Read about the incredibly interesting history of timekeeping. Check out thisthat, and the other link we recommended to you above.
  • Create your clock in p5.js.
  • Limit your design to a canvas which is no larger than 800 x 800 pixels, please.
  • When you’re done, embed your p5.js sketch in a WordPress blog post on this site, using the (usual) instructions here.
  • Ensure that your p5.js code is visible and attractively formatted in the post.
  • In your blog post, write a paragraph or two (~100-150 words) reflecting on your process and product.
  • Document your work y embedding images of paper sketches from your notebook; these could be as simple as photos captured with your phone.
  • Label your project’s blog post with the Category Project-04-Abstract-Clock.
  • Label your project’s blog post with the Category referring to your section (e.g. GolanSection, RogerSectionA,RogerSectionB, RogerSectionD, or RogerSectionE).
  • All of your code should adhere to the style guidelines found in our “Style Do’s and Don’ts”.

For this assignment, we encourage you to seriously question basic assumptions about how time is represented. For example, the seemingly ubiquitous convention that we use 12 (or 24) hour time is totally arbitrary — an artifact of ancient Egyptian astronomy. Other systems have been used and proposed. Until quite recently, a six-hour day was used in Thailand. During the French Revolution, when the metric system was invented, people seriously proposed decimal time; here’s a decimal clock from the 1780s:

Below is some p5.js code to get you started. This example shows milliseconds that roll-over correctly, in synchrony with the advancing seconds.

clock-template

var prevSec;
var millisRolloverTime;

//--------------------------
function setup() {
  createCanvas(300, 300);
  millisRolloverTime = 0;
}

//--------------------------
function draw() {
  background(255,200,200); // My favorite pink

  // Fetch the current time
  var H = hour();
  var M = minute();
  var S = second();

  // Reckon the current millisecond, 
  // particularly if the second has rolled over.
  // Note that this is more correct than using millis()%1000;
  if (prevSec != S) {
    millisRolloverTime = millis();
  }
  prevSec = S;
  var mils = floor(millis() - millisRolloverTime);

  fill(128,100,100);
  text("Hour: "   + H, 10, 22);
  text("Minute: " + M, 10, 42);
  text("Second: " + S, 10, 62);
  text("Millis: " + mils, 10, 82);

  var hourBarWidth   = map(H, 0, 23, 0, width);
  var minuteBarWidth = map(M, 0, 59, 0, width);
  var secondBarWidth = map(S, 0, 59, 0, width);

  // Make a bar which *smoothly* interpolates across 1 minute.
  // We calculate a version that goes from 0...60, 
  // but with a fractional remainder:
  var secondsWithFraction   = S + (mils / 1000.0);
  var secondsWithNoFraction = S;
  var secondBarWidthChunky  = map(secondsWithNoFraction, 0, 60, 0, width);
  var secondBarWidthSmooth  = map(secondsWithFraction,   0, 60, 0, width);

  noStroke();
  fill(40);
  rect(0, 100, hourBarWidth, 50);
  fill(80);
  rect(0, 150, minuteBarWidth, 50);
  fill(120)
  rect(0, 200, secondBarWidthChunky, 50);
  fill(160)
  rect(0, 250, secondBarWidthSmooth, 50);
}

So… this …should… be obvious, but you may not submit your Assignment-04B (Simple Clock) for this Project; you’re being asked to design a clock of your own invention. Furthermore, the purpose of the code above is to provide some potentially helpful technical scaffolding for you, not to suggest that your designs ought to look like rectangular bars. This Project is an invitation to invent!

For more inspiration on timetelling, check out this brief video:

Posted in