Category: S2026 – Aya

The inspiration for this is the cyber Matrix. It normally has green strings of number falling down. I wanted to use that concept and make circles of strings. and then have some thing that highlights if a certain number of digits get randomly aligned. I didn’t not think of any user interactivity in this. After mapping it out in terms of pseudocode, I decided on on squared path instead of a circular one.

I started of by making a class for the number trains. The creation of the trains was the easiest thing. I set a length attribute that decides what it will be each string will look like. It start with 2, and each string has a random pattern of this length numbers which repeats all the way. it leaves a trail equal to its each side of the squared path. it vanishes at the end of each side and creates a new one after. This was not the planned behavior but as the code treats each side a single unit, I was not able to make the trail of persistent between sides. One of the ways to achieve this was to make the trail vanish as the new one generates.

The hardest part to code was the movement and making sure it work in the right order at the right time. the first problem I encountered was off by one error. After a lot of hit and trial, I asked chatgpt to look at it. it suggested me to add a lastStop attribute. I used that to as the starting point for the next side. The down side for that was the corner overlapped. This visual change is not noticeable.

Here is how it looks,

The most fun part of the code was when I integrated functions of a class into my final function that controls the working of the code

  round(startx, starty) {
    let sideLen = (this.length ** 2) * this.charSize;
    let loopLen = sideLen * 4;

    let h = this.head % loopLen;

    if (h < sideLen) {
      this.movex(startx, starty, 1, h);
    } 
    else if (h < sideLen * 2) {
      this.movey(starty, startx + sideLen, 1, h - sideLen);
    } 
    else if (h < sideLen * 3) {
      this.movex(startx + sideLen, starty + sideLen, -1, h - sideLen * 2);
    } 
    else {
      this.movey(starty + sideLen, startx, -1, h - sideLen * 3);
    }

    this.head += this.speed;
  }
}

What I will add in this is to decrease the space between the strings and make it more chaotic.

From the reading, I understood interactivity as a cyclic process where two actors continuously listen, think, and speak. I would say that I agree with his idea he explains the full idea in the reading clearly and uses relevant examples when introducing a new phrase or concept and I found myself easily understanding what he was saying and connecting it to my own works for example in my assignment 3 I responded to The idea of interactivity by allowing the users to generate new stars which fast like a small version of the listening and speaking and thinking cycle Crawford describes.

I really liked Crawford’s examples and his use of scenarios because they helped me visualize his concept instead of just reading a definition. His conversation example, especially the moment where “Step One: Fredegund listens to Gomer, paying close attention to Gomer’s words…,” made the idea much easier for me to grasp. The refrigerator door example also challenged one of my assumptions; before reading this, I probably would have called anything that reacts “interactive,” but now I see the difference between low interactivity (technically responsive but shallow) and high interactivity (meaningful and thoughtful). What stood out most is that strong interactivity requires all three parts to work well with no trading off. It reminded me of how frustrating it feels when someone “responds” to me without actually listening. A step in the reading I think would be hard to implement in my coding would be making the sketch respond in a meaningful and impactful way. While I can handle simple outputs, creating a system that truly “listens, thinks, and speaks” without weakening any part is more complicated than it sounds, especially as someone still new to code.

One thing that surprised me while reading was how much Crawford’s ideas made me reflect on my own life and experiences, both in coding and in everyday communication. I realized that I naturally focus on the part producing something visually interesting without fully thinking about how well my sketches are actually listening or thinking. It made me more aware of how limited my interactions can feel when the system only reacts in a basic way. But at the same time, that doesn’t make them any less satisfying.

Crawford’s refrigerator example reminded me that even simple reactions can feel rewarding when they respond at the right moment. Kids opening and closing a fridge door aren’t experiencing deep interactivity, but the responsiveness still feels good. That idea felt almost self contradicting at first, but it helped me understand that my sketches don’t need to be extremely complex to feel interactive they just need to respond in a way that feels intentional and connected to the user. That shift in perspective helped me appreciate the small interactions I’m already creating, while also motivating me to push them further.

To improve my sketch, I want to increase the “level” of conversation between the user and the system. Crawford’s idea that interactivity depends on how well something listens, thinks, and speaks made me realize that my sketches mostly stop at the listening stage. Since I’m still new to coding, the hardest part for me is creating a response that feels thoughtful rather than mechanical. One idea I’m excited about is having the sketch interpret the user’s “words” in a more complex way. For example, I want the code to listen to sound input and translate different volume levels into different colors, creating an evolving color palette. This would make the sketch feel like it’s actually responding to the user’s presence and energy, not just reacting to a single input. It’s a small step toward completing the “thinking” part of the cycle, but it feels like a meaningful way to push my work closer to the kind of interactivity Crawford describes.

Concept:

Starting off this assignment, I began by brainstorming ways of incorporating the array into my artwork, and I ended up deciding that I wanted to create a shooting star effect, as I felt that, it was the most straightforward idea I could think of and it would allow me to have more creative freedom if I wanted to add more aspects as I developed my code. So the first thing I started with was creating the shooting stars array and the code for it. I wanted to create a generative night sky scene that felt calm, as if you were looking out a window during a star shower. The main idea was to use arrays and objects to animate shooting stars across the sky, inspired by the example we practiced in class. I chose shooting stars because they allowed me to use randomness, movement, and interaction in a simple but visually interesting way. As the project grew, I expanded the scene by adding a glowing moon and mountains with snowy peaks, which helped create a full landscape instead of just a blank sky. The mountains were created using the same loop structure we learned in class, where each mountain’s height comes from an array value. The glow effect around the moon was inspired by an example I found online that used layers of transparent shapes to create a soft halo. I further understood arrays by watching a YouTube video, since it is a somewhat complex concept, the video clarified what we learned in class and helped me feel more confident in implementing the code I was overall satisfied with my outcome. My goal was to mix static elements, the moon and mountains, with dynamic elements, the shooting stars, so the artwork feels alive but still peaceful. After the reading, it also made me think about user interaction, so I decided to let the viewer interact with the piece by clicking to add new stars. Depending on where the user clicks, a star is generated there, but its size, height, and speed are randomized. This allows the user to have some control while still keeping a random effect, which connects to the idea of the “thinking” part of the code referenced in the reading. Overall, the concept was to build a simple canvas that allowed me to apply what we learned in class, using arrays, loops, and object oriented programming to achieve my idea.

Code Highlight:

show(){
   stroke(250,250,200);
   strokeWeight(3);
   line(this.x,this.y,this.x-this.length,this.y-this.length/4);
 }

//every shooting star in the array goes through this loop 
 for(let i = 0; i <shootingStars.length; i++) {
   //moves the stars across the sketch
   shootingStars[i].move();
   //allows the starts to be drawn
   shootingStars[i].show();
   //allows the starts to be respawned when the leave the sketch canvas
   shootingStars[i].respawn();

for (let i = 0; i < mountainSizes.length; i++) {
    
    //x position formula for the triangles
    let x = 100 + i *180;
    
    //color of triangle
    fill('rgb(20,75,20)');
    noStroke();
    
    //upside down triangle to make it look like a mountain
    triangle(
      //bottom left corner of the mountain subtracted 100 from x to shift position left 
    x-100, 640, 
      //bottom right added 100 to x to shift the point right
    x+100, 640,
      //peak lifted up by subtracting the height comes from the mountain size array just like the nums[] example from class
    x, 640 - mountainSizes[i]
    );
    
    //small white triangle which is the snow cap
    fill(255);
    triangle(
    x-30,640 - mountainSizes[i] +40,
    x+ 30, 640 - mountainSizes[i] +40,
    x, 640 - mountainSizes[i] );
}

The first part of the code Im proud of is with the shooting stars . I am proud of this because the loop is based directly on the example from class where we used a loop to move and display each bubble. I was able to fully understand and adapt that example to my own objects, showing how arrays and objects can work together, which was my main goal. This loop controls the entire animation, without it, nothing would move, and it made me feel more confident in my coding abilities and in managing objects. I also learned how to make the shooting star look like it was actually stars by making them tilted. The shooting star looked tilted because the end of the line is drawn at this. x – this. length and this. y – this. length/4, which moves the line diagonally instead of straight across. Changing both x and y creates the angled streak that makes it look like a real shooting star.

Another is the respawn function and setting up the functions in general to restart the stars when they leave the screen. This was the trickiest part for me to understand, especially because it was what I started with. I spent the most time on it since it required checking conditions like if (this.x> width) and resetting values. In the respawn() function, I used an if statement to check when the star leaves the screen and then reset its position and speed. I learned the idea from the car example we were given, where the car resets once it goes off the screen, and I adapted that logic to my project by resetting the stars positions and giving them a random speed. This made the artwork feel alive and helped me understand how to use if statements inside a class, which felt like a big improvement for me.

Lastly, I am proud of an aesthetic addition involving the mountains. I used arrays similarly to the numbers example we did in class but applied it differently. Using the same structure, I created mountains instead of circles, with the mountainSizes array controlling the height of each mountain. I used the index variable to space the mountains evenly across the bottom of the canvas and added a second triangle as a snow cap to make them look more realistic and artistic. To add the snow cap I lifted it up by subtracting the height from the bottom of the canvas. This allowed the white triangle to sit exactly on top of the green mountain since the peak position is calculated using 640 – mountainSizes[i]. This section let me show my creativity and how I could take a class example and transform it into something that fit my assignment.

Reflection/future improvements:

Overall, this assignment helped me understand arrays and object-oriented programming in a clearer and deeper way than before. At first the concept felt confusing, but once I started applying it to something visual, it became easier to absorb and understand. The most challenging part for me was getting the shooting stars to respond correctly, along with small issues like spelling errors that I had to revise. I struggled with the logic at first, especially the conditions inside the class, but once I connected it to the car example I could directly see the cross reference. I also learned how important it is to break the code into smaller functions. Having separate move, show, and respawn functions made the project easier to manage, which reflects what we discussed in class. Adding the mountains  also taught me how flexible arrays and loops can be, since I reused the same structure from the nums[] example but created something completely different. I am proud of how the final work looked because it feels like a complete sketch rather than just an individual final assignment. This project made me more confident experimenting with visuals, trying new ideas, and structuring code in different ways. In future work, I hope to add more interactive elements and experiment with new animations or even sound effects, such as a soft wind or chime when a new star is added. I also want to code more visually complex shapes to add depth to the piece, for example giving the star a diamond shape and an opaque trail. I think adding a more complex feature where the user can somehow remove a star would allow for more interactivity.

References:

Glow affect:

https://editor.p5js.org/_o.line/sketches/09NFFDGea

Youtube Video Arrays:

https://www.youtube.com/watch?v=fBqaA7zRO58

Arrays and loops code from class:

https://editor.p5js.org/maa9946/sketches/pNkSsqH_L

Car example for loop:

https://editor.p5js.org/aaronsherwood/sketches/eYFQE9EZa

1. Sketch and Code

Code

2. Overview

For this assignment, I moved beyond a simple coordinate grid to a more swarm like idea. The project uses Object-Oriented Programming (OOP) to simulate a collection of 80 independent particles. The artwork transitions between a chaotic “dispersion” state and a focused “magnetic” state based on mouse interaction, utilizing internal memory for each object to draw fluid trails.

3. Concept

My goal was to simulate “digital ink” or bio-luminescent trails. I wanted the movement to feel viscous—as if the particles were swimming through a thick fluid. The pink-on-black aesthetic remains, but the focus shifted from “pointers” to “pathways” to emphasise the beauty of the movement itself rather than the final position.

4. Process and Methods

My process was centered on encapsulation — hiding the complex math inside the object so the main program remains clean.

• • Instead of global variables for x and y, I created a Particle class to manage individual behaviors, positions, and memory.
  • Each particle has its own history array to store previous coordinates, allowing for the rendering of custom “ribbon” shapes rather than relying on screen-wide trails.
  • I used conditional logic to switch the “force” applied to particles.
    • Wander: Driven by perlin noise for smooth, non-linear dispersion.
    • Magnetize: Driven by vector subtraction to seek the cursor when mouseIsPressed.

5. Technical Details

• • For the “brain” of each particle, I used conditional logic to toggle between two distinct mathematical forces. When the mouse is clicked, it employs Vector Subtraction (p5.Vector.sub) to calculate a direct path between the particle’s current position and the cursor. Then, using setMag(0.6), it normalizes this vector to a constant strength, making sure that the magnetic pull is smooth and predictable regardless of distance.
  • Conversely, when the mouse is released, the code samples perlin noise based on the particle’s unique (x, y) coordinates to find a value in a multi-dimensional field. This value is mapped to an angle and converted into a force via p5.Vector.fromAngle. This causes the particles to disperse in organic, flowing motions rather than random lines.
  • Both behaviors conclude by adding these forces to the acceleration vector (this.acc.add) which queues up the physical move that will be executed in the next frame.

// 1. BEHAVIOR SELECTION
if (mouseIsPressed) {
  // --- MAGNETIC MODE ---
  let mouse = createVector(mouseX, mouseY);
  // Subtract current position from mouse position to get the "toward" vector
  let attraction = p5.Vector.sub(mouse, this.pos);
  // Normalizing the pull force to 0.6 keeps the movement constant and non-erratic
  attraction.setMag(0.6);
  this.acc.add(attraction);
} else {
  // --- DISPERSE MODE ---
  // Sampling the noise field based on local coordinates for organic flow
  let n = noise(this.pos.x * 0.006, this.pos.y * 0.006, frameCount * 0.01);
  // Convert the noise value (0 to 1) into a steering angle
  let wander = p5.Vector.fromAngle(n * TWO_PI * 2);
  // Apply a weaker force for a graceful, drifting dispersion
  wander.mult(0.3);
  this.acc.add(wander);
}

• • I implemented a three-tier physics system based on acceleration, velocity, and position. Instead of moving objects by fixed pixels, I applied forces to the acceleration vector to create momentum.

// 2. PHYSICS
this.vel.add(this.acc);          // Acceleration changes Velocity
this.vel.limit(this.maxSpeed);   // Cap speed for smoothness
this.pos.add(this.vel);          // Velocity changes Position
this.vel.mult(0.97);             // Damping (Friction) for a liquid feel
this.acc.mult(0);                // Reset for next frame

• • To create the intricate trails, each particle records its movement. I used push() to add new coordinates and shift() to remove old ones, ensuring the “ribbon” has a constant length without filling up the computer’s memory.

// 3. HISTORY TRACKING (The "Ribbon" Logic)
let v = createVector(this.pos.x, this.pos.y);
this.history.push(v);            // Record position

// If the ribbon gets too long, remove the oldest point
if (this.history.length > this.maxHistory) {
  this.history.shift();          // Remove the tail end
}

this.checkEdges();

6. Reflection

This project served as a major evolution from my previous work, shifting from basic coordinate manipulation to more a sophisticated force-based physics system. My main challenge was mastering the balance between the magnet and wander behaviors; while my earlier projects used simple if statements to bounce objects off walls, this one uses vector math and perlin noise to create a viscous, liquid-like motion. I spent significant time troubleshooting a glitch I was having, where ribbon trails would stretch across the canvas during edge-wrapping, which eventually taught me to “wipe” the object’s internal memory to keep the visuals clean — that was how I came up with the history array inside the Particle class; I was able to move away from robotic, linear paths. Learning to use functions like setMag() for constant pull and drag for fluid friction allowed me to fine-tune the “feel” of the interaction, resulting in a piece that responds to the user with an organic grace that feels more like a living organism than a set of lines.

7. Resources

• • https://p5js.org/

Thinking of interactivity in general, I understand it as an object or device that actively responds to the user, allowing engagement, or as the word mentions, interaction. However, reading the first chapter of The Art of Interactive Design made me realize how much deeper this concept can be. Although I sometimes found the author too critical, especially when they seemed to give less importance to actions that are not considered interactive, the examples used in the text to demonstrate what is and is not considered “interactive” expanded my understanding. The idea that interactivity involves listening, thinking, and responding helped me better grasp the characteristics of a strongly interactive system. Such a system should not simply respond, but rather fully process what the user is inputting, without disregarding any part of it, correctly fulfill the demands, and respond in a complete and effective way.

One part of the text that strongly made me connect to my own work stated, “The designer does a slam-bang job with two of the three steps but blows the third step … But one weak area in an interactive product is like a weak link in a chain. The chain breaks regardless of the strength of the rest of the links.” This made me think of how I could avoid similar weaknesses in my own code. When considering how to enhance the degree of user interaction in my future P5 sketches, I began thinking of ways to ensure that my code can accept a wider range of user input and respond effectively. Some ideas I would like to try include allowing users multiple possible commands rather than limiting their options. As well as ideas such as incorporating audio interaction, whether responding with sound or responding to the voices of the users, or using cameras to influence and engage with the sketch. I now understand that a strong interactive system depends on multiple well-developed elements working together, and I hope to be able to create work that reaches that level of interaction.

My Concept:

I started this assignment by thinking about the idea of night and day and how they slowly transition into each other, and I wanted to make something that shows both in one single sketch. I also wanted the user to have some control over what they’re seeing, and since we learned about objects and arrays in class this week, I knew I wanted to use those instead of just drawing everything individually. The final idea was to have the left side of the screen feel more like night and the right side feel more like day, all controlled by the mouse and the user. At night there are stars, and during the day there are clouds. The sketch changes depending on how the user interacts with it, which makes it feel more alive and interactive.

Highlight of Sketch:

class Star {
  constructor(x, y) {
    // x and y store the position of the star.
    this.x = x;
    this.y = y;

for (let i = 0; i < clouds.length; i++) {
   clouds[i].move();
   clouds[i].wrap();
   clouds[i].show(dayAmount);
 }

// blending between night and day colors. I used lerp to smoothly transition values.
let skyR = lerp(nightR, dayR, dayAmount);
let skyG = lerp(nightG, dayG, dayAmount);
let skyB = lerp(nightB, dayB, dayAmount);

background(skyR, skyG, skyB);

// same idea for ground at the bottom of the canvas.
let grassR = lerp(20, 40, dayAmount);
let grassG = lerp(40, 170, dayAmount);
let grassB = lerp(30, 70, dayAmount);

One part of the sketch that I am most proud of is my use of object-oriented programming for the stars and clouds. This was something new for me, and at first it was confusing, but once it worked it made the sketch feel much more organized. I am also proud of learning and using lerp to blend colors smoothly.

Embedded Sketch:

How this was Made:

I started by deciding what the sketch would visually look like before writing any code. Once I had the idea of night and day, I planned how to break it into smaller parts. I first created two arrays, one for stars and one for clouds. Then I made separate class files for each, just like how we used ball.js in class. Each class has its own variables for position, speed, and functions. After that, I used for loops in setup() to create multiple stars and clouds and store them in the arrays. In draw(), I used mouseX to control whether the scene should be more night or more day. I then looped through each array and called the move and show functions for every object, which created the animation. I also added a cute and simple sun and moon so the theme is easier to understand for the user. Finally, I used mousePressed() to add interaction, where clicking adds either a star or a cloud depending on the time of day. Overall, my sketch came together quite nicely by combining loops, arrays, objects, and interaction, all based on what we learned in class.

Reflection and Future Ideas:

Overall, I am happy with how this project turned out, especially since object-oriented programming was something very new to me. There were definitely moments where things didn’t work the way I expected, and i faced a lot of trial and error, especially with juggling between the different class files, and choosing the different number values for all the variables and functions, but fixing those issues helped me understand the code alot better. And, for this assignment in particular, I really went out of my way and experimented with learning new things to elevate my code. Using different articles and references helped me create a more advanced final piece, which I am extremely proud of. I think the night and day transition came out really well and feels smooth without being too complicated. In the future, I would like to experiment more with animation and movement in p5, and create pieces that feel even more dynamic and interactive.

Refrences:

• https://p5js.org/reference/p5/alpha/
• https://p5js.org/reference/p5/frameCount/
• https://p5js.org/reference/p5/lerp/
• https://p5js.org/reference/p5/sin/
• https://p5js.org/reference/p5/constrain/
• https://www.youtube.com/watch?v=8uLVnM36XUc
• Generative AI was used to help me by suggesting the use of lerp() in order to smoothly transition between colors, and help me identify bugs when the number values I used were causing too much chaos in the sketch.

Author’s framework for an interactive design, at its core is a system which takes in user input in great detail, comes up with something meaningful based on it, and delivers it in a effortlessly comprehensible fashion. For a strongly interactive system indeed all three make up the skeleton. That might be the reason, author didn’t mention anything about the aesthetics or visual elements of it. What comes up to my mind is Wikipedia, it does fulfill the above criteria, but is it really interactive. I’m not referring to the reading part of that website but the user experience. Obviously, its goal is productivity not interactivity. But it does highlight the of visual to beautify the skeleton. On the contrary, there is ilovepdf.com, its goal is productivity but it is a lot more  interactive.

For the sketches, I will want to highly focus on gathering user input data. Instead of getting a lot of different inputs, I want to choose a particular point, and get very detailed input on that part, and then create as much as processing and interaction from it. I remember a artwork by a student, it made birds move on the canvas, based on the people walking in front of it. It worked for multiple people independently. The amount of detail in it was amazing. For every action of user, like walking raising hands, jumping etc had somewhat interaction embedded, and it was not random. The focus on detail was prominent. That was I want my sketches to have, the scale is irrelevant. I want to keep them simple but sophisticated.

Here is my final sketch:

Concept:

For this assignment, I wanted to create an ocean-inspired sketch. It has clouds in the sky, moving waves, a floating boat, and birds flying across the sky. My goal was to make all of the animations smooth and calm rather than random.

Code Highlight:

class Waves {
  constructor(y, noiseLevel, noiseScale) {
    this.y = y; // the vertical position of the wave
    this.noiseLevel = noiseLevel; //for the height of the waves
    this.noiseScale = noiseScale; // for the smoothness of the waves
    this.t = 0; //the time for the animation (the move part)
  }

  move() {
    this.t += 1; //to update the wave over time (slightly)
  }

  display() {
    stroke("rgba(63,63,198,0.45)"); //color of the wave (a bit transparant)
    strokeWeight(4); //thickness of the wave

    for (
      let x = 0;
      x < width;
      x += 1 // so it can be looped from left to right across the canvas
    ) {
      let nx = this.noiseScale * x; // to scale the x position for the perlin noise, making the x values have a similar height
      let nt = this.noiseScale * this.t; //to scale the time variable for a smooth transiton because as the time increases the wave slowly changes its shape

      let waveHeight = this.noiseLevel * noise(nx, nt); // uses the perlin noise to calc the height of the wave and return it to a value between 0 and 1

      line(x, this.y, x, this.y - waveHeight); // draws a vertical line for the wave
    }
  }
}

I’m particularly proud of the wave animation. This was my first time working with Perlin noise. I followed the p5 noise reference and watched the coding train video to understand how Perlin noise creates smooth and natural movements. I think using noise instead of random values made the water feel more realistic and continuous.

Reflection/future work:

I built the sketch using object-oriented programming with separate classes for the waves, boat, clouds, and birds. I also used arrays to animate multiple objects at once. At the beginning, I started with the clouds, and I tried using the random function to place them, but it looked too messy and chaotic, so I decided to just space them out evenly with a little variation to make it look natural. That way, the clouds felt more organized and intentional. 

Originally, I planned to animate a person with a surfboard moving back and forth, but I decided a floating sailboat would fit the scene better. So I added a boat that floats gently up and down with the waves. I used sin for the floating motion and push and pop with translate to make it easy to move the boat without changing its shape (this is a game-changer). 

Then I felt as if the sketch was too empty, so I added birds that fly from left to right. Their y position changes a little, so they do not move in a straight line. The bird shapes were inspired by another P5 sketch I found online, but I changed the movement and made them fit my sketch.

I think the hardest part was positioning things so everything looked intentional and nice together. The clouds and boat were tricky at first. I also spent a lot of time figuring out how to use push and translate to make the boat move without messing up the coordinates. Once I got it down, it was actually really simple using objects and classes. Also, I felt like the object oriented programing was really useful, since it made it easier for me to create multiple objects without constantly repeating code. For my future work, I do want to lean more towards interactive elements, but I used this assignment to really focus on understanding OOP.

Here are the tutorials I watched and the reference/examples  I found inspiration for the sailboat and birds from other P5 sketches. I liked the shapes, so I used them as a starting point and modified the code to fit my scene by changing the motion, colors, and integrating them into my own object-oriented program:

https://editor.p5js.org/cs105/sketches/iCmF693Ps 

https://editor.p5js.org/zielinsj/sketches/NAzOThoLl#:~:text=Sketch%20Files,37 

https://www.youtube.com/watch?v=Qf4dIN99e2w 

https://www.youtube.com/watch?v=YcdldZ1E9gU 

https://p5js.org/reference/p5/noise/#:~:text=noise()%20is%20used%20to,x%2C%20y%2C%20t)%20. 

The first thing that came to mind when the author was talking about how the word interactivity was used loosely, was AI. Funnily enough it goes hand in hand with interactivity in a lot of tech products, you will see “INTERACTIVE AND AI!!” plastered all around the advertisements when it really uses neither, and are just buzz words to attract customers. I had a similar idea of what interactivity is, to me it is a spectrum, we never say this is either interactive or not. We always say things like “oh this is really interactive,” or “this is somewhat interactive,” and so on. We always treated it as a spectrum, knowingly or unknowingly.

The problem with classifying if something is highly interactive is that, it’s all based on perspective, now what I mean by that is, treat the spectrum of interactivity as a battery with a fixed maximum capacity. A full charged battery would mean it’s highly interactive. The object defines the battery size, while the person’s perspective determines how much of that capacity is meaningful to them. This will make sense in a moment. There is objective traits to something being interactive, but how interactive it is will be subjective, for example, let us use the Nintendo fridge example with the kids and adults. The kids would tap into that battery supply and use most of it, while the adults would simply leave most of the battery unused.

Interactivity needs an initiator. a responder and a balance between that 2 that keeps the interaction in a meaningful interpretive cycle. This is true and can be objectively stated, however it is impossible to write a definition, or write what makes something highly or barely interactive as this will change person to person.

One thing this made me realize is that reactivity is not interactivity, and the sketches that we call interactive are simply just reactive to our inputs. To truly implement interactivity, I am thinking of making the program inputs less obvious, meaning the same input might lead to different actions depending on the context, making the user think about what to do.