15-104: Introduction to Computing for Creative Practice

Deliverable 06 - Fall 2023

Due Saturday, Oct. 7, 2023 by 11:59PM

PREPARING YOUR HANDIN FOLDER...

FIRST: Create a folder or subdirectory in your 15-104 working area on your computer or in your Andrew private folder for handin-06. You will put all of your work inside this folder and then compress or zip it to create handin-06.zip to submit to Autolab.

Conceptual Questions

In this part of the deliverable, you will download this Word file that contains 4 questions about concepts taught in class. You may download it anywhere on your computer. You should fill in your answers in the spaces provided, and include your name, andrewID and section letter at the top of page 1.

Once you are finished with this part of the deliverable, print/save it as a PDF and store this PDF in your handin-06 folder with the name andrewID-06-concepts.pdf. For example, if your andrewID is acarnegie, then you would save the PDF under the name acarnegie-06-concepts.pdf.

Technical Assignment 06: Round and Round (3 points)

This Assignment is to be submitted through Autolab. Its purpose is to practice your skills with transformations, polar coordinates and arrays.

You will start with a 480 x 480 canvas that has 15 circles, each of diameter 16, lined up to the right of the center of the canvas. The innermost 5 circles are random mixtures of green and blue (no red). The middle 5 circles are random mixtures of red and blue (no green). The outermost 5 circles are random mixtures of red and green (no blue). Each circle is “connected” to the center with a line that goes from the center of the canvas to the center of the circle (but the line will be behind the circle); you won’t see the lines initially since the row of circles will cover them up.. The color circles and lines are drawn on top of a large white circle of diameter 480 as shown below. Here is and example of the initial set up for your circles:

Initial configuration of 15 circles lined up at 0 degrees

Once the canvas is initialized, the circles (and their connecting lines) should rotate around the center of the canvas. Each circle will have a random angle rotation rate between -8 and +8 degrees per frame. Here’s a snapshot of the program during its execution (some circles are rotating clockwise, some counter-clockwise, and some are rotating faster than others, depending on their angle rotation rate:

Configuration of 15 circles after each has spun for a certain amount of time

Program Requirements:

You should use a separate array of length 15 to hold each one of these properties of each rotating circle: the x coordinate of each circle, the y coordinates of each circle, the current angle for each circle with respect to the starting position (0 degrees), the change in angle for each circle, and the color for each circle.
Use a translation to draw everything with respect to the center of the canvas. You may assume that the canvas will always be 480 X 480.
Use polar coordinates to draw the circles at their correct locations based on their current angles. Do NOT rotate the canvas for this assignment.
Put the following information into comments at the top of your code: Your name; Your class section or time; Your andrewID,
Add comments to your code that specifies what each section is doing.
Name your project folder andrewID-06-assignment. For example, if your Andrew ID is acarnegie, then your project directory (folder) name should be acarnegie-06-assignment. Please be attentive to this!
Starting with this assignment, we will evaluate your overall coding style (comments, indentation, variable names) and if your code has more than a few style issues, you could lose up to 1 point from the overall score depending on how you deviate from accepted style.

Open-ended Project 06: Abstract Clock (3 points)

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:

https://golancourses.net/2015/lectures/visualizing-time/ (This is a lecture by Professor Golan Levin on clocks in new media art.)

https://www.cabinetmagazine.org/issues/29/foer.php (This is a fantastic history of timetelling with unconventional clocks.)

...And we also highly recommend you gawk at this lovely abstract JavaScript clocks by Vincent Toupe: https://procyonic.org/clocks/

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 with some indicator of AM and PM.) 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, etc. Reactivity to the cursor is optional. Naturally, you’ll need to use p5’s hour(), minute(), second() functions, and possibly the 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.

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.

Program requirements:

Create your clock in p5.js.
Limit your design to a canvas which is no larger than 480 x 480 pixels, please.
Put the following information into comments at the top of your code: Your name; Your class section; Your Andrew ID
Name your project folder AndrewID-06-project. For example, if your Andrew ID is acarnegie, then your project directory (folder) name should be acarnegie-06-project.
Starting with this assignment, we will evaluate your overall coding style (comments, indentation, variable names) and if your code has more than a few style issues, you could lose 1 point from the overall score.

FUN FACTS

For this assignment, we encourage you to seriously question basic assumptions about how time is represented, although we will use a 24 (or 12) hour system. 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:

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

Handing in your work

Your handin folder handin-06 should have the two folders described above.

You will zip up the handin-06 folder and submit this to Autolab. Your overall folder organization should look something like this (indentation indicates subfolders):

  handin-06
    andrewID-06-assignment
      index.html
      sketch.js
    andrewID-06-concepts.pdf
    andrewID-06-project
      index.html
      sketch.js

Once you are ready to submit, zip (compress) the handin-06 folder (which will likely be named handin-06.zip) and hand in the ZIP FILE into the Deliverable 6 submission area on Autolab. Once you handin, check your handin history and click on the magnifying glass to look at what you submitted to make sure it looks right. IF YOU SUBMIT THE WRONG ZIP FILE, YOU RISK GETTTING A 0 ON THIS DELIVERABLE!

You may submit as many times as you’d like (in case you find inspiration and want to improve your work) up until the deadline. If you submit up to one day late, even if you submitted on time, you will be marked late. We only grade the final submission you upload to us via Autolab.