Month: September 2025

“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.