Let’s get our feet wet with JavaScript and visualization design through a fun, creative assignment in P5.js.
Submit this mini-assignment via the application form by Friday 1/10, 11:59pm ET to apply for enrollment in this class. You will be notified by Monday the 13th of results.
Your goal is to build a creative interpretation of the clock, focused on aesthetics and inventiveness, and make it accessible via a url. For examples, take a look at: bar clock, triangle clock, & circle clock. Your interpretation needs to be legible enough that your reader can visually distinguish which is the hour, the minute, vs. the second; otherwise your reader should be able to guess the time within a quarter-hour of accuracy. When choosing your design, consider the different states of the clock at different moments in time, e.g. when values are near max or min. Every time the minute changes (not more frequently), print the value of minute() to the JavaScript console.
Download the assignment template here. Follow the p5.js Reference pages on hours, minutes, and seconds to get the current time number, then use that number, via a mapping, to rotate, scale, translate, or change color on your elements. Feel free to test out your code in the p5.js web editor, but do not submit an editor URL—you should host your own assignment files.
Host your clock on the internet; since these files are static, a good method is to use Github Pages but you’re welcome to use whatever is easiest for you.
Have fun! Submit your url through the application form in Part II.
One way to approach this assignment is to think about it as a visualization of a data set with three values:
Consider the current hour, minute, or second as a proportion of those minimum and maximum values rather than a 1- or 2-digit number. Think about the ways you could visually represent half a minute, 12% of an hour, or 3/5 of a second by systematically varying different aspects of shapes, sizes, or colors. Try searching for the terms “visual encoding” and “retinal variables” to get a sense of the ways other people have approached this.
Note that we won’t be using P5.js for any other assignments in this class. Instead, we’ll be using D3, which shares an underlying visualization grammar with many other statistical graphing packages and integrates more easily with webpages (i.e. the DOM.) We’ll learn about all this over the semester, but this assignment gives you a starting intuition about different ways to describe visuals in code.
If you’re unfamiliar with JavaScript, the JS for Python Programmers tutorial is an excellent overview of the types of things you’ll be using later in this class although you won’t need them in this assignment (note: we will not be bundling in this class but you will almost definitely see it in internships and jobs.)
Otherwise this is a good time to familiarize yourself with the JS console in your browser of choice, for example Chrome DevTools.
Describe a little bit about yourself and why you want to take this class in this application form.