Spring 2024 – Aaron (Section 001) – Introduction to Interactive Media

Week 4 – Reading Response

One thing that always frustrates me are the elevator button panels. I can’t count the number of times I’ve stood in front of a shiny panel of identical metal buttons, with no clear distinction between “door open,” “door close,” or the emergency button. Sometimes the “door open” symbol is barely visible or located in an unintuitive spot, and more than once I’ve pressed the alarm instead of the open button (which is always a bit embarrassing).A small redesign could go a long way: using clearer icons, color coding, or even tactile differences would make it more intuitive. Norman’s point that “when something goes wrong, the user is often blamed instead of the design” fits perfectly here. It’s not that people are clumsy, it’s that the system doesn’t communicate well.

I’m still thinking about the line that said “Good design starts with an understanding of psychology and technology. It is not enough that we build products that work; they must be understandable and usable.” This directly brings us to the UX. UX is important because it shapes the way people experience and connect with a product, space, or interaction. Good UX reduces confusion, frustration, and wasted effort, making tasks feel natural and even enjoyable. As Norman emphasizes, design isn’t just about how something looks, it’s about how it communicates its purpose and supports human behavior. When UX is overlooked, people often end up blaming themselves for “not getting it,” when in reality it’s the design that failed to guide them.

When I think about applying Norman’s principles of design to interactive media, the biggest lesson is clarity in signifiers and feedback. In my projects, I’ve sometimes assumed that users will “just know” what to click or press, but Norman’s reminder is that what feels intuitive to me as the designer may not feel that way to someone else. Adding clear visual cues like arrows, hover highlights, or simple instructions makes interactions discoverable and satisfying. Affordances and signifiers should be obvious, users shouldn’t have to guess what to click, drag, or press. Feedback is just as important: when someone interacts with my project, they should instantly see or hear a response. That way, instead of frustration, interaction feels like a satisfying loop.

Week 4 – Bump please

Concept

For this assignment I wanted to create something to do with text and the first thing that came to my mind was how we ask our friends to Bump! our posts on our Facebook RoR group (Room of Requirement, a group in Facebook for NYU Abu Dhabi students). So then I decided why not create something to do with this legendary word Bump?

When I think of that word, multiplication comes to my mind because the more times you write it, the more audience sees your post. So that lead me to an idea that when you press the word, it spawns another Bump!, with a random color and its own bouncing behavior.

Creation

I created a Bump class that stores position, speed, color, and the text itself. Each bump moves across the canvas and bounces when it hits the edges. When the user clicks on a bump, a new one is created in a random position with a random color, and it moves independently. I also added a restart option so that pressing the key C or c clears the screen and brings back just one bump in the center.

Difficulties

The most challenging part for me was figuring out how to detect if the mouse actually clicked on the text. Since text doesn’t have a simple rectangle in p5.js, I had to calculate the approximate bounding box using textWidth and the text size. After that, I also had to make sure the bumps bounced correctly on the edges, which meant checking both horizontal and vertical boundaries.

Favorite Part

My favorite part of the code is definitely the spawning of new bumps. I love how every click brings a surprise because the new text gets a random color and a random speed. It gives the sketch a playful and unpredictable feeling, which matches the energy of the word Bump! itself.

function mousePressed() {
  // check each bump to see if mouse is inside it
  for (let b of bumps) {
    if (b.clicked(mouseX, mouseY)) {
      // if clicked, create a new bump at random position
      bumps.push(new Bump(random(width), random(height)));
      break; // only add one new bump per click
    }
  }

Future Improvements

In the future, I would like to add a few more playful features. For example, making the bumps grow or shrink over time, adding sound effects when they collide with the walls, or even keeping track of how many bumps were created. Another fun idea would be to make the bumps interact with each other—like bouncing off one another instead of just overlapping.

So here’s my end result, and if you see my post on RoR, please bump it :))

Press bump! to multiply it, and press C to reset

Week 3 – The Art of Interactive Design Ch.1

My definition of interactive was always just… I do something, and the thing does something back. A game, a movie, whatever. As long as we were both making actions, I figured that was it.

But in the chapter putting the interaction or being interactive into the frame of a conversation (listen, think, speak) made me stop and question that. It makes me wonder if the actions have to actually depend on each other. Like, the system’s reaction should be different based on what I did, not just a pre-programmed response to any action.

This makes me look at a lot of stuff we’ve made in p5.js completely differently. Most of those examples aren’t really interactive by this standard. I mean, you click the mouse and a shape appears, but it’s the same shape every single time. The code isn’t really thinking about my input, it’s just reacting. It’s a glorified light switch. True interaction needs that middle ‘think’ step, where the response is actually considered, not just triggered. That’s a way more interesting goal to aim for.

Week 3 – art work

Title: Does the Power of Lover overcome the Love of Power

This is an interactive generative artwork that explores the dynamic struggle between two opposing forces: Power of Love and Love of Power. Using color, motion, and shape, the piece visualizes how these forces interact, dominate, and fade.

Users can interact with the artwork using the keyboard: pressing X strengthens the Power of Love, Z increases Love of Power, and R resets the canvas. As one force grows, it overwhelms the other, creating a constantly shifting visual narrative of dominance, balance, and fragility.

Highlight of Code I’m Proud Of:

One part I’m particularly proud of is the heart shape formula used in the Heart class. Creating a convincing pulsing heart shape took a bit of trial and error—adjusting the sine and cosine coefficients to get the proportions and curves right. When I looked it up to check my work, I was pleasantly surprised to realize that I had remembered the formula almost perfectly! The code also incorporates time-based pulsing and subtle distortions influenced by the interaction of the two forces:

class Heart {
  constructor(battle) {
    this.battle = battle;
  }

  display() {
    let { t, loveStrength, powerStrength } = this.battle;

    let heartOpacity = map(loveStrength, 0, 1, 10, 90);
    let heartPulse = map(loveStrength, 0, 1, 0.4, 2.5);

    stroke(340, 80, 100, heartOpacity);
    strokeWeight(2 * heartPulse);

    for (let i = 0; i < 3; i++) {
      let s = 100 + sin(t * 2 + i) * 50 * heartPulse; // pulsing size
      beginShape();
      for (let a = 0; a < TWO_PI; a += 0.1) {
        // classic heart shape formula
        let x = s * 16 * pow(sin(a), 3) / 10 + sin(t + i) * 30 * powerStrength;
        let y = -s * (13 * cos(a) - 5 * cos(2 * a) - 2 * cos(3 * a) - cos(4 * a)) / 10
                + cos(t + i) * 30 * powerStrength;
        vertex(x, y);
      }
      endShape(CLOSE);
    }
  }
}

This section highlights the combination of mathematical formula, animation, and interaction to make the heart both accurate and dynamic.

Week 1 – Self Portrait

This is a self-portrait created with p5.js, inspired by Picasso’s cubist style. I focused on abstracting key features such as the hair, glasses, beard, and mustache into bold geometric forms and playful colors to emphasize expression over realism.

Week 3 – Reading Reflection

It was really interesting (and funny) to read this first chapter of The Art of Interactive Design. I have never thought that interactivity could be so different and have its’ ‘levels’. And to answer the question proposed at the end of the book, Are rugs interactive? my answer is yes, but the interaction is low, because it’s one sided (just like a fridge).

If I talk about my idea of interaction, I think it’s when the users can engage with the interface. A strongly interactive system is characterized by its ability to respond to user input in meaningful and timely ways. Such systems provide clear cues about how the user can act, make the results of actions visible, and maintain a balance between user control and system guidance. Importantly, they allow exploration and learning by allowing users to experiment without fear of irreversible mistakes.

In my p5 sketches, these principles suggest several ways to improve interaction. For example, I can add more responsive feedback, like visual or auditory cues when users click or hover over elements. Allowing users to customize aspects of the sketch, such as colors, speeds, or behaviors, can enhance engagement. Introducing elements of exploration, like hidden surprises or random effects, encourages experimentation. Additionally, implementing smoother animations and more natural movements, rather than abrupt changes, can make interactions feel more intuitive and satisfying. Overall, designing sketches that are predictable yet playful, and that reward user input, aligns with the chapter’s emphasis on creating systems that are both interactive and enjoyable.

Assignment 2 – Loops

Concept:

For this assignment, I wanted to make a design that moves and looks alive, as compared to my static design for the first assignment. I used nested loops to draw a grid of circles, and each circle changes size and color using a wave. I had to learn how to use the wave and the map functions so I could control how the circles grow and change colors, which was a little tricky at first, but really fun to figure out. The loops made it so much easier to draw many circles without writing a lot of code.

Code Highlight:

I’m really proud of how I made the circles pulse and change color using the wave and map functions. Even though it’s just a few lines of code, it completely changes how the artwork feels. Figuring out how to use the wave and map together was really challenging at first. I had to do a lot of trial and error, watch some YouTube videos, but it was satisfying to see it finally work.

let wave = sin((frameCount * 0.07) + (x + y) * 0.05); // simple wave
let size = map(wave, -1, 1, 10, spacing); // circle size changes with wave
let colorValue = map(wave, -1, 1, 50, 255); // color changes with wave
fill(colorValue, 170, 355);

Embedded Sketch:

Reflections & Future improvements:

This assignment was initially challenging because I had to figure out how to make the circles pulse and change color using loops and functions. I spent some time watching tutorials and testing different ideas to get the animation to look right, especially figuring out how to use the wave and map functions together. Completing this project helped me understand how to combine new concepts with what I already know, such as loops and grids, to create something that actually moves and changes on the screen.

For the future, I’d like to make it more interactive. Right now, the circles just pulse on their own, but it would be cool if the user could click or drag the mouse to change the colors or the speed of the animation.

Week 2 – video reflection

Watching this video, what struck me most was how something so structured could still feel alive. It’s strange to see code—something I usually think of as rigid—turn into movement and shape that almost feels organic. It made me wonder if maybe rules and freedom aren’t opposites after all. Maybe rules are what allow freedom to show up in the first place.

I kept thinking about how in life we spend so much time wanting total freedom, no limits, no boundaries. But when I watched these shifting patterns, I realized the boundaries are what made them beautiful. If there were no rules, it would just be noise. The art only worked because there was a balance—enough structure to hold it together, and enough randomness to make it feel alive.

That thought sat with me: maybe life is like that too. Too much control makes things rigid, too much chaos makes them meaningless. The sweet spot is somewhere in between, and it’s not something we can design perfectly—it has to come naturally.

Week 2 – Reading Response

After I watched Casey Reas’s Chance Operations talk I was filled with different emotions, curious and even inspired. The way he treated randomness was probably the most interesting part of it, although it may sound cliche. The progress of his works that were shown was fascinating. He treated randomness not as something chaotic but rather international, and the precision and effort it took to create that art is truly fascinating. Even a single dash or slash, once given a set of rules and a little unpredictability, could turn into visuals that felt alive. It made me think about my own tendency to over-control creative work, sometimes the most interesting results come when I just let the imagination be (just like in homework for this class).

I also liked the way he uses geometry as a way to move from points to lines, and even dimensions that are very difficult to picture in mind. At the same time, his examples reminded me that digital randomness isn’t truly random at all, it’s always controlled by algorithms and history.

What stayed with me most was his idea that just a “slight bit of noise” keeps systems alive, which I think is such a relatable thing in our daily life as well, because would it be so interesting to live and to be if it wasn’t for imperfections?

Week 2: Work of Art

Portrait Concept

While browsing the old computer art magazines I came across the two images below and felt like they perfectly captured the different possible contrast that can be achieved with computer art. The first one is more mechanical, sharp and exact, while the second one felt more natural and human due to it’s varying corners and circular flow. I derived my concept from this contrast, creating a work that is able to capture both ends of the scale using interactivity created with the use of loops. Initially the screen displays a constant line that stimulates the contents of a heart rate monitor, it is mechanical and rigid, what one could describe as lifeless. Then when the user comes in the picture and interacts with the work by pressing their mouse, the work begins to transition into a more organic flowing curve, along with a pulsing heart that appears in the middle that in a way adds life to the piece. This highlights the collaboration between human and machine that computer art embodies, combining both mechanical precision and human emotions.

Code that I am Proud of

for (let x = 0; x < width; x++) {
    let y_machine = baseline;

    let lineX = (x + frameCount*1.5) % 130;

    //Machine heart beat based on x position
    if (lineX < 15) {
      y_machine = baseline;
    } else if (lineX < 30) {
      y_machine = baseline - 60;
    } else if (lineX < 45) {
      y_machine = baseline + 30;
    } 

    //Human heartbeat wave
    let y_human = baseline + sin((x + frameCount) * 0.05) * 40;

    //Transitioning between machine and human
    let y = y_machine + (y_human - y_machine) * trans;

    noFill();
    strokeWeight(2);
    
    //Color changing with transition
    let r = 255 * trans;
    let g = 255 * (1 - trans);
    let b = 50 * trans;
    stroke(r, g, b);

    vertex(x, y);
  }

Most my time spent on this assignment was in creating and refining the transition between the mechanical and human line, trying to recreate the vision. After multiple tries I ended up with the for loop above, that both creates the lines and blends them together using the transition factor defined earlier in the code. I do believe that this is the most important element of the code that creates the part that captures the concept, which is why it occupied most of my attention when creating the work. Creating it taught me a lot about the technical and conceptual thinking that goes into coding computer art. It brought my attention to things like the use of color and the possibilities technically when it came to transitioning the color, which I integrated into the code.

Embedded Sketch

Reflection

I really enjoyed exploring the possibilities that come with using loops in the creation of a work of art. After completing my previous assignment and getting more comfortable with the program, I had a goal of shifting my focus a little to the concept behind the work. Which I think I was able to achieve this assignment with the use of the computer art magazines. With their assistance I was able to get inspired and integrate meaning into the code. For future work I’d like to use the techniques I learnt today to create a work where the user interaction does not only affect the visuals, but also the narrative and direction of the piece. With this time of interactivity the work can become a collaboration between the creator, the users and the computer all at once.