Month: February 2024

As a user of many machines, I agree with what the author said about the two most important characteristics of good design: discoverability and understanding. The example the author gave with opening doors was the one I found myself relating to. There were many doors that I encountered that gave me difficulties in figuring out what I should do in order to open the door. This touches upon discoverability that the author discussed. Some doors challenged me to try various actions (push, pull, slide) to sucessfully open the door. 

Something I noticed about modern designs is that they are drawn for aesthetics. While the designs manage to perform all the functions that they are supposed to, users often struggle to figure out how to use the design and question why they are built the way they are. Aesthetics is important, especially in the current age where people care about the looks of things. However, when it comes to creating problem in using the design, I feel like it may be better to put aside the aesthetics and focus on the functionality and accessiblity of the designs. 

To move on, the author talked about engineers being too logical in creating the designs. Because engineers who build the designs are being too logical, the machines they built are eventually also too logical for non-engineers to use. Hence this creates difficulties for the users and prevents them for using the inventions that the engineers spent time building. To fix this, I think engineers have to have the mindset of “we are building designs for people according to their ability” and not “we are creating designs for people who think like we do”. In this way, instead of having the users fit into the designs, designs will fit into humans and meet their needs. 

Overall, the reading made me rethink about designs around me and their purpose. While there are many great designs already out there in the world, I believe people can create better designs by understanding the abilities and logic of humans or the target customers. 

The concept of this assignment is emotions. There are numerous ways to express one type of feeling. As I saw from this website, there are 5 main emotions (enjoyment, sadness, fear, anger, disgust). I have selected 5 words from each category and generated a code that randomly selects and displays the words on the canvas. Ultimately, my goal for this assignment was to show the many emotions humans feel.

In this assignment, I used the pause code to make the artwork interactive. When the user clicks on the canvas, the randomly selected words pause and the canvas freezes. When the user clicks on the canvas again, the random generation resumes. The code below shows how I implemented it.

//when mouse is pressed, random display of words pause/resume
function mousePressed(){
  
  if(pause == false){
    noLoop();
    pause=true;
  }
  
  else {
    loop();
    pause=false;
  }

For improvement, I would like to add a reset button. I’ve tried adding the button but was unsuccessful at it. Adding the reset button would allow the users to have a more interactive experience and also get a view of the image before it gets covered with words.

click on the canvas to pause/resume the display of words

 

After reading the first chapter of Don Norman’s The Design of Everyday Things, I have come to realize that our thoughts on design align with one another. Throughout the chapter, Norman emphasizes the importance of understanding human behavior and psychology in order to create designs and even experiences that work successfully with one another. This is basically the backbone of my thinking process when creating or designing anything. Without proper thought being put into how users might think when it comes to using different prototypes or designs, then there is, in my opinion, no point in creating in the first place. Although this might seem extreme, my thinking process’ main idea is that we create things for users in order for them to use it. Thus, to be able to do so, we need to put ourselves in the position of the users. This, however, must be done without putting any expectations on the users’ behavior. Doing so will create unreasonable and unrealistic designs for humans to use. This will allow us to create and cater to the average user, ensuring that interactions between users, systems, and designers flow successfully. 

That being said, this reading raises the question of the importance of empathy in designing and creating. How important is it to consider others’ feelings, thoughts, and even past experiences when creating or designing anything? How can we empathize with others to successfully cater to their needs? These questions, I believe, help us navigate the complexities of human psychology, emotion, and interaction in relation to designing. I would go as far as to say that without considering one or the other, any effort for designing, especially one centered around human interactions, will not be able to go as smoothly. We saw it with the example Norman gave with the nuclear power plant, not designing for human behavior and psychology in mind can have adverse consequences. Thus, it is only by considering these things will, as I mentioned previously, allow us to create better designs that are sustainable for humanity, ensuring that these designs are safe and reliable for human use. 

There are only three factors that makes anything “interactive”. Are they more than three? Or two? One? Reading through the text and found out that the writer is biased in terms of reading a book, he mentions that the book isn’t interactive. But I personally think the opposite! When I open a book on my reading sofa, about a subject I love, e.g. Automotive industry, Immediately I will start to process images while sitting on the sofa. When reading a story or a book and this is only by using one factor of interactivity which is Thinking, I will immediately process an Image of what am I reading, and I draw what is happening by only using one factor. Even you professor Aya, while reading this and me inserting the question marks and the exclamation mark you may have processed and image of me and my expressions connecting them with the text, and it goes beyond processing an image of someone depending on the text. I have created factors of what makes a book interactive. 1. Interest 2. Knowing the writer 3. Storytelling. The first factor is the base for the other factors and without this factor the other will fail to achieve the interactivity, without an interest in the subject why do you read it? The 2^nd factor is as I mentioned above, the voice of Masood is appearing in this text, why? Simply we met before, or I could have a video of me speaking on the internet or anything else that you could from it process an Image of me. The last factor is the Storytelling part, what is it? What is Storytelling as a term? Storytelling is the interactive art of using words and actions to reveal the elements and images of a story while encouraging the listener imagination. For example, On the cozy evening I dimmed the lights, played jazz music, sat on my reading sofa, grabbed a hot coffee in my favorite blue cup and started to revise this paper that you are reading now on your screen. 100% you have drawn everything on your mind from reading the sentence and I made an internal Interactivity with you dear reader. The Opposite point of views between the writer and me and the conflicts and the questions will generate fruitful answers.

I thought the author was crazy. The use of informal words and phrases jumped me out of my seat (not literally), but it allowed me to picture Crawford as an author because of how expressive the whole chapter is.

Defining interactivity is hard. There is no absolute correct definition for the word that matches its meaning. Beyond his definition that interactivity is a cyclic process where two actors alternately listen, think, and speak, I believe sense is also an important process to add to the definition.

Most stuff that we call ‘interactive’, even in the lower degrees (based on Crawford’s degrees of interactivity), requires human sensory input. Without haptic feedback, some interactivity is gone. Think about phones, computers, or even toys, they require humans to touch, move, and (sometimes) break them for it to be interactive. Although this sounds very ableist, I believe that our senses count as much as the three actions to experience interactivity that Crawford seeks. That human sensory is important to add to the definition of “What is interactive?“

When I was brainstorming for an idea for this week’s assignment, I hit a brick wall. It’s like writer’s block but a coding edition. When I stumble across such obstacles, I disengage my mind and play mindless games. Consequently, I switched my PC on and clicked straight onto the Pac-Man icon. There I was, looking at my little yellow circle eating smaller circles, when it clicked, “I can just make my own game”.

Hence I was inspired to make “Om Nom Nom”, same concept and idea, with a few malfunctions.

While playing the game felt fairly easy, coding it was immensely hard. Trying to fix the Pac-Man’s mouth was starting to be a great challenge but I eventually came around it. But a code I’m particularly proud of is making the character follow the cursor wherever it goes, and setting the “food”, the dots, in a loop to be displayed and disappear when the Pac-Man eats it.

let pacMan;
let dots = [];

function setup() {
  createCanvas(400, 400);
  pacMan = new PacMan();
  
  //creating initial dots, food for pacman, and putting them into an array
  for (let i = 0; i < 10; i++) {
    dots.push(new Dot());
  }
}

function draw() {
  background(0);

  //updating pacman's position based on mouse cursor's coordinates on the screen
  pacMan.update(mouseX, mouseY);
  
  //displaying pacman
  pacMan.display();

  //running a loop to display the dots
  for (let i = 0; i < dots.length; i++) {
    dots[i].display();

    //this checks when pacman touches the dots
    if (pacMan.eats(dots[i])) {
      dots.splice(i, 1); //remove dot
      dots.push(new Dot()); //add a new dot
    }
  }
}

//defining our pacman through class
class PacMan {
  constructor() {
    this.x = width / 2;
    this.y = height / 2;
    this.radius = 20;
    this.angleStart = 0;
    this.angleEnd = 0;
    this.angleIncrement = 0.05;
    this.direction = 1; 
    // 1 for opening, -1 for closing
    this.speed = 2;
  }

  display() {
    fill(255, 255, 0);
    arc(
      this.x,
      this.y,
      this.radius * 2,
      this.radius * 2,
      PI * this.angleStart,
      PI * this.angleEnd,
      PIE
    );

    //changing the angle to make look like pacman is opening and closing his mouth
    this.angleStart += this.angleIncrement * this.direction;
    this.angleEnd = this.angleIncrement * -this.direction;

    //change direction when the mouth is fully open or closed
    if (this.angleEnd <= 0 || this.angleStart >= 1) {
      this.direction *= -1;
    }
  }

  update(targetX, targetY) {
    //adjusting pacman's position towards the mouse cursor
    let angle = atan2(targetY - this.y, targetX - this.x);
    this.x += cos(angle) * this.speed;
    this.y += sin(angle) * this.speed;
  }

  eats(dot) {
    let d = dist(this.x, this.y, dot.x, dot.y);
    if (d < this.radius + dot.radius) {
      return true;
    }
    return false;
  }
}

A part I think I could improve on is changing the direction of the Pac-Man’s mouth towards wherever the cursor is so that it’s mouth opens and closes towards the food it eats. Additionally, I’d like to add another code which makes the game a maze, the character has to go through it under a time limit, and the walls are a different colour so when the Pac-Man touches the wall, the game restarts.