Intro:

This assignment will be a little different. We have done enough practice of basic programming concepts by (re)creating specific shapes and patterns, but now it’s time to exercise a bit more of the creative aspect of creative coding.

These exercises are a lot more open-ended and require a more involved process of conceptualizing and planning before executing.

Each of these exercises should have a README.md file with a brief documentation of your thoughts process, what you are trying to achieve, sketches of your ideas, things that you tried, but didn’t work, etc. The writeup will help me follow your process when grading, so the more info you give me, the better I can evaluate your submission. You can use the following rubric to guide your writeup:

• Summary of the exercise: in 1 or 2 sentences, what is the exercise about?
• What is the code suppose to do? What were you trying to implement?
• Plan of execution: what was your plan for doing the assignment?
• How did you actually implement your idea?
• What was the hardest part? What was the most fun part?
• Include any drawings or diagrams that you made while sketching the exercise

You can clone our original template twice and use 2 separate repositories (HW04A and HW04B), or try out our brand new multi-sketch template. Whichever is easiest for you.

Please enable GitHub pages on your GitHub repo(s) and use Brightspace to submit GitHub links to your repositories.

Grading:

The following guide will be used for grading:

Implementation: work shows evidence of understanding programming concepts and you are fully using them to express your ideas.

Thoughtfulness: project demonstrates your personality and it’s not a straightforward re-implementation of someone else’s idea.

Exercises

HW04A. Keeping Track of Time (5 points):
We learned about how p5js loops infinitely through our draw() function. We also looked briefly at some of its Time & Date functions. For this exercise we are going to create a clock.

More precisely, we’ll create a mechanism that keeps track of time. It can be a standard hour/minute/second analog clock, or a more abstract interpretation of a clock. It can keep track of time in 24-hour intervals, or a longer period of time, like a year/month/week clock (calendar).

The requirements are that it should keep track of at least 3 sub-divisions of time. If we implement a 24-hour clock it should have minutes and seconds (or some other sub-divisions of the 24-hour period). If we implement a year-long clock (calendar), it should have some sub-divisions like months and days, or seasons and weeks. We can implement a 80,000-hour clock, or a 10,000-year clock as long as we have at least 3 sub-divisions. For full credit, specify what you chose to implement in the README.md file.

Some references, but for full “Thoughtfulness” points your clock should be different from these:

• Banded Clock by Golan Levin
• Hex clock by Jacopo Colo
• Color clock by Jack Hughes
• Polar clock by Gabriel Bucknall & Mike Bostock
• Day of Dots by Mitchell Charity

HW04B. Interactive Drawing Interface (5 points):
Using p5.js functions and variables for detecting mouse interactions, create an interactive canvas that draws something different every time there’s a mouse click or movement. What shapes to draw is up to you: they can be simple rect() of different proportions, line() of varying widths or even arcs() and bezier() curves with random() parameters. It can be an ellipse() that falls off the screen leaving a trail.

The location of the shapes should be related to the mouse location on the canvas (if it makes sense), and the colors and other parameters should always be different. You can use just one shape for the whole exercise (as long as the parameters are always different) or you can vary the shape with each click/movement.

Write about your choices in the README.md file in your repository. How many shapes are you using? Are you drawing when the mouse is pressed or when the mouse is moved?

Look at the Mouse Events section of the p5.js reference for all of the available variables and functions regarding mouse movement and actions.

Knowing how to get random numbers within a specific range will go a long way for this one.

Since we have to keep all the drawn shapes on screen between frames we can’t call background() in the draw() function, but have to put it in setup().

Tip: if we want to vary the shape with each click, one way to do that is to keep a variable that counts the number of clicks and then pick the next shape to be drawn based on whether that number is odd/even, or a multiple of 10, or larger than 50…

What is interaction?

Keep this question in mind while you read this week’s texts and write your 200-word response to:

As always, your response should be personal, meaning that you should be expressing your views and opinions about the text and not just summarizing it. You can use the following rubric to guide your response:

• Short summary: in one or two phrases, what are the texts about?
• Memorable quote: Is there a phrase in either of the texts that stands out or captures the main idea of the texts?
• Did you learn something new? What?
• What do you agree or disagree with? Why?
• How is this text related to programming?
• Is the text related to any of the other readings we’ve done so far?
• If you were to continue reading the book which chapter do you think would resonate the strongest with you?
• How do these texts relate to each other? What would Chris Crawford say about “The Media Art Pose”?

Please submit your response via Brightspace.

Grading for the readings will be assigned following these considerations: