Category: F2026 – Mang

To start with, the reading, especially the examples of the sink in the hotel and the pull-push doors, made me think of a personal example, actually. We have a sink at home in the bathroom, and whoever visits us for the first time, they are always so confused by it, because you have to turn the faucet to the side, not up, to turn it on. (Figure 1) Now, it is on the side and not the top, but other than that nothing really indicates how it should be used. My family and I only know it because we have been living there for years, and I always get surprised when someone asks for help with it, but now that I think of it, it really lacks a good signifier.

For something else that really bothers me with products other than the things mentioned is probably when they overexplain something relatively easy-to-understand function, at the cost of describing something that ACTUALLY needs some description. In the past, whenever I tried to connect a wireless device to my phone or laptop I always had to look it up online how to actually connect it, because each of them has different methods to do so. The reason why I always have to go online is that in the instruction manual, they were too busy talking about how the button with the “plus” signal increases volume and how the one with the “minus” decreases. I understand that this also needs to be said in case someone is having their first time, but I feel like some designers are literally feeding all the information to me. These instruction manuals sometimes make me feel so stupid, and sometimes I think I am the actual designer and maker of the product and know everything about it. I have rarely come across a digital product that gives me proper infomration about the actualy usage of the product and doesn’t talk about the designer, their family and how this is the best product in the world for at least three pages.

To maybe make it more HCD I feel like all these informations could be put to a way more visible place. For example,  I sometimes see products that have a little instruction manual on the box itself, so even before buying it I can see and decide if a product like this what I actually need. I knwo that today, everything can be just looked up on the internet, but I don’t think that should replace proper documentation on the product itself.

For IM, I feel like whenever I had to design a website for example, the most common feedback was that “So what do I do now?”.  On the web, especially, where you can do SO many things, click your right, left mouse buttons, go up, down, enter, I feel like designing a UI that is either explained how it is dedicated to use, or it can be easily figured out by the user while using. It is easier to lose interest in a website that you can find hundreds of in 5 seconds on the very same device you already have, than a product that you had to spend a lot of money for, waited for delivery, and now finally is in your hands. I feel like for this reason, designing a website, a game or anything like that is even more important to take into consideration the role of affordances and signifiers, as the author mentions. They need to comunicate what can be done (like, if I click my right mouse button, will anything happen, or am I just wasting my time) and how that can be done. I think a good example of that was the menu for the restaurants. Using symbols can help, as they are not bound by language, colours (as usually red indicates wrong and green correct) or anything that can be understood by a large amount of people.

One part of the reading that stood out to me was the distinction between interaction and reaction. It says, “Interaction and reaction are apples and oranges, horses of different colors, tigers of different stripes.” This made me think about how easy it is to mistake a system reacting to the user for a system actually being interactive.

A strongly interactive system, to me, is something that is open to interpretation and interaction in a way where the user is truly connected to the system through an action-reaction ecosystem. The user’s actions should have some meaning within the system, rather than simply triggering a response that could have happened regardless of what they did.

In my current sketches, I only let the user control the local state of the sketch using mouse clicks and drags. The sketch reacts to what the user does, but after reading this, I think there is more I could do to make that interaction meaningful. I could make a sketch that expects a more explicit answer or question from the user and responds back to them in a meaningful way.

It should also involve me, as the developer, communicating a message or feeling that is open to interpretation. The user should be able to affect the sketch while also forming their own interpretation of what the sketch is trying to communicate. That feels closer to the kind of interaction described in the reading, rather than simply making a sketch that reacts to inputs.

I find the concept of interactivity pretty interesting. The author of the book chapter made it very clear that he despises how the meaning of the word has been skewed recently, and I agree with him. The thing is though, at what point is something just my reaction vs at what point am I actually interacting with the thing? I’m wondering because I believe the writer is correct in his assumption that a lot times when people refer to interactivity, they actually mean normal reactions. However, are interactions and reactions not connected in that sense? Reaction is a form of engaging with something you see, not at the level of actual interactivity the author is seemingly looking for, but still, you are engaging with the material in some matter.

When it comes to movies are you just reacting or are you interacting with the creator. If it is just your reaction, then, does that inherently mean there wasn’t a degree of interactivity even through the reaction ? Again, I am not saying the writer is wrong in what he claims, but I just can’t help but wonder what’s the line between reactions and interaction. Does interaction have to entail the characters in the story should hear you when going in a scary house? Is part of the interactivity not your own reaction? Looking beyond the characters of the screen, could we not say there was a level of interactivity when it came to audience and the creator’s hope in bringing in causing your anger and fear to happen?

When I think of strongly interactive systems, I tend to think of systems in which your input can actively change what is happening in a piece of media. Additionally, I think a good way to improve user interaction in my p5 sketches is by having the use play into the piece. Maybe by giving them something to click or by having their addition change the piece in some way.

In my opinion, I would classify the characteristics of a strongly interactive system as one that requires “two actors,” as Crawford mentioned. Interaction is not something as surface level as a book or a movie that you watch or listen to, but something that reacts to you and requires a back and forth interaction between the user and the system. What surprised me while reading was finding out that things I thought were interactive, such as dancing, opening a fridge door, and watching a play, were actually either not interactive or had a very low degree of interactivity. A strongly interactive system should be able to listen to the user’s actions, process them, and respond accordingly. I also agree with Crawford’s idea that interactivity exists on a scale, as simply responding to an action does not necessarily make something highly interactive.

Looking back at my p5 sketches, I think I could improve their level of interactivity by making the user’s actions have more of an effect on what happens within the sketch. For example, in my generative desert night sky, clicking currently generates a new arrangement of stars with different positions, sizes, speeds, and colors. Although the sketch responds to the user, the response is still quite limited because clicking always produces a similar result. To make it more interactive, I could allow different user actions to affect different parts of the artwork, such as having the movement of the mouse change the direction of the stars or allowing the user to affect the appearance of the sky. I think this would create more of the conversation Crawford describes. I would want to improve the degree of user interaction by not only implementing interactive functions and concepts where the user would be able to interact with the artwork or code, but also working harder on the function and form of the design. As I learned while reading, interactive design isn’t only about making an interface look good or function correctly, but considering both aspects to design the entire experience of interacting with something.

This book chapter really opened my eyes in terms of how deep the idea of interactivity can really go. Before reading it, I think my definition of interactivity would simply include anything that reacts or changes based on an input from a user. However, now I think looking at interactivity through a scale makes much more sense. Aside from properly incorporating the listening, thinking, and speaking principles addressed by Chris Crawford, I think a strongly interactive system should respond to the different inputs provided by the user and be able to take them into consideration for future interactions, making the interactivity less of a ‘call and response’ and more of a continuous ‘conversation’. This changes the user’s role to an active participant in the interaction rather than just a passive presence giving commands. Ultimately, making it more of a live feedback loop.

For improving the degree of interaction for future p5 sketches, I think I’d want to focus on moving past merely having mouse-clicked interaction or having the sketch change with each interaction. I’d want to incorporate different ways for the user to interact with the sketch, like moving the mouse around the screen to change the color or speed of something. Additionally,  I’ve seen a video of a ball that has some kind of gravity on it, so when the user clicks, the ball drops and bounces under the effect of gravity, eventually stopping. I’m not sure how advanced that would be to create or if it’s something we’ll cover eventually in class, but I think having a work where maybe the user can kind of physics system that allows the ball to react differently depending on how it was tossed. Overall, making the work more interactive.
 

Concept

While I was reviewing The Coding Train videos on the topics we took in class this week, I was thinking about what to do for my assignment and how to implement OOP. I was specifically trying to figure out an object I could create multiple of. Then suddenly, the ghosts from the game Pac-Man popped into my head. I’m a huge fan of video games, so I immediately decided to use Pac-Man as inspiration for the assignment. I based my project on the design elements of the game, like the way the ghosts look, and had it so that when they’re moving around, they create a dotted line along their path, with the design being inspired by the dots Pac-Man eats around the map.

My Code

 

Process

I started my code by creating the ‘Ghost’ class, as that would be the main part of the project. Before starting any of the code, I watched ‘6.2: Classes in JavaScript with ES6 – p5.js Tutorial’ from The Coding Train as a refresher, and worked through creating the class myself.

Next, I began working on randomly spawning in the Ghosts when the program is run. To do this, I used a combination of the p5 reference site, searching on Google, and again the video ‘6.2: Classes in JavaScript with ES6 – p5.js Tutorial’ from The Coding Train.

Once I was able to get the ghost to spawn in properly, I began to work on getting them to move. I wasn’t sure where to start with this, so I looked for help on YouTube and came across a video titled “p5.js Coding Tutorial | Array of Bouncing Balls (OOP / mousePressed)” by Patt Vira. With the help of the video, I implemented the ‘moveGhost’ function and ‘checkBoundaries’ function, allowing the ghosts to move around the screen without going off of it. Additionally, I changed the dx and dy speed variable in the constructor allowing for variation in the speed between different ghosts.

Next, I decided to work on adding color to the ghosts, so I added an array holding a few colors for the ghosts. To give them a color, I added an argument to the constructor that would select a random color from the array when the ghost is created.

The next section of code ended up taking the longest to figure out. At first I tried to implement it by myself, but it wasn’t working out, so I looked through some of The Coding Train’s videos and found ‘9.7: Drawing Object Trails – p5.js Tutorial’. I used their help to implement an array that holds the vector location of each ghost and creates a point for each one.

Code I’m Proud Of

//creates vectors of the ghost position
    let v = createVector(this.x,this.y);
    this.history.push(v);   

    if (this.history.length > 500) {
      this.history.splice(0,1);

trail(){
  stroke(this.color);
  
  for (var i = 0; i<this.history.length; i=i+1) {
    var pos = this.history[i];
    ellipse(pos.x,pos.y,1,1)

The part of the code that allowed the ghosts to draw a path while they were moving was a completely new concept to me, so being able to learn how to do it was really exciting, and therefore it is also the code I am most proud of. I definitely plan to implement this in future projects as well.

Problems I Ran Into

The biggest problem I had during this assignment was definitely getting the ghosts to draw a path as they moved. Before, I looked for a video to help me; I ended up making it so that there were just lines connecting each of the ghosts, rather than them creating a line as they moved.

Additionally, when I added the colors to the ghosts, my first attempt resulted in them flickering between the color options rather than having one. This was because I put the color randomization in the ‘Show’ function, so every time the ghost was drawn, the color changed. I was able to fix this tho by moving the color selection into the constructor.

Reflection

Overall, I’m happy with what I was able to create for the assignment, and it helped me a lot with practicing the latest concepts we’ve learned during class. I was especially happy, I could inccorparte my love for videos games to some extent. Although figuring out how to get the ghosts to draw a trail along their path was a bit challenging at first, learning to implement the array capturing the positions of the ghosts was a really interesting and I hope to explore it’s capabilities further in future assignments and projects. In terms of improvements, I think adding a way for the eyes of the ghosts to change direction based on which way they’re moving would add another fun element to the work and make their behaviours more similar to the actual game.

Concept:

The desert is a big part of the UAE’s landscape, and one thing I would always notice during desert trips was how bright the night sky was compared to in the city. I was also inspired by the nightsky timelapses where it showed the movement of the Earth and the various stars. I wanted to mimic that in my artwork, by randomizing the stars shape, size, speed and the positioning of stars with every click.

My Artwork:

Code that I am proud of:

// Move the stars across the sky
  update() {
    this.posX = this.posX + this.speed;

    // Move star back to the left when it leaves the canvas
    if (this.posX > width) {
      this.posX = 0;

The reason as to why I am proud of this code is because I used the update() function to make each star across the sky move not simultaneously, but across the sky with each having its own random speed. I also added an if statement that checks when a star would go past the edge of the canvas and moves it back to the beginning/left. I liked this as it helped solve the problem of how the stars would reappear as the sky would move.

Debugging/Issues:

When it comes to a strong interactive system, I like to consider the characteristics to be nothing more but representations of the system’s ability to LISTEN to a user. This is because if the interactive system is said to be involved in the “interactive” category of the arts, then it has to be the system’s obligation to stay true to its name via making sure that the communication between itself and the user is one-hundred-percent inline with each other. This includes the computer receiving the message depending on what the user manually activates on their own physical interface end and then actually ACTING upon whatever command it must have received. For example, let’s say that you were to be playing Five Nights at Freddy’s and you see an enemy outside your location in the game; your instinct would be to close the door right away to protect yourself. Only way to do that, however, is to have your hands interact with the hardware of the computer via moving the mouse so that your cursor would hover over the door button in the game, followed by left clicking your mouse so that the computer would respond to your action of left clicking your mouse by having the door in the game close under your command. Thus, this is an example of how an interactive system is supposed to work, with the computer giving you access to whatever it has to offer while also making it be your obligation to activate a certain command from your end that will reach into the computer system’s understanding and conduct a performance that will keep the interactive conversion strong as result of the computer “listening” to your inputs

With this understanding in mind, there are only a few ideas I can think of as of now. One idea that I wish to possibly figure out is how to create a series of coding that will let users control the position of certain objects/shapes from my sketches. Let’s say, for example, that if someone were to want to click on a triangle that could hypothetically be available in a sketch of mine, I would have to take it upon myself to write some coding instructions that would allow the user to either rotate the shape through simple clicks or, if possible, move the triangle to a different spot via holding and dragging with the mouse. Another idea I wish to figure out is how to hide certain phrases in my work.. only for them to reveal themselves upon being activated by the user interacting with my sketches. For instance, a user may be reveal a sketch of mine that would have them click on a random empty spot, only for the spot to show a transition of the words, “HHN”, fading into existence right before their eyes; this will be due to the hypothetical doing of me adding some coding instructions into my sketch that would allow said-words to fade into existence upon the user clicking on the designated empty spot with the mouse. After all, the concept of interactive art from my eyes should be known as art pieces where the observer him/herself is in control of what shall change within the sketch.

The main idea of interactive, from what I like to believe, is giving the art watcher their own mini controller that will let them change what is displayed within an art piece depending on a physical command from their end. Whether it be behind pressing a specific key on a keyboard or left clicking on a mouse that is connected to the computer display of the sketch, what matters most is if the user can communicate with the computer to change something in their favor. It must almost be like a conversation in real life, where one asks another a favor for something and the one who has been is obligated to fulfill said-favor. If it was the other-way around, where the sketch does nothing no matter what an observer touches to release a certain command, then it would simply be a normal artwork that may look stunning, but is missing something to give life to it. If you take it from me, a normal artwork may be good, but one can suppose that nothing is better than encountering artwork that just feels almost “alive” towards you and your presence.

let head;
let leftEar;
let rightEar;
let hat;

class BearObject{

  constructor(type, x, y, stopY, size){
    this.type = type;
    this.x = x;
    this.y = y;
    this.stopY = stopY;
    this.size = size;
    this.speed = 3;
    
  }

  update(){

    if (this.y < this.stopY){
       this.y = this.y + this.speed;
    } 
    
  }

  drawSelf(){

    // Head of Bear
    if (this.type == "head"){
      fill(255, 200, 0);
      circle(this.x, this.y, this.size);
    }

    // Bear Ear
    if (this.type == "ear"){
      fill(255, 200, 0);
      circle(this.x, this.y, this.size);

    }

    // Bear Hat
    if (this.type == "hat"){
      fill(0);
      rect(this.x, this.y, 80, 110);
    }
    
  }
  
}

function setup() {
  
  createCanvas(600, 600);

  // positioning of each object =
  
  head = new BearObject("head", 300, 0, 300, 250);

  leftEar = new BearObject("ear", 200, 0, 210, 70);

  rightEar = new BearObject("ear", 400, 0, 210, 70);

  hat = new BearObject("hat", 260, 0, 70, 100)
  
}

function draw() {
  
  background(220);

  console.log(head.type);
  console.log(head.size);

  head.update();
  head.drawSelf();

  leftEar.update();
  leftEar.drawSelf();

  rightEar.update();
  rightEar.drawSelf();

  hat.update();
  hat.drawSelf();

  
}

My goodness, this assignment was an absolute festival of stressful thinking. Firstly it requires not only looking back into some of our class notes, but as well as the example that was posted on the course website! It is simply because of the fact that generative digital art is not really my tempo and/or within my league. Nevertheless, I had to use the examples to the best of my ability to create this artwork inspired by this video-game franchise that I had always adored with all my heart. The franchise, in question, goes by the name of Five Nights at Freddy’s.

This franchise is a video-game series that I remember from my elementary school times, which has also resurfaced back into the present time period of my life! Since it has often brought a smile to my face upon interacting with it, i figured that i could maybe try generating a simple yet lovely art sketch based on the main Bear Mascot of the series; however, I went with the choice of coloring the sketch yellow as a way to pretend that it’s golden, because my memories with the series can be described as.. Golden.

Now, I was able to kind of familiarize with the concept of setting up the “class” of the objects in relation to the bear sketch and setting the rules within the class; however, my problem was figuring out how to get the circles actually moving down the sketch, which will almost make it look as if it is generating itself to life via visual movement from top to bottom. After some looking back into the reference sheet, as well as proofreading my mistakes with Ai, I realized that what I had to do was connect each object of the bear to the draw function; equivalent to connecting some cables together so that they would get a TV up and running without issue. In addition, I had to learn to connect the class to the draw function in a way that also required me to install an update command in my sketch, where it was responsible for making sure that the movement of the objects into their respective spots was possible. Right up there with the command of “drawSelf” that would assist in helping keep track of how the objects traveled down the X and Y coordinates until reaching the designated spot that the “setup” has advised them to stop at. It has been about setting the transitions up at the right time and right spots in order to ensure smooth transitions of the sketch coming into place to form the sketch of the bear mascot (but yellow) from Five Nights at Freddy’s. All in all, this still made me hope that I can look back into this sketch for reference if I ever need to work with more artworks that deal with transitional elements that when combined, will be able to form the artwork into one whole picture for all to see.