15-104: Introduction to Computing for Creative Practice

Deliverable 06 - Fall 2025

Due Saturday, Oct. 4, 2025 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.

Your sketch will be a 600 x 600 canvas that has 36 white circles, each of diameter 100, lined up in a 6 X 6 grid, just touching each other. Inside each white circle there will be a smaller circle of diameter 25 that moves around the edge of the white circle. The smaller circles in the first row will be red. The smaller circles in the next row will be green. The smaller circles in the subsequent rows will be blue, yellow, magenta and cyan, respectively. The smaller circles in each row will start in their larger white circles at angles of 0, 60, 120, 180, 240 and 300 degrees, respectively. The smaller circles in the first row will rotate at 6 degrees per frame. The smaller circles in the second row will rotate at 12 degrees per frame. The smaller circles in the subsequent rows will rotate at 18, 24, 30, and 36 degrees per frame, respectively. The smaller circles are "connected" to the center of their corresponding larger white circle with a line that connects the center of the white circle to the center of the smaller circle. (Note: you will draw the line first before the smaller circle.)

When your program starts, your circles should be in arrangement like this:

36 circles with initial small circles shown with initial colors and angles

As your program runs, each frame (i.e. repetition of the draw function) will redraw the background (to erase the canvas), draw the 36 white circles, and update and draw each of the 36 smaller circles, as shown in the animation below.

Program Requirements:

Although there seems to be a lot going on here, this can be programmed with all you know from the course so far. Let's break the program requirements down to simple steps, building up until you have the final program.

To start this, try to get the top left circle spinning correctly. Don't worry about the other 35 circles.
- Define three global variables to hold the angle for the smaller circle with respect to its larger white circle, the change in angle in degrees, and the color of the smaller circle. Just declare these variables at the top of your program. Do not initialize them.
- In the setup function, create the canvas and initialize the three global variables appropriately (in this case, 0, 6 and the color red, respectively). You might also want to set the frameRate to 10 to slow down the animation once it's done.
- In the draw function, start by painting the background with a shade of gray (to erase the canvas) and drawing the 36 white circles. You can do this directly without using transformations. (You might think about writing a separate function to do this!)
- Now use transformations to move the origin to the center of the top left circle. Define two local variables to determine the x and y location of the smaller circle given the angle and the radius of the white circle. (Think polar coordinates!) Use these variables to draw a line from the center of the white circle to the edge of the white circle at this x and y and then a small circle in the random color of diameter 25 centered at the x and y you computed. Then update the angle variable so it's ready for the next frame by adding the change in angle. Note: Although you are only drawing one rotating circle for now, remember to use push() and pop() around the transformation because you will be drawing multiple circles later, and each transformation should start with the original origin of the canvas.
- If you do this correctly, then you should see one smaller circle rotating around the top left circle! The smaller circle advances 6 degrees at a time so it should take 360 / 6 = 60 frames to make one full circle. (At a frameRate of 10, that should be approximately 6 seconds.)
Now you will expand this to work for more circles using arrays. You will start by trying to draw the rotating circles across the top row of 6 white circles.
- Change the global variables so that they're initialized to empty arrays. (e.g. angle = []; )
- Modify the setup function by putting your three initializations in a loop and add an index to your variable names using the loop variable so that you now initialize these arrays with 6 values. For example, if your loop variable is i, then instead of initializing the variable angle, you would initialize angle[i], etc.
- Modify the draw function so that it now draws the six smaller circles using their corresponding angles and colors. You don't have to change the code that draws the 36 white circles. But for the code that drew the initial single rotating circle, you now have to do that six times at different locations. So change that part of your code to use array notation now (e.g. angle[i] instead of angle). You will need an additional local index variable (e.g. i) that starts at 0. After you draw each line and smaller circle and update its angle for the next frame, increment that index variable by 1 before drawing the next smaller circle. This code should then be in a loop that controls the x location of where each white circle is centered (i.e. 50, 150, 250, 350, 450 and 550).
- If you do this correctly, then you should see six smaller red circles rotating around the white circles in the top row all at a rate of 6 degrees per frame. (See the video, focusing on the first row.)
Now you just have to modify the program so that you draw 36 spinning circles instead of 6.
- You can still use the same global array variables since they're initially empty (size doesn't matter there).
- Modify the setup function so that it initializes the arrays with 36 values for angle, the change in angle and the color for each of the 36 smaller circles. This will be a bit trickier than before since each row of circles has a different change in angle and a different color. You can use if statements to determine which change of angle and color to use.
- Modify the draw function so that it has nested loops, one to control where each white circle is located horizontally and one to control where each white circle is located vertically. You shouldn't have to change any of the remaining code since that code should work for any white circle.
- If you do this correctly, then you should see all 36 smaller circles rotation around the white circles like in the animation.
ADDING COMMENTS: 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 of your code 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”.)

A clock displaying time in binary (base 2)

Time wasn't always represented with traditional clocks that we see today. Check out these links about visualizing time:

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

https://procyonic.org/clocks/ (Lovely abstract JavaScript clocks by Vincent Toupe.)

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, transformations, etc. Reactivity to the mouse cursor is not necessary. 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.

REMINDER: We may have a code interview check after the due date to determine if you wrote the code yourself or if you used an online source or a Generative AI tool to obtain your code. Excessive use of online resources or GenAI tools without understanding the code produced will lower your final grade on the assignment. Repeated violations may lead to an academic integrity violation.