Category: F2025 – Mang

“Any idea worthy of my attention is probably too big and too complicated to be reduced to some schoolmarmish formula.”  I was quite shocked when I read this sentence. Not because I disagree, but because I feel like the whole world should read this sentence. I have always thought that society tries to package thought into neat definitions and slogans, which is not only convenient but, in my opinion, shallow. This line reminded me that oversimplification can actually strip an idea of its essence, turning something profound into something hollow. This reading overall was peppered with ideas that made me question most of what I knew about interactivity. Examples include the idea that many things typically labelled as ‘interactions’ are actually ‘reactions’, that interactivity could be a subjective concept that exists in the eye of the interactor, and that two strong factors cannot, in fact, outweigh the weakness of the third (a principle I personally used a lot).

All this combined, I think there are a few characteristics that would define a strongly interactive system. Firstly, I think the level of interactivity should be “high”. In terms of the metaphors used in the text, that would mean strong listening, speaking, and thinking simultaneously. Secondly, adaptability needs to work both ways. The system should be able to adapt to the user and the user to the system. Thirdly, I think it’s important that the user feel in control, rather than fighting the system, which is what happens when ‘interactive’ systems are built without proper understanding of what interactivity is. Finally, and this may sound vague, but a system is “strongly interactive” when the user’s “interaction” is so absorbing that it makes them not want to stop.  When the author brought up movies, it reminded me of the interactive story game apps that were popular a few years ago, where the user played a part in how the story moved forward. Maybe this is a “low” level of interaction, but it seemed to really have people hooked at the time. That said, I would agree with Crawford that interactivity is more of a spectrum, and it’s important to maintain its balance in artworks.

Through these ideas, I thought about how the user can have the chance to influence my p5js sketches. Maybe this could be through having a say in the color palette or the illustration style, or by having buttons that change the nature of the sketch completely. Maybe clicking on the canvas can add more of already existing elements, or cause different elements within the sketch to interact with each other. The possibilities are endless.

My artwork shows three race cars speeding along a simple racetrack. I love Formula 1 racing, so I wanted to recreate that feeling of speed. I was inspired by the basic car sketch example from our course website but decided to add my own twist and take it a step further by making it interactive. The cars keep looping so it looks like they are racing, and when you click a car, the FPS increases so it look like the race speeds up. Pressing R resets everything back to normal speed. I also designed a simple racetrack with grass, yellow side lines, and dashed lane markers so the cars look like they have their own lanes.

The inspiration for this piece came from our course website, which is where I found the basic car sketch as well as our substitute lesson last week with professor Riad where we explored the ball example using arrays and classes together. I used that same logic but applied it to race cars instead of balls. I also watched a few beginner p5.js tutorials on YouTube to understand how to make objects move, wrap around, and respond to mouse clicks. It took me a lot of time because I am a beginner, but I learned so much through the process.

Before starting to code, I sketched out my track layout and car design on paper. This helped me visualize the dimensions of the canvas, where the grass and track edges should be, and how many dashed lanes I needed to divide the road evenly. I also planned the car shape very simply just a rectangle with two filled circles as wheels  because I wanted something that looked good but stayed beginner-friendly to code. On the side, I brainstormed interactions like clicking for color changes or speed boosts, eventually deciding on the speed change because it made the race feel more alive. This sketch was a key part of my process because it gave me a clear plan and made the coding step much easier and less confusing. It also reminded me that even with simple shapes, I could create something that feels playful and interactive.

In terms of how I organized my code, I used a setup() function to create the canvas and make three cars with different colors and speeds. These cars are stored in an array so I can easily loop through them. The draw() function runs every frame and draws the track, moves the cars, and displays them. I made a Car class with three main functions: move() to update the car’s position, show() to draw the car’s body and wheels, and clicked(Mx, My) to check if the mouse is inside the car. I also made separate functions called drawTrack() and drawDashedLine() to handle the background design so that my code stays neat and organized.

One of the parts I’m most proud of is this snippet of code:

// make cars faster when mouse is pressed (click on any car)
function mousePressed() {
  for (let i = 0; i < cars.length; i++) {
    if (cars[i].clicked(mouseX, mouseY)) {
      fps = min(fps + 10, 120); // increase frame rate
    }
  }
}

// reset when R is pressed
function keyPressed() {
  if (key === "r" || key === "R") {
    fps = 60; // reset fps
  }

This code is what makes the program interactive and fun. When the mouse is pressed, the for loop goes through every car in the array and checks if we clicked on it using the clicked() function. If we did, the frame rate (fps) goes up by 10, but never past 120 because I used the min() function to cap it. This makes the cars look like they are racing faster. The keyPressed() function resets the speed when I press R. It took me some time to this figure out how to change the FPS, but once I got it working, it felt very satisfying and made the project feel like a real race.

This was my first time using classes and arrays together in JavaScript, so it took me a long time to get it right. I had to watch many videos, look at examples, and experiment with my code to get the movement, wrapping, and interactions working correctly. The biggest challenge was figuring out how to make the cars speed up when clicked I first tried changing only one car’s speed, but it looked strange. Eventually, I made the whole race go faster when you click, which feels much more exciting and gives the sense of a real race picking up speed. Even though it was challenging, I am proud of how it turned out and I learned a lot in the process.

A strongly interactive system, in my view, must first be intuitive. This doesn’t mean it has to be entirely self-explanatory, but if users need several pages of instructions just to figure out how to interact, the design has already failed. I mean who is going to even read 2 pages of manual/instructions these days, right? The interaction should feel discoverable through exploration.

As Crawford explains, any interaction has three parts: listen, think, and speak. If even one of these elements is weak, the entire interaction becomes unsatisfying. I think that in creative computing or digital art we often overemphasize the input (listening) and visuals (speaking) but ignore the algorithm or logic (thinking). The system should have enough diversity in its logic to produce interesting, varied outcomes rather than repeating the same response every time. Take Super Mario as an example. Imagine a version where you could only press the spacebar to jump, and Mario never actually moves only the background scrolls to simulate motion. Technically, that would still be “interactive,” but it would quickly become boring. A good interactive system allows you to achieve multiple outcomes for example move left, right, jump, pause, and even fail in different ways, giving players control. This diversity of interaction is what makes it engaging.

I also think interaction should strike a balance between predictability and surprise as we’ve discussed in class. Too much predictability leads to boredom  for instance, a game with only one level becomes dull after you memorize where every obstacle is. But if an interaction is completely chaotic it becomes unintuitive  and confusing. The balance is a design where users can learn patterns but still encounter enough new elements to stay curious.

Reflecting on my own p5 sketches, I realize I rely heavily on mouse clicks, which makes them feel reactive rather than truly interactive. To improve, I could add keyboard controls, use microphone input for both visual and audio effects, and introduce randomness so every run feels slightly different. Immediate feedback maybe by simulating animations, color changes etc. would also make interactions more interesting. Finally, asking friends to try the sketches and improving based on their feedback would help me design from the user’s perspective, not just my own.

 

We are surrounded by people every day , especially as students living on campus. We run into people everywhere, be it the dining hall, the library or even the laundry rooms. I wanted to capture that feeling by filling the entire canvas with people (the dots represent people).

But we don’t actually connect with everyone we see. In my sketch, I use distance as a threshold that determines whether a line forms between two people. The line symbolizes the emotional closeness. If two people get close enough emotionally, a connection forms between them. But life happens. People drift apart, connections break (i.e. line disappears). This is very dynamic, just like in real life.

Also, when the user clicks, a new person appear almost like meeting someone new. At first they are brightly colored because they don’t exactly fit in our network of people just yet, but over time they fade into black, representing how over time they become part of our network. While they are still “new” they don’t form any connections which mirrors how it usually takes time before we can emotionally connect with a new person. The more you click, the more new people are added, just like how engaging with others more often leads to a growing network.

Here’s the code:

let people = [];
let numPeople = 30;
let connectionDistance = 80;

const newPeopleColour = [
  [255, 0, 0],    
  [0, 255, 0],    
  [0, 0, 255],    
  [255, 255, 0],  
  [255, 0, 255],  
  [0, 255, 255],  
  [255, 128, 0],  
  [128, 0, 255]   
];

function setup() {
  createCanvas(600, 400);
  // Create initial people 
  for (let i = 0; i < numPeople; i++) {
    people.push(new Person(random(0,width), random(0,height), false));
  }
}

function draw() {
  background(240);
  for (let i = 0; i < people.length; i++) {
    // Update & display the person
    people[i].move();
    people[i].updateColor();
    people[i].display();

    // Check distance with all other people and make connections 
    for (let j = i + 1; j < people.length; j++) {
      let d = dist(people[i].x, people[i].y, people[j].x, people[j].y);
      //if close enough and not new make connection
      if (!people[i].isNew && !people[j].isNew && d < connectionDistance) {
        stroke(0,50);
        line(people[i].x, people[i].y, people[j].x, people[j].y);
      }
    }
  }
}

function mousePressed() {
  people.push(new Person(mouseX, mouseY, true));
}

class Person {
  constructor(x, y, isNew) {
    this.x = x;
    this.y = y;

    this.speedX = random(-3, 3);
    this.speedY = random(-3, 3);

    if (isNew) {
      // Pick a bright random color
      let c = random(newPeopleColour);
      this.r = c[0];
      this.g = c[1];
      this.b = c[2];
      this.isNew = true;
    } else {
      // For initial people make them black
      this.r = 0;
      this.g = 0;
      this.b = 0;
      this.isNew = false;
    }
  }

  move() {
    this.x += this.speedX;
    this.y += this.speedY;

    // Bounce off edges
    if (this.x < 0 || this.x > width) {
      this.speedX *= -1;
    }
    if (this.y < 0 || this.y > height) {
      this.speedY *= -1;
    }
  }

  updateColor() {
    if (this.isNew) {
      // Fade to black eventually 
      this.r = max(0, this.r - 1);
      this.g = max(0, this.g - 1);
      this.b = max(0, this.b - 1);

      if (this.r === 0 && this.g === 0 && this.b === 0) {
        this.isNew = false;
      }
    }
  }

  display() {
    noStroke();
    fill(this.r, this.g, this.b);
    ellipse(this.x, this.y, 8, 8);
  }
}

The main challenge I faced was that at first, two lines were being drawn between the same two people which broke the clean look of the network. I solved this by using a nested for loop and tarting j from i + 1 which avoided checking duplicate pairs and made sure each connection line was only drawn once. I also really like the colour-fading logic, it’s simple but menaingful as new people slowly assimilate into the network. The max() function is a small but important detail, it prevents colors from becoming negative and making sure the isNew flag flips to false so these people can eventually form connections.

In terms of future work and improvements, I could add a ‘main character’ , a single person who’s at the center and stays still while the rest of the network moves and connects around them. This would focus on the idea of how one person’s network changes.

For this project, I created a small aquarium scene, where colorful fish swim across the screen. Each fish is an object with its own properties like color, speed, and direction, and they move infinitely using simple math. I used arrays to manage multiple fish at once, and clicking on a fish makes it disappear, while pressing “C” brings all the fish back.

I decided to do this because I wanted to practice the class material but keep it interesting at the same time. Initially, I just had fish swimming in one direction with different speeds but I thought it was too boring so i added different directions and made them more interactive.

One problem I ran into was making fish face the correct direction when swimming left or right, but adding a simple check for xspeed solved it. Overall, this project helped me practice object-oriented programming and arrays while making a fun, interactive visual.

The part of the code that I’m proud of is this part:

move() {
    if (!this.visible) return; // skip if hidden

    this.x += this.xspeed;
    this.y += this.yspeed;

    let bodyHalf = 30;
    if (this.x > width + bodyHalf) this.x = -bodyHalf;
    if (this.x < -bodyHalf) this.x = width + bodyHalf;
    if (this.y > height + bodyHalf) this.y = -bodyHalf;
    if (this.y < -bodyHalf) this.y = height + bodyHalf;
  }

Here, it makes the fish disappear when clicked. It took me some time to figure out where I’d need to press and how not to let the “invisible” fish get in the way.

Something that I would like to improve in the future would be adding more aesthetics to it and making the fish more sophisticated-looking so to say.

But after all, here’s what I got, try to catch them all 😛

Reading Chris Crawford’s The Art of Interactive Design reshaped the way I think about interactivity. Crawford defines interactivity not as a simple feature or function but as a conversation, a cyclical process of listening, thinking, and speaking. What really drew me into this reading the most was his insistence that many things we casually call “interactive” are not interactive at all, because they lack a genuine back-and-forth exchange. Clicking a button or watching an animation play is not enough if the system does not “listen” and respond with meaningful output that takes the user’s input into account. This shifted my perspective away from thinking of interactivity as a checklist item and toward understanding it as a measure of quality and how deeply the system engages with its user.

One passage that stood out to me was Crawford’s description of the conversation between Gomer and Freedgund, where both must listen, think, and respond to create a true dialogue. It made me question: How do we measure good listening in a digital system? Algorithms process data, but does that count as “thinking” or “understanding”? This question feels even more relevant today, with AI systems claiming to “converse” with users. Crawford’s argument suggests that the test of interactivity lies in whether the user feels heard and whether the system’s response prompts further exploration or reflection.

Reflecting on my own work with p5.js sketches, I realize I have often stopped at surface-level interactivity: a mouse click might trigger a color change, or the position of the mouse might move a shape. But these interactions rarely invite deeper engagement. A strongly interactive system, in my view, should encourage curiosity, creating an open-ended dialogue where the user feels like a co-creator. Moving forward, I want to implement more engaging interactivity for example, using the speed of the mouse movement to alter the size or complexity of generative patterns, or incorporating audio could be an interesting way of engagement. Adding unpredictability by using randomness is also a key factor that could make the experience feel more alive. Ultimately, I want my sketches to feel less like static art pieces and more like evolving systems that “listen” to the user and respond in a way that makes them want to keep interacting.

the author differentiates “tools” for utillity, such as the hypothetical Nintendo fridge, from something “fun” and “interactive”. thus, he raises a question, “is interactivity utterly subjective?”, only to discuss the process of interactivity as a subjective flow. in particular, he argues that the thinking that spurs creativity–and a certain level of randomness as we discussed last week–is a crucial element of interactivity.

I agree that the thinking for creative responses is the most important part. in the past, even now, some low- and mid-level interactive creations, as the author would categorize, are solely dependent on a set of rules that only attempt to be generative. their output doesn’t serve a meaning itself, only reflecting part of a bigger scene defined by the rule setter. ideally, however, every output should prompt some further thinking in the receiver of the response, or the originator of the conversation. it is indeed fairly difficult to achieve so, particularly in the past.

the advent of Generative AI could bring some change, especially when it’s seemingly untouched in the interactive visual art sphere. what if, I say what if, some code is written in real-time, following a certain broader set of rules? what if, in addition to a set of rules, some new impromptu visual rules are created in real time?

For my project, I decided to add an element of interactivity. I was inspired by the visuals that were posted. I initially intended to make an “experience”, where I could use randomized texts to create unique shapes, however, I decided to create a simple blackboard instead. The idea had initialized in the library rooms, where my friends and I were studying for Calculus. My peer started writing on the whiteboard, and he had to keep on erasing previous work to progress further, when I wondered “what if we had a digital white board? One that erases on command?”

//if pixel is active, check how long it's been active
if (pixels[i][j] > 0) {
  //stay white for 2 seconds
  if (millis() - pixels[i][j] < 2000) {
    fill(255); 
  } else {
    //time expired
    pixels[i][j] = 0;
    fill(0); 
  }
} else {
  //default state is black
  fill(0);
}

I am especially proud of this part of my code. It took me 5 hours just skimming through pages and brain-numbingly consuming youtube videos to figure out how to make my pixels change colour and stay and go back to default.

  //on left mouse press, activate the pixel under the cursor
  if (mouseIsPressed && mouseButton === LEFT) {
    //convert mouse position to grid coords
    let i = floor(mouseX / pixelSize);
    let j = floor(mouseY / pixelSize);

    //only update if inside the canvas
    if (i >= 0 && i < cols && j >= 0 && j < rows) {
      //store the activation time
      pixels[i][j] = millis();
    }
  }
}

I also enjoyed programming this part of m code, where I had to find the location of the cursor and change the pixel colour.

Overall, I think I incorporated the loops smoothly into my project, however, I wanted to integrate a “menu bar”, with and eraser and a pen colour. I hope to involve more complex interactions in my upcoming assignments.

Reas’ talk on chance operations fascinated me and made me reflect on how “organized chaos” is present in our everyday life, such as jazz. Jazz musicians often make up melodies on the spot, riffing off each other. There’s a theme, but most of the melodies come from being in the moment and catching the rhythm. That’s what I think most of Reas’ projects are where the “non-human agent” creates them; the experience or art comes to be by following a basic line of code to give a unique piece of visuals.

The video opened my eyes to how one can use randomness to be creative. Before watching Reas’ talk, I used to attach a negative connotation to “chaos”. That it means destruction. So rather than welcoming it, I would try to eliminate variables that would disrupt the aesthetics or homogeneity of my projects. I realized that allowing a little bit of “chance” would help me discover new experiences, such as attending a surprise dinner party would allow me to form relationships with incredibly, grounded people.

What stood out to me the most is the perfect balance and tension of chaos and order. Reas’ examples of using very simple shapes, like dots and dashes, or even a single line of code from the 10 PRINT program indicated that there’s beauty in a set of instructions mixed with randomness.