15-104: Introduction to Computing for Creative Practice

Deliverable 06 - Fall 2024

Due Saturday, Oct. 5, 2024 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 500 x 500 canvas that has 25 white circles, each of diameter 100, lined up in a 5 X 5 grid, just touching each other. Inside each white circle there will be a smaller circle of a random color of diameter 20 that moves around the edge of the white circle at a random rate between -5 and 5 degrees per frame. 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, you might see something like this (with other random colors for your smaller circles):

25 circles with initial small circles of random colors shown at 0 degrees

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

Program Requirements:

To start this, try to get the top left circle spinning correctly. Don't worry about the other 24 circles.
- Start with three global variables to hold the angle for the smaller circle (with respect to its larger white circle), the change in angle in degrees (a random number between -5 and +5), and the random 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 the draw function, start by painting the background with a shade of gray (to erase the canvas) and drawing the 25 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 current angle. (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 the correct angle, and then a small circle in the random color of diameter 20 centered at the end of that line. Then update the angle variable so it's ready for the next frame. 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!
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 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 5 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 five smaller circles using their corresponding angles and colors. You don't have to change the code that draws the 25 white circles. But for the code that drew the initial single rotating circle, you now have to do that five 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).
- If you do this correctly, then you should see five smaller circles rotating around the white circles in the top row!
Now you just have to modify the program so that you draw 25 spinning circles instead of 5.
- 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 25 values for angle, the change in angle and the color for each of the 25 smaller circles.
- 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 25 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”.)

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.