Category: S2025 – Shiloh

1. What do you consider to be the characteristics of a strongly interactive system?

Reading the essay, and considering the technological systems we interact with every day made me reflect considerably about interactivity, and especially how it relates to intuitive design, user experience, and user interfaces.

I would consider strongly interactive systems to be systems that users have significant control over what the system performs, with significant room for user creativity. In this regard, a command line interface (CLI) terminal is an incredibly interactive system. However, simultaneously a CLI is also extremely unintuitive and can require years of experience to become comfortable and fully acquainted.

Researchers at Xerox PARC developed graphical user interfaces (GUIs) to provide significantly more intuitive experience for users. However, in my opinion, a GUI can be significantly more limiting for interactivity in certain cases, as compared to a CLI (e.g., most internet servers require operators to interact through CLIs). Other tools however, such as Adobe Photoshop, could likely not exist without the existence of a GUI. In these cases, it is the GUI that enables the creativity and all interaction. Furthermore, developers must design these GUIs to be open-ended, providing a list of tools that artists can operate to accomplish a wide array of goals.

As tools such as ChatGPT become common place, I again began to wonder how interactivity will adapt as AI agents begin to interact with computers for us, and we interact with these models through natural language or even speech. I suspect we are again at the precipice of a revolution in human computer interaction (HCI), where our interactions with computers changes profoundly.

2. What ideas do you have for improving the degree of user interaction in your p5 sketches?

In regards to interactivity with p5.js, the design comparison from before again comes to mind: some GUIs are designed by developers to enable users to accomplish a very specific set of goals (e.g., Microsoft Word, or Grammarly). In these applications, users are relatively limited to a specific way of doing things, and features that are not implemented in the GUI are likely not possible. Other creative applications (i.e., Photoshop) provide users a set of tools that enable open-ended problem solving, where the developers likely do not foresee many of the ways their tools will be applied. I would like to experiment more with the latter–enabling users to inject their own creativity into the system, and sparking a higher degree of interactivity.

Overview

My assignment this week builds upon my concept from last week, introducing objects that interact with each other–inspired by light cycles as seen in the 1982 film, Tron. In my p5.js work, 5 light cycles are drawn on the board, each with a light trail that follows behind it. Upon running into another light train–whether it be it’s own or another cycle’s trail–the cycle will disappear and respawn elsewhere.

Discussion

One of the interesting coding patterns I used in this work is the use of a global array to track all trails in a single array, rather than including a trail array in each cycle object. This is helpful in two key ways: 1) It makes it simple to perform a check to see if a cycle has crashed into a trail. 2) It optimizes for spacial locality in cache memory, to provide better performance.

I named the array of trails garbageCollector as a reference to garbage collection mechanisms in programming languages, that analyze memory usage and automatically cleanup unused memory by tracking references. Similarly, we decrement counter on every call to draw() until it is negative, at which point we remove it from the list.

A problem I ran into was figuring out how to efficiently check for collisions. While I could have used the dot product from linear algebra to detect whether two lines are perpendicular (and actually colliding), I instead opted to align all light cycles to multiples of 10, and just test whether the latest point is identical to any points currently in the garbage collector.

The trail code in reference is shown below:

let garbageCollector = [];

// ....
function draw() {
  // ...

  // Tail management
  let nextDel = 0;
  for (let i = 0; i < garbageCollector.length; i++) {
    // decrement the point value
    point = garbageCollector[i];
    point.counter -= LINE_DECREMENT;
    
    // First draw black to erase
    stroke(0);
    strokeWeight(2);
    line(point.x1, point.y1, point.x2, point.y2);
    strokeWeight(1);
    
    // Draw the colored line with opacity
    let c = color(point.color);
    c.setAlpha(point.counter);
    stroke(c);
    line(point.x1, point.y1, point.x2, point.y2);
    
    // garbage collect
    if (point.counter <= 0) {
      nextDel = i;
    }
  }

  // trim negative counters
  if (nextDel > 0) {
    garbageCollector.splice(0, nextDel);
  }

 

Code

 

Characteristics of a strongly interactive system

I really appreciate how Chris Crawford clarifies the concept of Interactive Design, breaking down common misconceptions through clear, relatable, and practical examples. Before reading, I also had a mistaken perception of interactivity. Crawford’s explanation helped me understand it in its simplest form—as a cyclic process involving two actors who actively listen, process, and respond. In the context of media and graphic design, this translates to receiving input, processing it, and generating meaningful output. The core characteristics of interactivity, as highlighted in the reading, revolve around these key elements:

• Accepting user input
• Processing user input
• Providing relevant output

Another key takeaway for me was that a highly interactive system should be responsive, engaging, and adaptive, ensuring that user actions lead to unique and meaningful experiences rather than repetitive or predetermined outcomes.

improving the degree of user interaction

To enhance interactivity in my p5 sketches, I plan to incorporate more immediate user feedback and dynamic responses. For instance, I could implement gesture-based controls using mouse or keyboard input, where actions like mousePressed, mouseReleased, or cursor position trigger varied visual reactions. Additionally, introducing randomness and auto-generated elements would make the sketches feel less predictable and more engaging. By designing my sketches to respond in personalized and dynamic ways, I can create a richer and more immersive interactive experience.

 

For me, Crawford’s take on interactivity cuts through the hype, offering me a clear framework for what true engagement should look like. His breakdown of listening, thinking, and speaking makes me reflect on why so many so-called “interactive experiences” can feel unsatisfying. The example of yelling at a movie that doesn’t listen resonated with me — it highlights how real interactivity isn’t just about reaction, but about meaningful, adaptive engagement. A system isn’t truly interactive if it only delivers pre-programmed responses; instead, it should feel like a conversation, where user input shapes the experience rather than just triggering pre-set outcomes. This reminds me of choice-based games, where decisions genuinely alter the course of the experience rather than funneling players down a predictable, linear path.

Reflecting on my p5.js sketches, I see areas for improvement. Right now, they react in simple, binary ways — a change in speed, color, or position based on mouse movement, but nothing deeper. This reading pushes me to think bigger. How could I implement real-time feedback loops or adaptive behaviors that evolve based on user interactions? Maybe I could introduce patterns of response, where the sketch remembers past inputs and gradually modifies its behavior, making the experience feel more alive. Crawford’s perspective forces me to ask: Am I designing true interaction, or just a glorified switch? If I want meaningful interactivity, I need to think beyond cause and effect and design systems that feel more fluid, responsive, and dynamic, creating experiences that engage users in a richer, more participatory way.

Ideation

The goal of this project was to create a dynamic, interactive orbiting system that simulates celestial movement. This was inspired on top of my previous assignment that utilized oscillating, vibrant circles. Using object-oriented programming (OOP) and arrays, the system generates multiple orbits, each consisting of particles that rotate around a central point.

To add interactivity, the speed of orbiting particles changes based on mouse movement, and the color intensity varies depending on the mouse’s vertical position. Additionally, users can click to add new orbits dynamically, making the system more engaging and expandable.

Code Highlight

A key challenge in this project was ensuring a more natural and organic movement of the particles while allowing user interaction. To address this, I added quite a bit of attributes to the Particle class such as its radius, speed, angle, and color properties.

In the constructor below, each particle is assigned a randomized orbit speed and color offset to create diversity in motion and color. The update() function adjusts each particle’s speed based on mouse movement (mouseX), while the display() function continuously updates the position and color.

class Particle {
  constructor(radius, speed, angle, colorOffset) {
    this.radius = radius;
    this.speed = speed;
    this.angle = angle;
    this.colorOffset = colorOffset;
  }

  update() {
    let speedFactor = map(mouseX, 0, width, 0.5, 2); // mouseX changes speed
    this.angle += this.speed * speedFactor; 
  }

  display() {
    let x = this.radius * cos(this.angle);
    let y = this.radius * sin(this.angle);

    // mouseY modifies color intensity
    let colorFactor = map(mouseY, 0, height, 0.5, 2);
    let r = (sin(this.colorOffset + frameCount * 0.01) * 127 + 128) * colorFactor;
    let g = (cos(this.colorOffset + frameCount * 0.015) * 127 + 128) * colorFactor;
    let b = (sin(this.colorOffset + frameCount * 0.02) * 127 + 128) * colorFactor;

    stroke(r, g, b, 180);
    strokeWeight(2);
    point(x, y);
  }
}

The mousePressed() function allows dynamic expansion of the system by generating new orbits when the user clicks, making the artwork feel infinite and ever-changing.

Reflection

I’m happy with how this project turned out, especially the dynamic orbits and interactive elements like mouse-controlled speed and color variations. That said, I see several ways to improve it. I could introduce random variations in particle paths, like elliptical or wobbly orbits, to make the motion feel more natural. Adding a subtle trail effect would enhance the visuals, making the movement more fluid. I’d also love to experiment with gravity-based interactions, where particles respond to the mouse, either pulling toward it or being repelled. Well, this kind of seems like maybe this could be a new project all on its own haha.

Check out the final work:

 

After reading The Art of Interactive Design, Ch. 1, I’m realizing that we as a society and industry throw around the term “interactivity” very liberally. I used to classify interactivity as response to user input, but that may be too broad or too simple. For example, my p5.js sketches consist of clicks from a user to make something happen, but it’s the same process over and over again. For it to be more complexly interactive, these inputs and outputs should engage in a conversation. Maybe as time goes on and more inputs are made by the user, different responses are created. Depending on the type of input, different outputs will be created. Or if a user’s input can change how a system operates. I think giving users more agency in how a “story” plays out is interactivity. A movie for example doesn’t let the viewer change its outcome. However, interactivity gives users agency (albeit in a confined system, but said system should give users enough freedom to feel like they have power to change things the way they want to). Over time, a system should respond differently to a user’s input given the amount of history and new information it has to work with (kind of like in a conversation). Interactive systems aren’t stagnant and progress with time; this allowed users to stay engaged. If a process presents the same steps repeatedly, how are users supposed to care and give their sustained attention? I think giving users the ability or tools to create something entirely new can also be implemented into interactivity as prolonged engagement is the goal of any good conversation. However, the tool can’t be a standalone piece, but a part of a system since “tool” implies no complex thought behind receiving inputs. A piano for example is a tool for creating something entirely new, but a system that senses dance moves to create sounds based on the user’s movement over time (sounds build up over time, not just linearly mapping one movement to one sound) might constitute more as interactive.

In the future, I should take these principles into account and create more complex interactions where multiple processes are happening, not just one.

What do you consider to be the characteristics of a strongly interactive system?

A strongly interactive system, as suggested from the reading, would be one that would be actively involved in communication with us. I agree with the authors suggestions about certain forms of media thought to be interactive are not. The author presented a good example about movies which seem to be interactive to some people, but in reality whatever we do, we can not change the outcome or decisions of the actions in the movie. Same would go for something like videogames which we would think is the most interactive media. I believe that in games, even if they allow us to make decisions and even if our decision change certain outcomes, we will still end up with one of the selected endings which have been previously scripted. I think right now the strongest interactivity could be our conversations with chatbot ais, like ChatGPT which is capable of not only having an active conversation with us, but also thinking about its answers.

What ideas do you have for improving the degree of user interaction in your p5 sketches?

It would be really hard to implement complete interactivity such as one I mentioned in the previous text. But one way I could improve the interactivity is by making the program in such way that users decision will lead to some outcome which is random and not predictable even by me. I don’t think complete interactivity can be achieved, but I believe there can be made an illusion of complete interactivity with some randomness put into the outcome of users decisions.

Concept

The concept of this project was to create a winter landscape featuring falling snowflakes and a couple trees. The snowflakes would fall from the top of the canvas, continuously reappearing at the top after they fall off the bottom. To create this effect, the trees and the snowflakes are drawn with random sizes  making each one look unique.

Code Highlight

One of the main challenges in this project was the randomization of the snowfall. To do this, I created a snowflake class to handle the snowflakes falling and reappearing at random positions. In the constructor in the code below, the snowflake’s x and y coordinates were set. Additionally, each snowflake is given a random size and speed , which adds variation to the scene, making each snowflake unique. The fallingsnow() function then moves the snowflake down the screen by adding its speed value to the y position. Then, when a snowflake reaches the bottom of the canvas, it resets by positioning it randomly at the top and also randomizes the x coordinate to create this illusion of continuity. I also did the same for  the trees where each tree’s size was randomized.

class Snowflake {
  constructor(x, y) {
    this.x = x; 
    this.y = y; 
    this.size = random(3, 7); 
    this.speed = random(0.5, 2); 
  }

  fallingsnow() {
    this.y += this.speed; // moves snowflake down by speed value

    // Reset snowflake to top once at bottom
    if (this.y > height) {
      this.y = random(-100, -10); 
      this.x = random(width); 
    }
  }

  display() {
    fill(255); 
    noStroke(); 
    ellipse(this.x, this.y, this.size); 
  }
}

class Tree {
  constructor(x, y) {
    this.x = x; 
    this.y = y; 
    this.size = random(30, 50); 
  }

  display() {
    
    //tree bark
    fill(139, 69, 19); 
    rect(this.x - 5, this.y, 10, this.size); 
    
    // tree leaves
    fill(34, 139, 34);
    triangle(
      this.x - this.size / 2,
      this.y,
      this.x + this.size / 2,
      this.y,
      this.x,
      this.y - this.size
    ); 
  }
}

 

Reflection/Future Improvements

Looking ahead, there are several ways I could improve this project. First, I could introduce a more complicated behavior for the snowflakes, like adding slight variations to their horizontal movement, so they kind of drift as they fall, maybe mimicking wind. Additionally, I could implement different types of snowflakes with unique characteristics, such as their  varying colors or shapes, to add more variety to the snowfall. In addition to this I could also add interactions with other elements in the scene, such as snowflakes collecting on the ground or interacting with objects like trees, enhancing the immersion of the winter scene.

 

What do you consider to be the characteristics of a strongly interactive system? 

A strongly interactive system is one where both the user and the system actively respond to each other. It’s more than just pressing a button and getting a reaction, it feels like a conversation. A good interactive system listens, processes the input, and gives meaningful feedback. Examples include video games or apps where user actions change the experience in real time.

What ideas do you have for improving the degree of user interaction in your p5 sketches?

To improve user interaction in my p5 sketches, I can incorporate elements that enhance the sense of back and forth engagement. For example, instead of just having objects that move randomly, I can allow users to manipulate them through mouse movement or keyboard input. Adding real time feedback, such as changing colors, dynamic animations, or evolving patterns based on user interaction, can make the experience more immersive.

Concept:

For this assignment, I tried incorporating OOP, arrays and functions in different ways to make it interesting. When I was first doing the assignment I wanted to keep the same theme as the last art project and go for something to do with the beach. in the beginning, I was going to make the crab move sideways while his claws open and close but I found that challenging. I still wanted to go along with the theme, so instead I took an Inspiration from a GIF I found online:

https://media.gifdb.com/crab-summer-kawaii-art-06bvdd0otf5hfr0t.gif

And from these drawings I found online:

Code Highlight:

I figured out how to make the background change after the shades hit a specific coordinate but what I found challenging was finding the right values for the rays so that it looks like the GIF. I had to do a lot of trial and error:

  //draws sun rays from the crabs center
  function drawSunRays() {
    let centerX = width / 2;
    let centerY = height - 120;
    let numRays = 12; //number of rays
    let angleStep = TWO_PI / numRays; //even spacing between rays

  //loop through each ray
    for (let i = 0; i < numRays; i++) {
  //finding angle for this ray 
    let angle = i * angleStep;
    let rayX = centerX + cos(angle) * width; //move in x direction
    let rayY = centerY + sin(angle) * height; //move in y direction
    
    stroke(sunRayColors[int(random(sunRayColors.length))]); //picks a random color
    strokeWeight(random(4, 8))
    line(centerX, centerY, rayX, rayY);
  }
}

Reflection and future improvement:

It was pretty fun and challenging doing this assignment and trying to somehow incorporate randomness and arrays into making the rays. I really enjoyed trying to make my art project come close to my inspiration even though I did not fully incorporate everything. So for the future maybe I will try to make it so that another background would show up before it resets, just like the GIF, or implement interactions with the mouse.