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!

A strongly interactive system listens carefully, thinks with some complexity, and responds in a clear way that affects what the user does next. It feels more like a back and forth conversation. I agree with Crawford that calling a shampoo bottle or a basic light switch “interactive” weakens the word, because those things only react in one fixed way. At the same time, his strict rejection of books, films, and performances as non interactive feels narrow to me, because people often respond to media through comments, edits, or shared viewing, which shapes the experience indirectly. Crawford seems biased toward systems that resemble one on one dialogue and software with explicit input and output, and less interested in social or cultural interaction around media. That bias is useful for learning to design, but it also raises concerns about how we value hybrid experiences like interactive films.

I found this reading really interesting because the author’s writing style is amusing and engaging. It almost made me feel like I was interacting with the ideas while I was reading. The reading also gave me a new, clearer definition of what “interactive art” means. The examples helped me realize that I didn’t fully understand interactive art before. In the author’s view, an interactive event needs three parts: speaking, listening, and responding. All three have to be present. And the response has to be meaningful; if the response is too weak or shallow, then the event does not really count as interactive in a strong sense.

Before, I assumed that if an artist designed something “interactive,” it would still be interactive even if there was no audience, or even if people were not paying attention. After reading, I understand the author’s point that the audience is not just watching the art—the audience becomes part of the artwork. In interactive art, the artist and the audience “make” the experience together. This is the first time I have really noticed how important the audience is to the final meaning of an art piece.

I also like the idea of “degrees of interactivity.” Some artworks create strong interaction because the audience thinks carefully and responds in a thoughtful way. Other situations feel less interactive because the audience may not notice what the work is asking, or they may respond without thinking much. This raises questions for me: how can we tell whether an interaction is “high” or “low” in interactivity? Who gets to decide that? Also, does the level of interactivity change how an artwork is interpreted, or can the meaning stay the same even when audience responses are shallow?

Concept

This work creates art from outward spirals employing the concept of classes and arrays. The spirals are created at the position of the mouse when it is clicked. The spiral get assigned a random color and it has a translucent effect to help blend colors and create a more visually pleasing effect. The blur function was also used to make the work more fluid.

Code I’m proud of

function mouseClicked() {
  let newBall = new Ball(mouseX, mouseY, random(20, 100), random(-5,5), random(-10,10));
  balls.push(newBall);
  
  // Prevents program from slowing down
  if (balls.length > 25) {
    balls.shift();
  }
}

This is the code that creates the spirals. It makes a new spiral when the mouse is clicked and then adds it to an array. I noticed that the program was glitching as the number of spirals increased. I then added a code to remove the oldest spiral created when the number of spirals reached 25. This kept the code running smoothly.

Code

Click to start
Press the space bar to clear the screen

Reflection

This exercise helped me put to practice my knowledge in classes and arrays while also using previous knowledge acquired throughout the course. It was really fun creating this work. This program can be improved by adding more features to the spirals through the class to create more visual effects.

I do agree with the author that interactivity is a two-way process. It is something I interact with, and something that interacts with me. However, does it have to include all three components the author mentions—speaking, listening, and thinking? Are we really interacting with computers in the same way? They do not think the way humans do. They are trained using mathematical equations and algorithms, yet they can sometimes outperform human thinking.

In my opinion, a strong interactive system allows me to manipulate things in real time—for instance, typing on a computer right now or playing a virtual reality (VR) game. There is not necessarily a listening, speaking, or even thinking component. According to the author, this would not be considered interactive. But for me, interaction means getting a reaction to my actions.

One example the author gives is an interactive rug, which I would not consider interactive from the rug’s side because it does not interact with me in the same way I interact with it—I simply play with cars on it. However, I would consider rugs that teach prayer through step-by-step instructions, or similar designs, to be interactive because I interact with them and they interact with me.

In the future, I would add things that get the user more involved in my p5 sketches, creating a real interaction between the user and the sketch. For example, I could use ml5 and other machine learning libraries to make the sketches respond to gestures, sounds, or movements. I think a strong interactive system should give feedback to the user, so their actions actually change what happens on the screen in real time. This way, the interaction doesn’t need to include thinking or speaking like the author says—it’s still interactive because the sketch reacts to me. I also wonder, though, does a system need intention or intelligence to be truly interactive, or is responsiveness enough?