Category: F2023 – Aya

Chapter 1 of “The Design of Everyday Things” by Donald A. Norman introduces a comprehensive perspective on design as a field that encompasses a wide array of artificial creations, including clothing, furniture, and bridges. Norman’s unique approach, particularly remarkable in the 1980s, melds three major design domains that were typically considered distinct at the time. These domains are industrial design, emphasizing the optimization of function, appearance, and value for users and manufacturers; interaction design, drawing on psychology, art, and emotion to understand how humans interact with technology; and experience design, which places a strong focus on enhancing user enjoyment.

Within this context, Norman argues that good design should be human-centered, emphasizing the crucial roles of discoverability and understanding in the usability of everyday objects. He also highlights the importance of effective communication between machines and users, emphasizing the need for products to not only perform well but also be easily interpretable. Norman’s call for designers to pay attention to situations when things go wrong underscores the significance of user satisfaction. In essence, Chapter 1 sets the tone for the book by advocating for design principles that prioritize user needs, usability, and satisfaction while integrating various design disciplines, making it a seminal work in the field of design.

Concept

The concept for this data visualization assignment is to create a compelling and informative visualization that helps users gain insights into the global impact of coronavirus-related deaths. I used the “Coronavirus Lat/Lon Dataset” sourced from Kaggle, which provides daily data on deaths, recoveries, and confirmed cases from around the world.

Challenges I faced:

The initial challenge I encountered was finding a suitable dataset to work with. I needed a dataset that not only contained coronavirus-related data but also included longitude and latitude information for different regions or countries. Locating a dataset that met these specific criteria was a time-consuming task.

A highlight of some code that you’re particularly
proud of:

let pointX=map(longitude[x],-200,200,0,width);
   let pointY=map(latitude[x],-200,200,0,height);
   point(pointX,pointY,death_day[x]);

I am particularly proud of the code snippet where I use the map() function to transform longitude and latitude coordinates into screen coordinates. This part of my project stands out because it demonstrates my ability to convert real-world geographical data into a visually appealing representation on the canvas

Embedded sketch:

Don Norman’s book “The Design of Everyday Things” explores some of the characteristics of good design in chapter 1, focusing on the importance of discoverability and understandability.

 

 When defining discoverability and understandability, Norman poses the following questions: “Is it possible to even figure out what actions are possible and where and how to perform them?…What does it all mean? How is the product supposed to be used? What do all the different controls and settings mean?”. 

 

Design impacts everything we do, from electronic devices to organizational systems of businesses. Norman believes that good design places importance on the interaction between people and the technology being used. When designs are not human-centered and rely too heavily on accuracy and pure logic, things tend to go awry. 

 

 Norman writes “It is the machine and design that are at fault. It is the duty of machines and those who design them to understand people. It is not our duty to understand the arbitrary, meaningless dictates of machines.”. I couldn’t agree more with this sentiment. If engineers and those capable of creating these machines are the only ones who understand how to use these machines then what exactly is the point of creating these products? This surely cannot be classified as universally “good” design.

 

 In fact, I would classify this as a more niche or exclusive design, since it leaves out a large demographic of the population. According to Norman’s writing, great design must be simple, straightforward, and allow for some nuance. Whether it’s nuance in the type of person using the product or nuance in how the product is designed.

Concept:

My project, originally named ‘The Raining Texts’, has grown beyond its initial idea. In this artwork, you’ll see blue words, which represent positivity, falling quickly down the screen. They come and go swiftly. On the other hand, red words, representing negativity, descend slowly and stay on the screen. Think of the screen as our minds. The words mirror what people say about us. Positive words are like passing clouds, they come and go. Negative words, however, linger. They stick with us, becoming a burden. Even though this project isn’t grand, it carries a strong message. It shows how negative words can stay with us, while positive ones quickly fade. This idea came from a YouTube video where people talked about their best and worst memories. Surprisingly, they remembered the worst ones very clearly, while good memories seemed to fade away. This shows how much negativity can affect us. That’s what I’ve tried to capture in this simple artwork.

Link:https://editor.p5js.org/Nasar/sketches/Nv_4YVOUy

 Code Highlight:

 //Split the strings in CSV Filles and store into words/words2 array
  words = split(PositiveWords[int (random(PositiveWords.length))], ',');
  words2 = split(NegativeWords[int (random(NegativeWords.length))], ',');
  
  //initialize for loops that keep storing and creating letter objects and store words1/words2 arrays into their constructor
  for (let i = 0; i < words.length; i++) {
    let randomWord = random(words);
    letters.push(new Letter(randomWord));
  }
  for (let i = 0; i < words2.length; i++) {
    let randomWord2 = random(words2);
    letters2.push(new Letter(randomWord2));
  }
}

I found this section of the code particularly challenging. At first, it wasn’t accepting a string input. Then, even when it did, the letters class wasn’t cooperating. It took me a while, but I eventually managed to work it out. It was a bit frustrating, but I got there in the end.

Reflections/comments:

Though the code may appear simple, it actually took me quite a while to set up. It involves several different concepts we’ve learned, from arrays and classes to functions, as well as working with CSV files and incorporating their data into the letter class. The process was lengthy, even though the final outcome may not seem that way. I’ve gained a solid grasp of both new and previously learned concepts, clearing up any lingering doubts I had. Initially, I had envisioned the negative words stacking up at the bottom of the canvas, forming a tower. I spent hours scouring social media and experimenting, but eventually, I had to concede and opted for the letters flowing down, repositioning slightly upward, and then repeating in a loop. All in all, I’m quite proud of the effort I’ve invested in this project.

 

Concept:

With this assignment, I wanted to further familiarize myself with objects and methods, which I feel like was accomplished. In my last assignment, the backbone of the piece was essentially just a grid of quadrilaterals, and there was really no way to switch it up between other shapes. Learning about OOP has broadened the creative liberty we have and so I experimented to make another grid piece, but this time with random shapes, making each shape an object.

Sketch:

Code Highlight:

With this assignment, I also learned to use the Case conditional statement which I utilized to assign a random shape to the object depending on the argument passed to it in the constructor. I also attempted translation and rotation, and made use of the push() and pop() functions to reset the grid after translations.

  show() {
    fill(random(255), random(255), random(255), 180);
    strokeWeight(0.1);
    switch (
      this.Sides //using a conditinal case statement to assign a random shape to the this.Sides attribute depending on the value it holds between 2 and 4
    ) {
      case 2:
        push();
        circle(this.X, this.Y, 20);
        pop();
        break;
      case 3:
        push();
        translate(this.X, this.Y); // translating the grid so the triangle is centered
        rotate(1);
        triangle(0, -9, -10, 10, 10, 10);
        pop();
        break;
      case 4:
        push();
        translate(this.X, this.Y);
        rotate(0.5);
        rectMode(CENTER);
        rect(0, 0, 20, 20);
        pop();
        break;
    }
  }
}

Reflection:

I would like to go back and figure out how to rotate the shapes where the rotation continues from the same stage even when the shapes change. I would also like to experiment with more methods in this class. I do think this captures the essence of OOP, making use of classes every time the loop iterates.

For this assignment, we had to experiment with concepts of object-oriented programming and arrays. I have made two sketches, both involving these concepts in different ways.

The first sketch is inspired by the example of the bouncing ball done in class. This sketch involves white lines produced on clicking against a colorful background, created using the random function. The movement in the lines is achieved using the noise() function. Finally, the mousePressed() function is used to produce interactivity, allowing the users to control the frequency of creation of the lines.

Applying object-oriented programming, I have defined a class called Shapes within which the required function Line() is defined. An array called ‘list’ stores each line as it is created.

Line() {
    stroke(255);
    strokeWeight(5);
    line(this.n,0,this.n,400);
    //xoff is the variable used for the argument of noise()
    this.xoff+=0.01;
    //the values are enhanced by a factor equivalent to the height
    this.n=noise(this.xoff-this.x)*height;
  }

The second sketch helped me achieve what I had initially hoped to create. It involves an illusion created using a for loop that produces rectangles of different sizes, all rotating at a certain angle. An if condition involving the mouseIsPressed Boolean variable results in the addition of color to the sketch. I wanted the sketch to include specific colors, so I created an array to store the color values, which are randomized and used as an argument for fill.

class Shapes{
  constructor(){
    this.angle=0;
    this.i=0;
    this.colors=["rgb(226,200,126)","rgb(239,165,83)","rgb(236,143,99)","rgb(239,119,110)"]; //array storing colors used as an argument for fill
    
 }
  
  Rectangle(){
    translate(width/2,height/2); //shifts the origin to the center of the canvas
    rectMode(CENTER);
    
    //for loop to decrease the size of squares
    
    for (let x=width; x>=0; x-=20){
      fill(int(random(0,130)));
      if (mouseIsPressed){
        fill(this.colors[this.i]);
        this.i=int(random(this.colors.length));
      }
      rotate(this.angle);
      rect(0,0,x,x);
      fill(int(random(150,255)));
      
      if (mouseIsPressed){
        fill(this.colors[this.i]);
        this.i=int(random(this.colors.length)); //stores a random value from the colors array
      }
      rotate(45);
      rect(0,0,x+20,x+20);
      this.angle+=1;
    }
  } 
}

During the assignment, I encountered several challenges with defining functions within a class and ran into errors while creating the loops. These errors were mainly due to the difference in the syntax used within a class.

Reflecting of the process, I feel both the above sketches involved relatively basic concepts of object-oriented programming, and I hope to enhance my learning by exploring further on these topics.

Chris Crawford the author of The Art of Interactive Design includes many of personal concepts of understanding towards the art of interactivity. He starts off by claiming how the term is overused and barely understood. Crawford considered the definition of interaction to be: a cycle process in which two actors alternately listen, think, and speak. Anything can be interactive as long as it is an active action between the two ends of the line.
Crawford then dives more into interactivity design; the key in order to manage a good program that ends up ranging from a website to a game is to understand how and what makes things interactive. He goes back into the three main points of interactivity:

-Listening: In order to manage healthy conversations with other people, listening and carrying a meaningful understanding towards another will gain a sense of mutual respect.

-Thinking: To make this conversation even more successful, recalling and using empathy will help enjoy the company with the other speaker.

-Speaking: Lastly, and here is where interactivity comes, the other party must join in by adding on thoughts related to the subject.

Knowing what makes things interactive is crucial for effectively developing websites, computer games, and software. In his book “The Art of Interactive Design,” Chris Crawford simplifies the concept of interactivity, explaining what it is, how it functions, its significance, and how to create excellent interactive software and websites. Crawford’s maneges to add a hint of an artistic aspect into the concept of interactivity.

Concept:

In this project I wanted to create something cute and there’s nothing cuter than cats! So, adding the saying “cats have seven lives” I implemented it by adding my very own drawing of a cat that appears within seven clicks. After clicking seven times the background restarts.

Cat speedDraw

Highlight of Code: 

Using this class code I have set the randomness of my images to follow a certain pattern within a limited sized canvas.

class Cat {
  constructor(x, y, img) {
    this.x = x;
    this.y = y;
    this.img = img;
    this.angle = random(TWO_PI);
    this.speedX = random(1, 3);
    this.speedY = random(1, 3);
  }

  update() {
    this.x += this.speedX * cos(this.angle);
    this.y += this.speedY * sin(this.angle);

    if (this.x < 0 || this.x > width) {
      this.angle = PI - this.angle;
    }

    if (this.y < 0 || this.y > height) {
      this.angle = -this.angle;
    }
  }

  display() {
    imageMode(CENTER);
    image(this.img, this.x, this.y);
  }
}

In this set of codes I was able to put together the idea of clicking the screen seven times to make the program alternate between a random image of both my drawings. When making the eighth click the program restarts.

function mouseClicked() {
  if (numClicks < maxClicks) {
    let catImage = catImages[numClicks % 2]; // Alternate between cat images
    let cat = new Cat(mouseX, mouseY, catImage);
    cats.push(cat);
    numClicks++;
  } else {
    // Reset after 7 clicks
    cats = [];
    numClicks = 0;
  }
}

Reflection and Ideas for Future Work:

This work took me so long and probably the ones with the most errors. I keep forgetting to add my class codes. I also had a problem with uploading my images without adding any additional local programs as suggested in different websites. After resizing my images and going through my code multiple times I finally got it running.

Edit: https://editor.p5js.org/mariamalkhoori/sketches/6hPD6jbgn

Chris Crawford’s exploration of interactivity in “The Art of Interactive Design” challenges us to rethink our understanding of this fundamental concept in design. By emphasizing interactivity as a two-way conversation, critiquing its misuse, and highlighting its subjectivity, Crawford underscores the importance of user-centric design principles. In a world saturated with technology and digital interfaces, prioritizing active involvement and meaningful engagement is paramount. Ultimately, the essence of interactivity lies in its ability to empower users, giving them a voice and agency in their digital interactions, and this perspective should guide our approach to interactive design.

Crawford’s emphasis on interactivity as active involvement aligns seamlessly with the principles of user-centric design. In user-centric design, the user’s experience takes precedence, and the goal is to empower users by giving them the ability to make meaningful choices and feel a sense of agency. Interactivity, as defined by Crawford, becomes a means to achieve this empowerment.

I believe that user-centric design, while valuable, can face several challenges. It can inadvertently assume homogeneity among users, overlooking diverse needs. Overreliance on user preferences may inhibit innovation and encourage a short-term focus, potentially neglecting long-term considerations. Balancing user wants with genuine needs can be tricky, and accommodating constant user feedback can lead to scope creep and project delays. Biased or limited user research data can result in designs that cater to specific subsets of users, and resistance to change from users may impede progress. Additionally, striving to please all users can lead to a design-by-committee approach. To address these challenges, user-centric design should be part of a holistic approach that considers innovation, business goals, ethics, and sustainability, while maintaining flexibility to adapt to evolving user needs and technology.

This is my first sketch of a “Scuba Diver”.

My art project does not seem as realistic as the photo. However, I tried to use a similar blue color and an array of fish to portray a Scuba Diver’s active moments. This fall break I am planning to go scuba diving with my friends. Scuba diving is an exhilarating and transformative experience for many people. The moment I descend beneath the surface, I can enter a completely different world filled with awe-inspiring marine life, vibrant colors, and a profound sense of weightlessness. The feeling of gliding through the water, exploring coral reefs or underwater caves, and encountering fascinating creatures can evoke a sense of wonder and adventure. The rhythmic sound of my own breathing through the regulator, the cool embrace of the water, and the importance of unity with the underwater environment can create a profound sense of peace and tranquility.

I created this art project to make people feel the same as me.

I wanted to make the fish look more realistic. So, I used arrays to store the points of the wavy background and objects (instances of the Fish class) to represent and control the behavior of fish in the underwater scene. Also, two images are preloaded using the preload() function: ‘scuba.png’ and ‘fish.png’. These images are used for the scuba diver and fish graphics in the sketch. Therefore, The scuba diver and fish move and are displayed on the canvas, creating an animated underwater environment.

// Create the blue wave
  let xOff = 0;
  for (let x = 0; x <= width + 10; x += 20) {
    let yOff = 0;
    let y = height - 100 + map(noise(xOff, yOff), 0, 1, -20, 20);
    wave.push(createVector(x, y));
    xOff += 0.1; // Adjust the noise detail for different wave patterns
  }

  // Create fish objects
  for (let i = 0; i < 5; i++) {
    fish.push(new Fish());
  }

function preload() {
  // Load the dolphin and fish images
  dolphinImg = loadImage('dolphin.png');
  fishImage = loadImage('fish.png');
}

To enhance my code for the underwater scene, there are several areas for improvement. It would be better to reorganize the code by dividing it into functions or classes to improve readability and maintainability. Additionally, defining constants or variables for parameters such as canvas dimensions, image sizes, and the number of fish can make it easier to experiment with different settings. Maybe next time, comprehensive comments and documentation can be added throughout the code to explain its various components and functions, aiding in understanding and collaboration. I would try to make more lively and aesthetic waves also!