Author: David Arutiunian

As I searched for the definition of “interactivity,” I found two distinct meanings placed side by side: (1) the process of two people or things working together and influencing each other, and (2) the ability of a computer to respond to a user’s input. In The Art of Interactive Design, Chris Crawford claims that the term “interactivity” is commonly “misused and misunderstood” due to the prevalence of the second definition. He challenges this misinterpretation by outlining three essential criteria for true interaction: (1) listening, (2) thinking, and (3) speaking. Importantly, Crawford argues that all three principles must be equally present in both “actors” of the interaction, with no trade-offs. This helps to clearly differentiate between interaction and mere reaction (such as reading a book) or participation (like dancing to music), which, as I agree, are not truly interactive activities.

While I found the text enjoyable overall, some examples provided by Crawford were based solely on his personal assumptions (for instance, his discussion of performance art and the extent of interaction involved). This led me to reflect on a question posed at the beginning of the chapter that remained unanswered: what is the role of subjectivity in interactivity? How much of interaction depends on the perspective of the individual interactor?

From the text, I gathered that there is some subjectivity in interactivity, which Crawford acknowledges. However, he also emphasizes that an objective foundation for interactivity exists as well, rooted in the essential definition of interaction. I agree with this view and also concur that defining interactivity merely as “the ability to respond to input” is a misuse. Such a limited definition can constrain designers. Therefore, in my future artworks, I plan to implement Crawford’s “rule of three” when assessing the interactivity of my code.

Concept & Inspiration.

How do we understand time? How do we grasp its relativity, and how does time differ across the globe in each corner of the world?

These questions came to mind as I reflected on the nature of time. My inspiration came from a piece of artwork I encountered on Pinterest titled “Rhythm.” As I observed the moving rectangles in the artwork, they reminded me of the movement of a clock. But what do these many clocks represent? For me, they symbolized two key ideas: (1) the relativity of time, and (2) the global nature of time, with its 24 time zones that shape the rhythm of life around the world.

Additionally, I drew heavy inspiration from a talk by Casey Reas, which I reflected on in a recent writing assignment. His discussion on randomness and order heavily influenced the way in which I approached my work.

Highlights.

In my interpretation, the background of the piece represents a chaotic flurry of clock dials, moving at a faster pace than the clock hands themselves. This fast-paced, seemingly erratic animation of ellipses symbolizes the relativity of time—its ability to feel both slow and fleeting, elusive and constant. Through this hectic background, I aimed to convey how time can feel overwhelming, moving quickly yet still slipping away before we can fully grasp it.

One aspect I’m particularly proud of is the grid of 24 clock hands, which I arranged to move with a calculated precision. Each clock hand is offset by PI/6 radians, representing a one-hour difference in the 24 time zones of the world. Although the movement of the arrows may seem chaotic when viewed all at once, there’s an underlying pattern — each line is meticulously timed to reflect the rhythm of global time. I have also learnt how to implement such functions as push() and pop().

for (let lineX = 0; lineX < 4; lineX++) { 
  for (let lineY = 0; lineY < 6; lineY++) { 
    push(); 
    translate(100 + lineX * 120, 100 + lineY * 120); 

    let offset = (lineX * 6 + lineY) * PI / 6; 
    rotate(baseAngle + offset); 
    line(-50, 0, 50, 0); 
    pop();
  }
}

Reflection.

I loved working on this project, as it gave me opportunity to master the basic knowledge of loops (specifically, “nested loops” which I got particularly curious about during the class). Furthermore, I aimed to focus more on the idea and conception (relying on the talk by Casey Reas and “randomness in order”), and gave myself more time to understand what I want to achieve before sitting to code.

Probably, the only thing I could not figure out is how to properly indicate time in numerical aspect in my artwork. In the future, I would like to create more sophisticated animated shapes so the idea is conveyed clearly.

In essence, this piece is an exploration of time’s complexity — how it can be experienced in so many different ways, how slowly yet at lighting speed it can pass by, and how it is governed by a specific order we all live within.

Embedded Sketch.

For me, Casey Reas’ talk on the balance between randomness and control in artistic process appeared to be extremely motivational and spot-on. Although Reas does not provide a definitive answer on where this balance lies, the ideas he presents are still compelling and thought-provoking. For instance, I loved the way in which he highlighted the beauty of imprecision, suggesting that it stems from nature itself (which unexpectedly reminded me of the recent reading from another class on the beginning of life on Earth). To prove his point, Casey refers to the “randomness in order” seen in the artwork that demonstrates protein molecules communicating within a cancer cell. This non-obvious connection between the chaotic patterns of nature and those found in computer programming was truly eye-opening.

As I begin to work on my own creative projects using coding, I am constantly reflecting on how much I will rely on chance. For me, randomness is simply a tool to help achieve a creative goal, but it is by no means the most decisive factor. I firmly agree with Reas that artistic choices involve a little magic of chance, but they are mostly guided by thoughtful decision-making about the final result. This applies to all forms of art, as the artistic process is always shaped by stylistic choices, vision, and ideas that arise from the creative mind long before the actual craft begins. Henceforth, there is no “chance” in the foundational decision of what the work will make the viewer feel. The uncertainty only lies in the ways the effect is reached: that’s where embracing the beauty of chance and experiment becomes so handy.

Idea & Sketching.

As a newcomer to coding, this small project has been an important exercise in practicing what I have learned in class so far. I primarily focused on experimenting with basic shapes, still trying to find useful tools to add (at least) some interactivity to a static portrait.

First, I made a quick sketch in Figma of what I roughly aimed to create (see below). As a Film & New Media major, I couldn’t help but show my passion for filmmaking by incorporating a “Kodak” T-shirt (which I actually own and wear) paired with a green jacket made up of two symmetrical triangles.

My cartoon character shows no mercy to my real self: protruding ears, furrowed eyebrows, and a discontented smirk. Nevertheless, I’m still fine with that…

Highlights.

Having finished the layering of the character in p5.js, I felt that something was missing, and I had to soon realize that it was the absence of movement. Since it was my first time coding, I did a quick research to find different options for animating in JavaScript. The most suitable and easiest to comprehend for my case turned out to be the lerp() function.

I implemented the lerp() function to animate my character’s mouth by following a tutorial on p5.js.

if (mouseX > 150 && mouseX < 450 && mouseY > 150 && mouseY < 600) { // to check if the mouse reaches the body
  finalX = 300;  
  finalY = 400; 
} else {
  finalX = 280; 
  finalY = 410;  
}

initialX = lerp(initialX, finalX, 0.5);
initialY = lerp(initialY, finalY, 0.2);

I’m particularly proud of how I figured out the pace of the animation, specifically the “amt” parameter, which I set at 0.5 and 0.2. After experimenting with the function for a while, I decided to use different values for the “x” and “y” positions, so that the mouth movement would look more natural and eye-catching.

Reflection.

To summarize, I truly enjoyed working on this tiny project. I’m quite satisfied with my whatever cartoonish self and excited to dive deeper into the lerp() function as the course progresses to create more sophisticated animations and interactive projects. So far so good – JavaScript seems to be fun.

Embedded Sketch.

P.S. Place the mouse around the body so the mouth moves.