Creative Coding Week 2: Interactivity/Time

Living in a world full of responsive screens and media, many people seem to assume that interactivity lives within every “smart” product. Without second-guessing my thought, I have always regarded things that “talked back” to me as interactive. However, in The Art of Interactive Design, Chris Crawford defined interactivity as such:

Interaction: a cyclic process in which two actors alternately listen, think, and speak.

Crawford respectively explained his interpretation of actors, input(listen), process(think), and output(speak), and suggested that rather than being confined to a binary, interaction should be regarded as a spectrum with different levels of interactivity. Crawford’s definition provided a relatively clear guideline for determining interactivity, especially for daily objects that are non-digital. For instance, a plant is responsive rather than interactive because it is unable to process non-environmental information and give responses that cannot only be visually perceived. A dog displays interactivity despite it not being able to speak the human language because it is able to process and output some reactions that are comprehensible to the owner and/or other people.

But, this definition gets messy when it comes to digital interfaces. Would smart assistants be interactive? How about games like Nintendogs? If I were to expand on Crawford’s definition of interactivity, I’d say that since interaction involves two or more actors, whether or not something is interactive should be perceived and not assumed by definition. For example, in a conversation that involves 3 people, if one person within the group is not verbally contributing to the dialogue but is taking in information and having an internal discussion, that conversation could be interactive for the person that is silent. But this will not be interactive to the two other persons who aren’t able to hear that internal dialogue. Since interactivity is so debated and broadly defined, it would be limiting to settle on a universal explanation for interaction; so why not let the two actors decide?

For this week’s assignment, I decided to make a clock using the time functions in p5js. I was inspired by Metronome, an art installation in Union Square, New York (Fig. 1). The installation used to be a clock that counts down to time left until midnight. Recently, it has been reprogrammed to count down to the amount of time left to prevent the impending climate crisis.

Fig.1: Metronome in Union Square, New York, NY

I really liked the poetic aspect of Metronome as it reminds me to be present in the current moment and cherish the time I have now. However, I wanted more elements to be in my countdown clock, and coincidentally I was playing techno music in the background while I was trying to come up with a concept. As I was bopping my head around, I thought, why not make a countdown clock that can also be used as a mood display at a party? So instead of making a clock that tells the current time, I went for a countdown clock with a changing gradient background.

A snapshot of my sketch, my codes are linked here.

For this sketch, I was inspired by this stripe clock that I found online and an hour-long YouTube video of changing gradients. The construction of this sketch was pretty straightforward and I have more detailed documentation in the codes. But my biggest challenge was trying to understand lerpColor() and attempting to make my background gradient flow like the video. I guess I need to tinker around with the range of randomized colors to make the transition smoother, but for the sake of the assignment, I am leaving this as a work in progress.

Update: After reaching out to my amazing professor Scott and classmates, I discovered this transitioning gradients sketch which I will use to continue to improve my sketch. Stay tuned!




Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Looking for an Adobe Muse Alternative Now That it’s Discontinued…

Adobe Muse vs Adobe InDesign + Ajar Productions in5

How we sketchnoted an entire conference…

What is Design Concept Award?

ITSKINS Supreme Frost iPhone 12 Pro Case REVIEW | MacSources

UI Navigation Update to Enhance UX for Enterprise Software

🖼️ — FoW, No8: Six Cap, a Cover Perfect, Space-Saving Font

Daily web design inspirations, June 1

How icons improved our secondary navigation experience by 40%

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Cory Zhao

Cory Zhao

More from Medium

Artificial Intelligence in Gaming & our lives| Gaming Technologies

From Open Source to NFTs: A Love Letter

Making a generative recreation of Eccentric Constructions by Laszlo Moholy-Nagy

Four Resources to Generating Your Next NFT Collection