Category: S2025 – Mang

Reading this chapter made me realize how often we misuse the word “interactive.” Before, I thought anything that let me click, tap, or control something was interactive. But Crawford argues that real interactivity is more than just pressing buttons—it’s about a meaningful exchange between the user and the system. A slideshow where I click “next” isn’t really interactive because it doesn’t respond in a thoughtful way. It just follows a script. This made me think about how many things we call interactive today—like online quizzes or simple video games—are actually just reacting, not truly engaging with the user. It kind of changed how I look at apps and games because I started noticing which ones actually respond to my choices and which ones just make me feel like they do.

One of the most interesting points Crawford makes is his comparison between interactivity and conversation. A real conversation isn’t just one person talking while the other nods—it’s about listening, responding, and adapting to what the other person says. I never really thought about technology in that way, but it makes sense. The best apps, games, or even websites feel like they “listen” to you and react in a way that makes sense, while others just follow a script no matter what you do. It made me appreciate good design more, and it also made me think about how this applies to real life. Even with people, there’s a difference between actually engaging with someone and just waiting for your turn to talk. Crawford’s ideas stuck with me because they apply to more than just interactive design—they apply to how we communicate and connect in general.

Chris Crawford stresses that interactivity is fundamentally a two-way exchange, in which both the user and the system actively listen, think and respond. He defines interactivity as a cyclical process of input, processing and output, and gives as a concrete example the interaction in a conversation and its implications, distinguishing it from passive experiences such as watching television.

A strongly interactive system must give priority to verbs-what the user can do-over nouns or static elements. For example, Crawford criticizes poorly designed software that overwhelms users with visual complexity but offers little meaningful action. To improve user interaction in p5 sketches, one could focus on creating dynamic feedback loops. For example, rather than simply displaying shapes, a sketch should allow users to manipulate them through mouse or voice gestures, with immediate visual and auditory responses. Crawford also highlights the importance of clarity and simplicity: interactive systems should avoid overwhelming users with unnecessary complexity. Applying this principle, a p5 sketch could use intuitive controls, such as drag-and-drop mechanics or touch interactions, to ensure accessibility.

In addition, Crawford’s insistence on designing for the user experience suggests incorporating playful experimentation into sketches, such as allowing users to “paint” with random colors or shapes that evolve based on their inputs. These ideas are in keeping with his core philosophy: interactivity thrives on meaningful participation and responsiveness.

Concept

For this assignment, I tried to incorporate OOP, arrays, and functions to present my work  as a rainy scene with a statue in front of it. As I watch videos from The Coding Train on this, and instantly knew what I can do for my assignment.

My assignment is heavily inspired by a video game called “Undertale” because it was a game I used to play that impacts me through its characters and themes of kindness and determination, and the statue in the game (see below) sits silently in rain alone, that really evokes a lot of emotions when looking at it.

From my understanding of the videos and practices using p5.js, I used classes to create objects such as raindrops, the statue, and the umbrella, making sure everything was organized and reusable. The raindrops are held in an array so that continuous rain can be achieved, while the statue and umbrella are static, reinforcing the contrast between movement and stillness. With this, I aimed for this assignment to recreate similar feelings of peace and contentment like how the game does in that scene.

Code Highlights

One snippet I am proud of is this one:

display() {
  noStroke();
  fill(255);  // White color for the raindrop
  rect(this.x, this.y, 2, 10); // Draw the raindrop as a rectangle
  
  //Light shape and color
  fill('rgba(221,221,133,0.36)')
  triangle(50, 400, 200, -50, 350, 400);

 

This is because it adds a subtle lighting effect that improves the scene’s ambiance in addition to producing a straightforward but effective raindrop. As I wanted to add light within the background, I noticed that, when playing the animation, it started to illuminate, and I was surprised. Although the raindrop itself is simple, the triangle shape’s gentle glow creates the illusion of diffused light, similar to a street light.

Embedded Sketch

Reflections

Overall, this was a really simple project with the help of arrays keeping the raindrops structured yet drops at random points and time. I really enjoyed trying to make my project come close to my inspiration although i didn’t fully incorporate everything else. Despite this, I struggled with trying to allow the drops to hit the umbrella, resulting in what it seems to be raining in the background, than on top of the umbrella (like my inspiration). As a result, I can work around that, along with adding some additional details to the project, like moving the umbrella towards the statue.

Reflection

In this assignment, I set out to create a whimsical yet recognizable depiction of our solar system, complete with every planet—and even Pluto for nostalgia. The overarching idea was sparked by my longstanding fascination with both outer space and various generative art techniques, as I sought to merge the awe-inspiring nature of celestial bodies with the playful unpredictability of computer-generated visuals. To capture the Sun’s vibrant energy, I used sine waves to animate its pulsing effect, allowing the star’s size and color to oscillate smoothly. This design choice aimed to give the Sun an almost breathing, organic character, setting the tone for the rest of the scene. Each planet follows an elliptical orbit, and I introduced distinct starting angles and orbital speeds to ensure that no two bodies behave exactly alike. This subtle variety makes the animation feel more alive from the outset, preventing it from looking too rigid or scripted. Additionally, I incorporated a feature to generate a random number of moons for each planet, providing further variation across multiple runs. One of the structural highlights of my approach was centralizing each planet’s properties—such as hue, orbit radii, and moon count—within a dedicated data array. This not only simplified the process of tweaking individual planetary attributes but also made it easier to add or remove planets and features without having to refactor the entire codebase.

// Each object in this array describes one planet's settings
let planetData = [
  {
    name: "Mercury",
    orbitXRadius: 80,
    orbitYRadius: 70,
    p_speed: 2.0,
    size: 6,
    col: [200, 200, 60],
    moonCount: 0
  },
  {
    name: "Venus",
    orbitXRadius: 120,
    orbitYRadius: 110,
    p_speed: 1.8,
    size: 8,
    col: [220, 150, 70],
    moonCount: 0
  },
  {
    name: "Earth",
    orbitXRadius: 160,
    orbitYRadius: 150,
    p_speed: 1.6,
    size: 9,
    col: [70, 150, 220],
    moonCount: 1 // Earth has 1 moon
  },
  {
    name: "Mars",
    orbitXRadius: 200,
    orbitYRadius: 190,
    p_speed: 1.3,
    size: 7,
    col: [220, 100, 70],
    moonCount: 2 // Mars has 2 small moons
  },
];

During development, a particularly intriguing challenge arose when dealing with the sheer number of moons orbiting the larger gas giants, like Jupiter and Saturn. Rendering a high volume of small objects orbiting in real-time can quickly become computationally expensive. To address this, I experimented with optimizing the drawing routines and ensuring that the code avoids unnecessary calculations—especially when multiple moons share similar trajectories or render states. Another aspect I focused on was enhancing the user’s sense of connection with the simulation. Currently, a single mouse click toggles whether the orbit paths are displayed, letting viewers choose between a minimalistic, clean look and a more instructive, data-rich visualization. As an additional layer of engagement, I plan to implement interactive elements such as hovering over a planet to reveal tooltips or pressing specific keys to label celestial bodies and show background stars. These features would deepen the user’s involvement, granting them not just a visual feast but also the chance to explore and learn.

 

This project is a fusion of randomness and intent—an attempt to create an organic yet controlled motion that feels like butterflies fluttering. I applied Object-Oriented Programming (OOP) to manage multiple independent shapes, each moving uniquely while trying to maintain a cohesive, natural effect. The idea was to make the shapes feel alive, responding to the mouse but still capable of drifting freely when “frozen.”

One of the most challenging aspects of this project was balancing chaos with grace. Randomness is great, but too much of it just looks messy. The trick was tuning the movement—using sinusoidal oscillations for a floating effect, lerp() for smooth transitions, and controlled distortions in the shape formation to make them feel organic rather than purely geometric. The rotation was another challenge; at first, it spun too fast, making everything feel frantic instead of serene. Slowing it down helped create a more elegant, butterfly-like glide.

this.x = lerp(this.x, mouseX - width / 2, 0.1);
this.y = lerp(this.y, mouseY - height / 2, 0.1);


Visually, the metallic look was inspired by an image I saw on Canva. That liquid-metal aesthetic felt perfect for making these abstract shapes shimmer as they rotate. Using specularMaterial() and proper lighting gave them depth.

In the future, I would like to replicate better those 3D metallic shapes and make them appear smoothly while the user presses the mouse.

After reading Crawford’s ideas on interactivity, I was struck by how he frames the concept as a cycle of listening, thinking, and speaking. He challenges the simplistic view that “if it responds, it’s interactive,” emphasizing that true interaction requires a more dynamic back-and-forth. This made me question some of my assumptions about interactivity—like whether a simple click-triggered effect is truly interactive, or just a one-way reaction. According to Crawford, a strongly interactive system should give the user a sense that it’s actively “processing” their input rather than just following a fixed script. In other words, the user’s actions should not only trigger changes but also reshape or evolve the system’s behavior in meaningful ways.

Relating this to my p5.js solar system sketch, I see opportunities to move beyond basic clicks and toggles. Right now, you can click to hide or show orbital paths, but that’s still a simple action-reaction loop. To aim for deeper interactivity, I might introduce randomness so that user input doesn’t always yield the same response. For example, clicking could not only show or hide paths but also subtly alter each planet’s orbital speed or inject slight random offsets into their trajectories. Over multiple clicks, the system might “remember” user interaction patterns, causing planets to change color, size, or even generate more moons in unpredictable ways. The idea is to create a sense that the system is actively “listening” and “thinking,” rather than just following a preset script. This approach would align more closely with Crawford’s vision of a conversational cycle of listening, thinking, and speaking. Instead of a purely linear input-output relationship, the randomness and memory would allow the solar system to evolve over time based on both user inputs and the system’s own internal logic. Each interaction would become unique, encouraging the user to explore and discover new outcomes. By blending adaptive responses and probabilistic elements, the solar system sketch could feel more alive and genuinely interactive, giving the user a bigger sense of agency in shaping the cosmic simulation.

For this assignment, my inspiration came from an image I saw while scrolling on Instagram:

The image was coupled with some headline, but I can’t remember what exactly it was. The main thing that struck me about this photo was how it didn’t seem like the orbs and their nodes had any noticeable pattern, and yet somehow, this sphere was created. Did someone create the sphere and then click around? Was there a program? What are the chances this was done randomly? Thus, I was inspired to create a program that has users create orbs that bounce around the screen when they drag their mouse around, and if they are close, create a line connecting them. The output would be constantly evolving and up to the user as they can choose to add more orbs if they want. Who knows, maybe a sphere like shape would be seen on the screen temporarily. The results of my efforts are as follows:

(Drag your mouse!)

This assignment ended up being much harder than I expected because I had to make the orbs all look and act different, but not too different that they look bad on screen. I learned a lot about the p5.vector() and the types of attributes I can apply to it when creating my orb class which can be seen below. Figuring out how to create the connection line only if the orbs are close to each other also took a little bit.

class Orb {
  constructor(x, y) {
    this.pos = createVector(x, y); // Position vector
    this.vel = p5.Vector.random2D(); // Assign velocity
    this.vel.mult(random(1, 3)); // Assign magnitude
    this.size = random(8, 20); // Random size for each orb
    this.color = color(random(100, 255), random(100, 255), random(255), 150); // Random semi-transparent color
  }
  
  move() {
    this.pos.add(this.vel); // Update position
    // Bounce off edges
    if (this.pos.x <= 0 || this.pos.x >= width) {
      this.vel.x *= -1;
    }
    if (this.pos.y <= 0 || this.pos.y >= height) {
      this.vel.y *= -1;
    }
  }
  
  display() {
    noStroke();
    fill(this.color);
    ellipse(this.pos.x, this.pos.y, this.size); // Draws orb
  }

// Determines if orbs are within 100 pixels of each other
  isCloseTo(other) {
    let distance = this.pos.dist(other.pos);
    if (distance < 100) {
      return true;
    } else {
    return false;
  }
 }
}

To improve, I think I could play around more with the colors and upping the interactivity. It could be that the user can determine the colors of the orbs or have the colors all be the same but change each time the mouse is dragged. Ideally, it would also be cool to have the speed or density with which the user clicks affect the amount of orbs created. Overall though, I had fun working on this assignment and learned a lot.

 

The first thing reading this chapter did is confuse me. Things I thought were interactive like buttons on websites or sketches on an iPad, were being challenged, and I wondered if that was something I could accept. I always assumed that if something responded to a user’s input, it was interactive, but this reading made me rethink that. It introduced the idea that real interactivity isn’t just about reaction but about creating an experience where the user’s choices actually shape the outcome itself. That made me reconsider how much interaction we actually do have in our digital lives. How much of what we “interact” with is pre-scripted?

After this chapter, a strongly interactive system to me is one where the user’s choices don’t just trigger these pre-scripted responses but actually change the experience in an organic way and ever-evolving way. It should feel like a conversation as Crawford describes interactivity to be rather than a simple input-output relationship. The thinking is necessary. In my own sketches, I tried to incorporate a little of this by having the art start where the user clicks it and have them be able to add on to the art as it goes on. Plus, with randomness, the art is never the same for each person. However, I would want to go even further by implementing elements that can evolve based on patterns of interaction, so users feel like they’re shaping the art as it goes rather than just clicking around. For example, the sketch could adapt its colors, speed, or density based on whether the user clicks quickly, holds down, or moves in a certain rhythm.

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.