Category: F2023 – Aya

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!

 

 

 

In the initial chapter of Chris Crawford’s book, “The Art of Interactive Design,” titled “What Exactly is Interactivity?” the author delves into the concept of interactivity and attempts to provide a comprehensive definition.

Reading this text, I find myself nodding in agreement with the author’s perspective on the term “interactivity.” It’s evident that the author is critical of how the term is used and misused in contemporary discourse. The comparison of interactivity to a conversation, where two actors alternate between listening, thinking, and speaking, is thought-provoking. This made me question: How well does this metaphor hold up when we apply it to different contexts, especially in the digital realm where human-computer interactions can be vastly different from human-human conversations?

The author’s critique of the misuse and overuse of the term “interactivity” in various contexts, from marketing to technology, is a valid point. The example of a laundry detergent labeled as “specialized terminology” humorously illustrates this point and serves as a reminder of the potential for specialized language to lose its meaning.

The discussion about the subjectivity of interactivity is thought-provoking. The idea that interactivity might exist in the eye of the interactor raises questions about how we define and measure it, especially in various contexts where it might manifest differently.

The author’s exploration of what isn’t interactive, such as printed books and movies, challenges traditional definitions and prompts me to reconsider what truly constitutes interactivity. It’s a reminder that not all forms of communication or media can be classified as interactive.

The world grows most quiet during the Blue Hour, that sliver of time right before night. So short as to almost not have existed. During the Blue Hour, babies stop crying. So mothers gaze out their windows. Candles burn a bit dimmer. The Blue Hour is the world heaving one last sigh before going to sleep. I’ve always maintained that poets write from the Blue Hour of their brains.

I look for the Blue Hour in every movie. It’s in Moonlight. When Chiron’s staring into the ocean, it goes, “In the moonlight, black boys look blue.” It’s in The Act of Killing, a documentary about Indonesian genocide. I don’t think there’s a word in the English language to describe the action of sharply taking in a breath, out of breathlessness. The kind of breath that moves you into an almost-cry. It’s not a gasp. But whatever you call it, that’s what I did when I saw that blue picture. All the night birds taking flight. It’s in Wong Kar Wai’s In the Mood for Love. I’ve inserted a picture below:

It’s in Babel. I’ll never forget those two boys laughing against the wind on the mountain, before they knew their lives were over. The sound cut out with all the blue. Like the blue was in your head. In their heads. I noticed that Past Lives did the same thing with its own Blue Hour shot. Cut out all the sound. The Blue Hour is Eternal. It is quiet. It is sad. Profoundly so. I exist in the Blue Hour in the cave of my head and the trench of my heart. It’s the best time to smoke a cigarette. Hence my assignment. I wanted to capture the spirit:

https://editor.p5js.org/EloraTrotter/sketches/GX1kLdNr6

You can take a look at the code above. I’m very glad that I was able to implement loops, classes, and constructors. I wanted to increase the frame rate but P5Js kept crashing. With help from Professor Riad and the ever-reliable Coding Train (Youtube video linked here: https://www.youtube.com/watch?v=UcdigVaIYAk), I was able to fully understand what I was writing. I tried tweaking the the particles so that they became different sizes, or less opaque, but I scrapped all that in the end. Simplicity suited this piece, just like simplicity suits the Blue Hour. I would like to continue working on this piece because I have an unfinished vision of the smoke being huge Van Gogh-like swirls. But that’s a task for future Elora. Carpe the noctem. You learn.

Also- you know on second thought. I’d also like to learn how to integrate music and coding. One song that captures Blue Hour for me is “Midnight Blues” by Pavel Milyakov (Bryan Waterman rec). I’d like people to listen to that while viewing this.