As a designer, there’s one phrase I find really funny that people ask me: “Can you make it more interactive?” This confuses me immensely. Do you want me to make it “pop” out more? More interactions on your social media posts? Are you expecting something else but you can’t think of the exact word to sum all your thoughts up so instead you tell me to make it more interactive? What do you mean? Thus, I 100% agree with all, if not most, statements that Chris Crawford makes in this reading. Interactivity is “overused and underunderstood.” Just like any other concept (think common internet words and phrases today like “hyperfixation” or “gaslight / gatekeep / girlboss”), interactivity is also one of those words that we didn’t originally know the importance of when it first came out, but now that we live in such a technologically advanced (and advancing) world, we see that word everywhere. And, if you asked someone to define what exactly interactivity is… well. You won’t receive the same definition twice.

I liked how he brought up the example of people using interactivity as a way to make things sound interesting. Interactive screen! Interactive book. Interactive art. Interactive clothes. Shoes. You see them in adverts all the time now. Interactive exhibitions. Interactive events. Washing machines with interactive interfaces. Are we using this term correctly? What is the actual definition of interactivity?  When thinking of defining interactivity, he states, “the joy of thinking comes from all of those fascinating nooks and crannies that lurk in nuance.” Could this not also be applied to defining art? There are so many flexibilities in defining what art exactly is, because we all have such varying definitions of what we determine is art or not. So, anything can be considered interactive, because everyone interacts with things differently… right? 

I also found his definition interesting, interaction as “a cyclic process in which two actors alternately listen, think and speak.” In Understanding Interactive Media, we discussed interactivity as feedback loops. I, the artist, act a certain way. My audience acts a certain way in response. Then, to their response, I change the way I act too. Even when artists study art, they create an artwork, they see how others react to it and act accordingly, some responses being an art teacher calling their work trash, or a person on the internet sending a comment of how much they like their artstyle. The Gomer and Fredegund example is similar to this. I also never really considered interaction existing in degrees, which surprised me. I liked the comparison of degrees of interaction to having two different conversations where you talk in one and the other person barely responds to you, and another conversation where you both flow really well. They both are interactive! They’re just different degrees of interactions.

In a strongly interactive system, I think the degree of interaction should be very high – there should be a very prominent feedback loop. For example, if an artwork starts off as the color green, and I don’t like that and I say I don’t like this color, it changes to orange. And, I can tell it again, and it can change if it can. However, even with this example, the artwork follows my instructions and doesn’t adapt. It is simply following my instructions and not actually responding. The system should be able to respond to the audience’s conversation. Regarding what ideas I have for improving the degree of user interaction in my P5 sketches, I think I’m yet to figure this out. I do feel like when I create a design, I don’t think too much about interaction and visuals separately. I unintentionally put them together and work with them together, because a good design should have both working collaboratively, not side by side. I’ll probably be more intentional when I design now, though.

Concept

Once again, I was searching for inspiration in tech-aesthetic. I came across this photo on Pinterest, when the idea for my work sparked in my head:

I thought that it would be nice to create something that looks like keyboard but is less predictable (and less functional, apparently). Therefore, I created a small piece where keyboard tiles of random color appear all over the screen and stay for random time between 1 and 4 seconds, and, if being clicked, display a random emoji face from the list I provided.

 

 

Highlight code

Due to the lack of time, my code is pretty simple this time, but the part of implementing color scheme into the piece is something I struggled with for some time.

class Tile {
  constructor(x, y, size) {
    this.keyHue = random(0, 360);
    ...
  draw_tile() {
      ...
  
      // Lower tile
      fill(this.keyHue, 90, 80); 
      square(this.x, this.y, this.keySize, this.cornerRadius);

      // Upper tile
      let innerSize = this.keySize * 0.8;
      let offset = (this.keySize - innerSize) / 2;
      
      fill(this.keyHue, 60, 100);
      square(this.x + offset, this.y + offset - 3, innerSize, 8);

I switched to colorMode(HSB) which decodes as Hue, Saturation, Brightness. Basically, the computer randomly chooses only hue, and saturation and brightness settings persist in all tiles. This way, the lightness and the intensity of the color pigment stays the same, but the actual color changes depending on the value the computer chose. It made all the tiles look the same stylistically while being different color.

Overall, for this piece I created one class for each Tile, which had methods for activating it based on timer and then resetting it; checking if the mouse is in borders when it’s clicked, so it can display a random title; drawing the tile itself. I used for loops, and some built-in p5.js functions like mouseClicked() in this sketch. I also preloaded a pixel-like font from Google Fonts for text to match with the overall aesthetic.

Reflection

I find the way the sketch looks to be very colorful and have some tetris vibe, which I really like. I didn’t really have much time for this piece, otherwise I would like to come up with a unified color scheme to create something less colorful but more of one style.

Also, after the reading for today, I thought that it might be great to implement various ways of interaction. For instance, having a text line which will display the user’s entry and give some response to it, like emoji-reactions or some simple replies like “Yay!” and “Oh no”. I think this way the piece would turn out to be much more fun and way more interactive.

Concept:
I imagined a night view while making this piece. This weekend I went to teamLab, and some of the installations reminded me of the night scenery back in my hometown. The windows turning on and off represent the feeling of being in a moving car at night. When you look out from the car, the city lights seem to flicker and flash past, and the view is not always clear. That memory is what inspired the changing lights in my artwork.
How this is made:
I made this through p5.js. Firstly, I drew the background, including the sky and the stars, and also the ground. This part was not very challenging. I just used basic shapes like rectangles and circles. For the sky, I drew many thin rectangles to make a simple gradient. For the stars, I used random positions, so the stars look different each time.
After that, I started to create the city. I wanted the buildings to fill up the whole canvas, so I used a loop that keeps adding buildings until the x position reaches the right side of the screen. I also needed the buildings to be placed from left to right, and not overlap. For this part, I asked AI to give me an idea of how to organize the code.
Then I used Object-Oriented Programming to make the code cleaner. I made a Building class and a Window class. Each building is an object, and it contains an array of window objects. When a building is created, it automatically creates a grid of windows inside it. In the draw loop, every building updates its windows, and then displays itself. The windows turn on and off because each window has a small random chance to switch states each frame. This creates the flickering light effect, like windows flashing when you look at a city at night. I found this part challenging so I went through some YouTube video to deal with this.
Finally, I went back to the background details to make it feel more alive. The stars use randomness so their locations are not all the same, and the small twinkle effect makes the night view feel more natural. Overall, the main idea is a simple night skyline, but the random buildings and changing windows make each version look slightly different.

The part that I am proud of:
Actually I think I am proud of the whole project I’ve made. However, if I have to choose one of the part I love I will say it’s the most challenging part.

// building class
class Building {
  constructor(x, y, w, h) {
    this.x = x;
    this.y = y;
    this.w = w;
    this.h = h;

    // building color
    this.bodyColor = color(random(20, 60));

    // array of Window objects for this building
    this.windows = [];

    // decide window grid size based on building size
    this.makeWindows();
  }

  makeWindows() {
    this.windows = [];

    // window size and spacing (kept simple)
    let winW = 12;
    let winH = 16;
    let gapX = 8;
    let gapY = 10;

    // margins inside the building so windows don't touch edges
    let marginX = 10;
    let marginY = 14;

    // how many columns/rows fit?
    let cols = floor((this.w - marginX * 2 + gapX) / (winW + gapX));
    let rows = floor((this.h - marginY * 2 + gapY) / (winH + gapY));

    // create Window objects in a grid
    for (let r = 0; r < rows; r++) {
      for (let c = 0; c < cols; c++) {
        let wx = this.x + marginX + c * (winW + gapX);
        let wy = this.y + marginY + r * (winH + gapY);

        // store a Window object in the building’s windows array
        this.windows.push(new Window(wx, wy, winW, winH));
      }
    }
  }

  update() {
    // update each window (some will randomly toggle)
    for (let w of this.windows) {
      w.update();
    }
  }

  display() {
    // draw building body
    fill(this.bodyColor);
    rect(this.x, this.y, this.w, this.h, 3);

    // draw windows
    for (let w of this.windows) {
      w.display();
    }
  }
}

// window class
class Window {
  constructor(x, y, w, h) {
    this.x = x;
    this.y = y;
    this.w = w;
    this.h = h;

This part was killing me,  because before I went through the videos, I don’t know how can I write the coding for class of buildings and the lights. After I watched the video I have some ideas. But I still tried many times to figure out the exact number and place I wanted.

Reflection:

I think I am satisfied with the project this time. But if I have more time, I think I will and some more interactive things for example like having some shooting stars when ever the users clicked the screen.

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

After reading, I feel like the main and most important part of a strongly interactive system is thinking. As explained, there’re three steps of interaction, and while many objects can listen (register the action, like fridge opening) and speak (performing an action, like book telling a story), very few can actually think – analyze the action and then perform in response in accordance with it. Like in conversation, answer to one’s words can’t always be the same whatever someone says, the answer of a strongly interactive system should differ depending on the interaction made with it.

I stress the value of thinking in an interactive system because, as it was said in the writing, participation and reaction are not considered to be the same as interaction. Yes, the lamp turns on when you press the button – it reacts to the action, and yes, you participate in a dance with some music, but you don’t interact with them because 1) the interaction with them doesn’t consider any thinking, 2) no matter how you press the button or dance, music and lamp always will be the same and have the same response to your actions.

 

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

I understood that right now my sketches are not really interactive since they also don’t really consider thinking of the user. Clicks and mouse movement are probably not the best interactions since it’s very low-level interaction with really poor user action amalysis. I understood that in order to come up with something more interactive I have to consider what the user might think about doing with my sketches. For instance, if they see some object on the screen, what possibly they might do with it? If I come up with various answers, I would be able to make different responses of my system in accordance with user’s actions. This way, the system will adapt “thinking” that is so important when thinking about interactivity.

“Colors, like features, follow the changes of the emotions.” — Pablo Picasso

Concept:

Recently, I watched Disney’s Pocahontas, and one of the songs that has been become quite a hit was “Colors of the Wind”. It is a beautiful and emotional song with a message about living in a more interconnected, diverse and colorful world. Which is what I wanted to represent with the use of colorful circles, moving around as if they were in the wind. And it is quite mesmerizing to look at the different circles in a wide range of color. To me, it gives a nice representation of how we look at ourselves in society, where we’re all different and unique, yet living side by side, we creating this enchanting community of diversity. Take a peak below, by clicking on it with your mouse (or tap if you’re on mobile).

How it’s made:

So for this assignment, I utilized OOP and arrays to generate the circles. I created a class where I defined the main variables within the constructor function, which is integral to the class. Then for the movement of the circles, I made a seperate function which manages the movement by increasing the direction vector of the circles by a random amount. Then I made a function to actually display the circles.

Now the way I went with generating multiple circles was using an array, and then a for loop to just append circles to it. And finally, another for loop so the balls are displayed and have movement. Now for the color factor, I went for a simple effect where if you click the canvas, the colors of the circles rapidly change. This did in turn create a sort of LSD effect so if you’re sensitive to epilepsy, I would not advise you holding down the mouse button.

Of course, there are probably much more efficient ways to create this same effect, but honestly, I just randomly stumbled upon it. I was just playing around with the size and color variables and in the end, this is what I produced. It looked quite satisfying so I decided to go along with it.

A highlighted bit of code I’m proud of:

This bit of code I’m quite proud of as I struggled with how to make the circles not leave the boundaries of the canvas. It was quite difficult intially as I just assumed that it was as simple as defining  specific parameters and that’s it. But then I thought more about it and wanted to make it dynamic, instead of static.

So I tried and eventually was able to make it so the circles sort of bounce off the walls and go back towards the center of the canvas. In this sense, they still won’t disappear off the canvas, and won’t be hindered in the velocity.

move() { //This function gives the balls vectors of directions
    this.x += this.dx;
    this.y += this.dy;

  //The if statements constrain the balls so they don't go off the canvas
    if (this.x < this.d / 2 || this.x > width - this.d / 2) {
      this.dx *= -1; 
    }
    if (this.y < this.d / 2 || this.y > height - this.d / 2) {
      this.dy *= -1; 
    }
  }

Reflection:

This was quite a fun project to make. It was interesting experimenting with classes and I can see why they are quite fundamental in not just efficinizing your code but also dynamically creating new objects and changing their variables. It is insanely useful to shorten the code used and to add as I would like to refer to them as characteristics to objects, through the use of functions.

And I think the artwork, while simple in nature, does have a good amount of deep meaning. If you click the mouse, you get a different color for each and every circle. And that to me just is a beautiful way to see the world, where each and every one of us are a different color, come in different shapes and sizes and go in random directions. When put together, we create a beautiful and colorful muse, a nice representation of our world.

After reading this, I realized how important immediate and meaningful feedback is. Because a strong interactive system is not just one to a user’s input but one that feels like there’s an actual back and forth interaction between the user and the system. When the user takes an action the system has to respond right away so that it makes it clear what caused that response. I think that really gives a user a sense of control instead of confusion that might sometimes appear. Another concept that’s really important is agency because strong interactivity happens when users think that their choices actually matter. For example, if the system always reacts in the same repetitive way no matter what user inputs, it can feel very boring. Interactions become more engaging when different inputs lead to different outcomes and users can get the freedom to explore them and experiment. 

Now when I look at my own p5 works, I realize that the level could definitely be improved. As for now a lot of the interaction are basically rely on simple key presses. In my future work I’d like to use things like mouse movement, speed or direction to make visuals more dynamic and engaging. That’d definitely make my works feel more responsive to the user’s actions.  I’m also interested in trying state-based interactions, where the sketch remembers what the user did before and changes gradually instead of instantly resetting. Another thing I want to try is adding constraints or small goals, so the user feels like they’re interacting with a system rather than just watching an effect on the screen. Overall, my goal is for future p5 sketches to feel less like technical demonstrations and more like interactive experiences where the user’s actions shape the output.

Concept: This sketch depicts a group of ladybugs crawling across the screen, represented by emojis. Each ladybug is an object with its own position and movement, and randomness makes the composition generative and slightly different every time it runs. I chose the concept to be simple, focusing more on the motion and repetition of visuals.

Code I’m proud of: I am proud of using the “move” and “display” functions inside an array that stores the ladybugs:

for (let i = 0; i < ladybugs.length; i++) {
  ladybugs[i].move();
  ladybugs[i].display();

Code:

 Reflection: I feel like it is getting more and more complicated with each lesson, but I am trying my best to include the required functions into our homework codes. That is why this week’s sketch feels very basic to me.

The Subjectivity of Linguistics and Definitions

It is a point that I most strongly resonate with, and one that I may struggle to articulate so fully as that which was present in Crawford’s reading, that I begin by producing a quote from said reading:

“… I take a more easygoing view of definitions. Any idea worthy of my attention is probably too big and too complicated to be reduced to some schoolmarmish formula.” (Crawford, 5)

As is to Crawford, to me linguistics is about a message. And it is so that the delivery of a message is as much an artform as is an artform about the delivery of a message. Oftentimes, I find definitions an easy way to brush over more nuanced topics.

As for interactive systems, I strive not to pen down a concrete definition, but to explore them based on their attributes and depth of interaction. Let us take a simple interactive system: a classic slot machine in the Ol’ Flamingo. Its got a lever for players to pull, makes cool sounds when you win, its got flashy lights and a degree of manual work in pulling the lever. It builds anticipation in the spinning of the slots. On the plus side (a win for the casino), the casino serves you drinks as you gamble away.

In essence, all five of your senses are deeply entrenched in this interactive system. And the drinks you’ve been served are likely to keep your brain engaged elsewhere from the fact that your credit rating isn’t looking awfully good at the moment. If I were to rate it on a scale of 1 to 10, with 10 being the strongest interactive system, it would most certainly be a good 8, for its pretty holistic in its nature, however cruel and money-depleting that nature may so be.

As did Crawford elaborate on interactive systems: “interaction: a cydic process in which two actors alternately listen, think, and speak”

In essence, the formerly described slot machine engages all of ones senses, it will never be a ten for one simple reason, that it lacks to spur intelligence. It does not really heighten one’s intellectual curiosity or thoughts. Its a repetitive action with the only randomness being how much your bank account depletes after every pull.

This is that which distinguishes between a good interactive system and a strong(er/est) interactive system. Id est a system that strives to not only address our superficial senses and thoughts, though in addition delves deep into a more nuanced realm of human thought and complex emotions.

It is that which is also present within Crawford’s formerly quoted definition.

I believe a p5 sketch could be honed but only so to an extent, for while we may invoke a multitude of senses, id est ones sight, perhaps emotion and intellectual curiosity, maybe even sound, it lacks touch, smell and taste. As someone who loves food oneself, many of my activities (in game design) and the real world do then to revolve around food, but the problem I run into is the same, we can not capture the actuality of every human sense in p5 sketches. Maybe that is the imperfect beauty of this medium, and so to me I will focus on honing the sights and sounds of my p5 sketches, with keeping in light a degree of naturality or randomness that helps to convey a deeper meaning, or perhaps is just there to perplex the observer!