In Chapter 1 of The Art of Interaction, “What Exactly is Interaction”, the discussion of interactivity goes beyond simple cause-and-effect relationships and explores how a system can engage users in meaningful ways. The idea that a truly interactive system should not just respond but also “think” in some capacity aligns with my own belief that interactivity is more than just reaction—it should involve some level of contemplation or adaptation. This challenges traditional perspectives on interactivity as being solely input-output driven. I found myself questioning whether an interactive system needs to have intelligence or just the illusion of it. Could randomness or unpredictability be enough to make a system feel “thoughtful” without actual intelligence?

One of my key takeaways is the importance of variety and unpredictability in user experiences. Instead of simply offering pre-defined responses to user input, I want to explore ways to make my sketches feel more dynamic and responsive. Introducing randomness in outputs could create the illusion of an evolving system that adapts to user behavior rather than just executing a set of rigid, predetermined responses. This approach also reflects my opinion that a truly interactive system should engage users in a way that feels organic and intentional, rather than mechanical.

Reading Crawford’s thoughts on interactivity made me realize how often we misuse or misunderstand the term. He argues that true interaction is more than just clicking buttons or watching something respond—it’s a continuous cycle of listening, thinking, and speaking. This made me question a lot of things I previously considered interactive, like video games or even websites. Are they really interactive, or am I just reacting to what they already decided for me? Crawford’s example of a refrigerator light turning on when you open the door really stuck with me. We say it “responds,” but does it actually interact? Probably not. It makes me wonder—how many things in digital media are truly interactive, and how many just give an illusion of interactivity? I’m also curious if we, as users, even want true interactivity all the time. If everything required deep engagement, wouldn’t that be exhausting?

His perspective also makes me rethink my approach to designing p5.js sketches. If interactivity isn’t just about reacting, but about engaging in a meaningful back-and-forth, then my sketches should create that kind of loop. Right now, they mostly rely on simple user inputs like clicks or movement, but how can I make them listen better? Maybe adding more adaptive responses or making the program “think” before reacting could help. A strongly interactive system, in my view, would be one where the user feels like they are having a conversation with the system, rather than just pressing buttons to see what happens. Overall, Crawford’s ideas push me to design experiences that aren’t just visually engaging but intellectually engaging too.

Concept:

In the spirit of valentine’s week, I made this interactive scene to celebrate rose day with my boyfriend. It’s inspired by our favorite trip to japan, where we fell in love with the beauty of cherry blossom trees and the iconic torii gate. The scene aims to capture those sweet memories by blending gentle falling flowers, a warm sunset, and a romantic gesture of offering roses. It’s meant to feel cozy, nostalgic, and filled with the magic of our shared experiences. Since we are in a long distance relationship, I gave this as a gift.

Highlight:

The highlight of this scene is definitely the cherry blossom trees. I spent a lot of time studying pictures of real sakura trees to capture their delicate look and subtle branching. I wanted them to appear natural, so I used a fractal-like approach: starting with a trunk and randomly growing multiple smaller branches at slightly varied angles and lengths. Each branch has clusters of blossoms added at the tips, mimicking the way real cherry blossoms bloom in bunches. striking a balance was tricky—too few blossoms made them look sparse, but too many quickly made them look overly dense. Eventually, layering different pink tones and carefully adjusting the random growth patterns helped create a softer, more realistic effect.

// add a random cluster of flowers at a branch tip
  addFlowerCluster(xcenter, ycenter) {
    let numflowers = floor(random(4, 8));
    for (let i = 0; i < numflowers; i++) {
      let offsetx = random(-20, 20);
      let offsety = random(-20, 20);
      let size = random(6, 10);
      let rot = random(TWO_PI);
      this.flowers.push(new flower(xcenter + offsetx, ycenter + offsety, size, rot));
    }
  }
  
  // display all branches and flowers
  display() {
    push();
    translate(this.x, this.y);
    scale(this.scalefactor);
    
    // draw branches
    for (let b of this.branches) {
      b.display();
    }
    
    // draw flowers
    noStroke();
    for (let f of this.flowers) {
      f.display();
    }
    
    pop();
  }
}

Improvements:

I could add more details to the roses, like multiple petals or soft shading, to make them look richer and more lifelike. Similarly, refining the branching pattern and blossom clusters of the cherry trees could bring even more realism by adding subtle color variations and layered petals. Another improvement could be animating the actual gesture of handing out the rose, so the flower doesn’t just glide through the air. Seeing a little motion in the characters’ arms or a gentle pass of the rose would make the scene feel more personal and sweet.

First and foremost, this was one very interesting read.

One of the biggest challenges I ever faced since university started is probably explaining my major to my family. “Interactive Media.”… “But what is interactive?”… “How is media interactive?”… “Aren’t all medias interactive?”, till it lead me to wonder myself, “What is interactivity really?”

To see Chris Crawford’s take on this subject was very entertaining; his arguments and engaging form of writing made me think deep about interactivity. In this chapter, he describes it as “a cyclic process in which two actors alternatively listen, think and speak”. Initially, I was a bit taken aback by this definition, and his arguments on how certain things like reading or film weren’t really interactive, just engaging or participative. But after reading the whole chapter, I began to understand this take on interactivity more.

A strongly interactive system should definitely have these three characteristics. It should be able to receive our input, to process our reaction, and produce meaningful engaging output, stimulating a conversation between the two actors. I also think there should be a concept of control in the hands of both actors; something which can continue the interaction meaningfully, influencing the outcome. I also think that the interactions itself should be quick; one could argue that reading and film are interactions between the writer/producer and the viewer, just an extremely slow one. I also think that it should be adaptive to the user’s preferences and behaviours over time.

To increase the degree of user interaction in my p5js sketches, I think I can utilise the skills we learned in class, like mouse events and user defined functions. I can add more interactive elements like responsive animations, maybe try implementing hovering effects. The world of interaction is open to explore, experiment and implement.

For this week’s assignment, we were tasked with creating a piece of generative artwork. Fortunately, I was hit with inspiration pretty soon after leaving class. This week was candidate weekend for new potential students, and I got to watch them crowd up around volunteers. This inspired me to create this artwork, which has a grid of blocks, with an interactive feature of all the blocks pointing towards the mouse.

We were asked to use Object-Oriented Programming for this assignment, so I started by first programming first block to see whether I could actually get the triangle to follow the mouse around or not. In my previous assignment, I had learnt how to use the rotate() and translate() functions, but this time, I needed to have it rotate according to angle of my mouse. This proved to be the most challenging part of this task. I struggled with calculating the angle (research eventually led me to the atan2() function), and then actually having the triangle rotate about its center. I did end having to hardcode some values into the function, but its functionality felt satisfying to achieve.

A different part of the code that I am especially proud of is the random rotation of the blocks towards the bottom half of the artwork. I used the map() function we had discussed in class to adjust for the intensity of the rotation depending on the row the blocks were in. I think it turned out quite organic-looking!

//rotating the rows at the bottom half
    if (this.row >= rows - 4) {
      //making the level of rotation more intense as the grid goes on using map() function
      let intensity = map(this.row, rows - 4, rows - 1, 5, 25); //increasign rotation for lower rows
      //converting to radians for the rotate() function
      this.fixedRotation = radians(random(-intensity, intensity));
    } else {
      this.fixedRotation = 0; //no rotation for the top rows
    }

Overall, I am quite glad with the end result of my piece. Though in the future, I would like play a bit more with the colors. Currently, it is black and white, as I couldn’t quite get a colored gradient without it looking odd. I want to also figure out how to fix the center of rotation without hardcoding it. Regardless, I am still very happy with the interactive feature of the piece.

 

 

Concept:

For this week’s production assignment, we had to use arrays and object oriented programming to create a generated artwork. So, I decided to take inspiration from Van Gogh’s painting “Starry Night” (picture taken from Wikipedia) and create a similar piece using OOP. So it would basically be a night scene, with yellow and blue dotted swirls in the sky, a moon and the iconic cypress tree.

To use arrays and OOP in my artwork, I decided to make the sky “swirls” using classes, with the colours from an array. It was a bit tricky to make the classes, and I had to debug the code several times, especially when creating the instances of the class. However, the comments in the console bar and Perplexity helped me figure out what went wrong.

A part of the code I’m particularly proud of :

This is definitely the code for the class. It was a bit hard, especially because it was the first time I was trying Object Oriented Programming, so I am super proud of how the sky turned out!!

class drawSwirl {
  
 constructor(a, angle, scalar, speed, colours) {
   this.a = a;
   this.angle = angle;
   this.scalar = scalar;
   this.speed = speed;
   this.colours = colours;
 }

  draw() {
  
  var x = this.a + cos(this.angle) * this.scalar;
  var y = this.a + sin(this.angle) * this.scalar;
  fill(random(this.colours));
  stroke('#ffffc5');
  strokeWeight(0.5);
  ellipse(x, y, 5, 5);
  this.angle += this.speed;
  this.scalar += this.speed;
  
  }

}

Embedded sketch :

Challenges I faced and the room for improvement :

I could’ve definitely added some interactivity to it. The cypress tree had to be made using beginShape(), which was extremely hard, especially with so many plot points. For this, I used Geogebra to plot points, calculated them and added it in.

Overall, I’m pretty happy with result of this artwork. There are definitely some things which I could add, maybe the village in the original painting, or some form of interactivity. But I also loved the challenge of using classes, and I’m proud of the swirly sky!

I liked how the author took the vague concept of ‘interactivity’ and was able to neatly break it down into three simple parts. When I think of the word, I imagine a fairly basic system where an otherwise one-sided info dump is intentionally broken up by prompting the user to engage with it. For example, an educational application might have the user answer questions during or between readings/videos. The idea of a three-step process, where each stage requires effort and intent, makes things much more concrete to think about. The manner in which the author approaches each point was also very interesting. For example, they kept bringing up cases that were either too trivial or too exaggerated to fit into the initial argument, as well as mentioning that certain people would argue on behalf of those edge cases. This naturally led into the discussion of measuring interactivity through ‘degrees’ instead of as a yes/no, which made the argument even easier to digest. The abundance of anecdotes, similes, and metaphors also did a lot to illustrate their points while providing a source of entertainment that helped me get through the reading.

In my own work for this class, I have made some effort for all of my weekly production pieces to include some form of basic interactivity. The second week’s piece allowed the user to move their specific block around and paint in the gridlike canvas, along with some other functionality, and this week’s piece provides some ability to manipulate the layered shapes and essentially create new variations on the spot, or to focus on the appearance while the layers are in motion. I wouldn’t call these strong forms of interactivity, since it really caps out at moving what’s already in the scene around. A relevant quote that stood out to me was that “participation is not the same thing as interaction,” and in these cases the user is really just participating due to the very limited input and feedback.

Concept:
This generative artwork was inspired by kaleidoscopes, with specific regard to the shifting patterns they display as you rotate it. I used the OOP principles we covered to make a Hexagon class and relevant properties/methods for it, and combined it with a 2D array to create multiple layers of hexagonal grids. I implemented randomness by randomly setting the colour and opacity of each hexagon, with the latter being constrained between 30 and 80 to allow for some clear overlap and blending between layers. I initially planned to have three layers, being controlled by mouse/arrows/wasd respectively, but I ended up scrapping the mouse movement since I liked the imagery of peeling back the upper two layers to reveal the remaining one, plus using keys allowed me to set a specific speed value instead of being at the whim of the cursor’s movement.

Highlight:

// // Fill a specified layer with hexagons
function fillLayer(index) {
  // // Loops to populate layer
  let offsetCol = false;
  for (let x = -(width/2); x < width*1.5; x += 1.5*hexSize) {
    for (let y = -(height/2); y < height*1.5; y += 2*hexSize) {
      // // Offset every other column --> interlocking pattern
      if (offsetCol && y === -(height/2)) {
        y += hexSize;
      }
      layers[index].push(new Hexagon(x, y, hexSize));
    }
    offsetCol = !offsetCol;
  }
}

Embed:

Reflection:
I’m pretty happy with how this piece turned out, in both the creative and programmatic aspects. I felt that I had a clear vision going in this time, and was able to actually realize it. My code itself was better contained after compartmentalizing and encapsulating into functions and methods, and I was successful in cutting down on needlessly making functions. On the creative side, I ran into a number of happy little accidents that ended up improving my end result, which was a breath of fresh air.

Despite this specific improvement, I still definitely need to plan things out more, since I found myself having to constantly readjust my code in order to deal with things like messing up the math for my hexagons or implementing the movement functionality with keyIsPressed() instead of keyIsDown().

Concept

In this p5.js sketch, my main objective was to practice the use of classes and arrays. In my sketch, little objects called “walkers” wander randomly across the canvas, leaving behind the trail that slowly fades away. Each walker has its properties (see below in Code Highlight part), which are determined randomly at the moment of creation (user click).

Demo (Click on canvas)

Code Highlight:

The core of this sketch is the Walker class. It encapsulates everything each walker needs to function:

// Walker class definition
class Walker {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    // Give each Walker a random color
    this.col = color(random(255), random(255), random(255));
    // Control how quickly it moves around
    this.stepSize = random(1, 3);
  }

  update() {
    // Randomly move the walker in x & y directions
    this.x += random(-this.stepSize, this.stepSize);
    this.y += random(-this.stepSize, this.stepSize);

    // Keep the walker within the canvas boundaries
    this.x = constrain(this.x, 0, width);
    this.y = constrain(this.y, 0, height);
  }

  show() {
    noStroke();
    fill(this.col);
    ellipse(this.x, this.y, 8, 8);
  }
}

Inside this class, the update() method adjusts the walker’s position in small random increments, while show() draws a small ellipse at its current location.

The background(0, 13) call in the draw() loop is also important because it uses transparency to slowly erase the walkers’ paths, creating the glowing trails of each walker (I think it looks kinda cool).

Reflection & Improvements for Future Work

First of all, it was really entertaining to watch each walker wander around, leaving a trail. By simply changing parameters like number of walkers, their step size, or fade value in the background, one could produce unique versions of this piece.

In the future, I would love to make sure that the walkers of the same color would interact with each other (mixing together and creating a bigger walker). Another interesting idea would be to incorporate music in this piece (maybe 90s like Jungle beat) -> this way each walker would change its size/movement speed/direction based on the song.

If one would think long enough, the possibilities for making this piece more immersive and dynamic are essentially limitless.

Maybe one could make a game out of this piece, who knows?

Chris Crawford’s idea of interactivity as a conversation between two participants came as a novelty to me. Before reading this, I assumed that any program that reacted to user input was interactive in its nature, but after reading this I was convinced that an interactive system must possess these three elements; listening, thinking and responding/speaking. 

I feel like Crawford’s example of the refrigerator light was brilliant, it made me rethink what it means for a system to be truly interactive. I began examining the apps and websites I use every day and noticed that many of them only react to user input without actually processing information in a meaningful way. They operate on predefined rules, responding to clicks and taps but not truly engaging with the user. This made me question whether these systems, despite their responsiveness, can really be considered interactive in the way Crawford describes. 

This reading also made me reflect on how I can make my own p5 sketches feel more interactive. Right now, they mostly respond to simple inputs like mouse clicks, but what if I could design interactions that feel more like a two-way conversation?

Instead of just reacting instantly, the system could analyze patterns in user input, adapt its responses based on context, or even introduce an element of unpredictability to keep the interaction dynamic. For example, it could recognize different drawing styles over time and subtly adjust its behavior to match the user’s preferences. Of course, achieving this level of interactivity would likely require more advanced tools than p5.js (Maybe use of LLMs/AI).

I would love to create something beyond basic cause-and-effect responses and explore ways to create a more engaging.