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/24, 11:59pm to apply for enrollment in this class. You will be notified by Tuesday 1/28 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 example: 1, 2, 3. 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 same form in Part II.
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 this guide JS for Python Programmers 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.