Month: February 2024

Assignment 4: Displaying Text

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

 

W4- Reading Reflection: The Psychology of Everyday Things

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. 

New Interactivity factors. Week 3 Reading Reflection

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 2nd 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.

Week 3 Reflection – Finding Interactivity

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?“

Assignment Week – 3

 

For this assignment I tried my best to wrap my head around arrays and classes and how to go about them. I wanted to also add an interactive element where the circles respond to disturbance of the mouse – proud of that 🙂

There wasn’t really a specific idea, It was trial and error until I found what works for this assignment which is that. However, I wasn’t successful with randomizing the floating orange colors.

let oranges = [];

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

  for (let i = 0; i < 10; i++) {
    let x = random(width);
    let y = random(height);
    let diameter = random(30, 50);
    let velocity = random(1, 5);
    let orangeColor = color(random(255), random(255), 0);
    let orange = new Orange(x, y, diameter, orangeColor, velocity);
    oranges.push(orange);
  }
}

function draw() {
  background(174, 198, 207);

  for (let orange of oranges) {
    orange.update();
    orange.display();
    if (orange.isMouseOver()) {
      orange.disturb();
    }
  }
}

class Orange {
  constructor(x, y, diameter, color, velocity) {
    this.x = x;
    this.y = y;
    this.diameter = diameter;
    this.color = color;
    this.velocity = velocity;
    this.originalX = x;
    this.originalY = y;
  }

  update() {
    this.x += this.velocity;

    if (this.x > width + this.diameter / 2) {
      this.x = -this.diameter / 2;
      this.y = random(height);
    }
  }

  display() {
    fill(this.color);
    ellipse(this.x, this.y, this.diameter);
  }

  isMouseOver() {
    let d = dist(this.x, this.y, mouseX, mouseY);
    return d < this.diameter / 2;
  }

  disturb() {
    this.x += random(-5, 5);
    this.y += random(-5, 5);
  }
}

 

Assignment 3, Rama

For this project I had two goals, adding interactivity, even if simple because it adds to the UI in addition to keeping it simple. So I decided to use was I learnt from the previous assignment about loops and incorprate class and arrays this time. I didn’t have much inspiration from outside sources, I chose cats because the shape is very interesting to make and the meowing sound is annoying yet cute. Here is my sketch:

This is my favourite part of the code:

function mouseClicked() {
if (cats.length < 5) {
cats.push(new Cat(colors[catIndex]));
catIndex++;
meowSound.play();
} else {
window.location.reload();
}
}

because I got to use sound for the first time in my sketch and incorprate it with the mouse clicked function. However I did want to include a different sound of “meow” for every colored cat do add variety but it was getting a bit tricky and overwhelming so I kept it as is.

 

Reading Reflection – Week 3

First and foremost, I completely agree with Crawford when he said that “the term interactivity is overused and under understood.” I believe it becomes under-understood because it has been made a universal term when in reality it can be interpreted in many ways, thus becoming subjective, as discussed on page 6. That’s something I don’t necessarily like, especially considering the word “Interactive” in our university’s “Interactive Media” program. In this sense, it has been underestimated and has affected many opportunities for students, including myself. To be more specific, the term has been underestimated in many ways. When people hear “Interactive Media,” they often disregard “interactive” because it’s an adjective and then proceed with “oh, so like media, like social media” or “oh yeah, like TV hosts and stuff.” I find that very frustrating because what we do is much more. With that, I have a love-hate relationship with the term “Interactive Media.”

Furthermore, on page 11, the author states, “Interactivity designers do not deny the hard-won lessons of the past; they seek to incorporate them in a wider perspective, which, in turn, requires some rearrangement.” He follows by saying that incorporating the wisdom of older fields plays an important role in this so-called “rearrangement.” I wonder what exactly he means by rearrangement, and to what extent should we apply it. In addition, on page 12, the author says, “Once interactivity becomes established in our culture, the academic will get a hold of it, and then you’ll have more ‘high-quality’ definitions than you ever thought you needed.” But what about the non-experts in the field who tend to have authority in recruiting? Will they ever understand what “interactivity” is, or more specifically, what “interactive media” is? Overall, I’d say it was an interesting read, but I had a lot of contrary ideas, part of the reason being that I will be carrying that name with me throughout my academic career.

Week 3 Reflection

As I consider the various viewpoints that the text have presented on the topic of interaction, I find myself drawn to the complex dance that takes place between user input and system response. Fundamentally, interaction is a dynamic exchange in which the user and the system participate in an ongoing cycle of input and feedback. This link forces us to reevaluate how we engage with commonplace items and technology, as well as how we understand interactive media.

As the reading demonstrates, the notion of interactivity encompasses more than just user participation; it also refers to a more profound and significant conversation between people and technology. It challenges us to reflect on the nature of our interactions, asking us to take into account not only the mechanics but also the purpose and result of these exchanges. Echoing the observations of my peers, I find the subjective character of interaction and the way it adjusts to the capabilities and requirements of its audience to be quite fascinating. This flexibility emphasizes how important careful design is to making experiences that appeal to a wide range of users and are both accessible and meaningful. Furthermore, the classification of interactive media into low, medium, and high levels of interaction provides a helpful framework for analysis. From the straightforward act of clicking a button at a pedestrian crossing to the intricate conversation with AI chatbots, it enables us to classify and assess interactions based on their depth and complexity. Every degree of interactivity presents different difficulties and chances for participation, highlighting the need for a sophisticated approach to interactivity design.

To sum up, the contemplations and illustrations presented throughout the class discussion enhance our comprehension of interaction. They force us to think about how our designs and interactions affect society more broadly, highlighting the importance of approaching interactive media with consideration and user-centered design. Our conceptual framework is expanded by this investigation, which also motivates us to innovate and push the limits of interactive design.

Week 3 – Reading Response: The Depth of Interactivity | Haziel

Chris Crawford’s analysis of interactivity in his article offers a thought-provoking perspective that challenged my traditional notion of what it means to interact with something or someone. His assertion that true interactivity encompasses listening, thinking, and speaking as key components highlights the depth and complexity of human engagement. The analogy of a conversation between the two people Fredegund and Gomer effectively illustrates the dynamics of these elements, emphasizing the importance of active participation and mutual understanding when we are creating a meaningful interaction.

Before reading Crawford’s insights, my understanding of interactivity was rather simplistic, limited to the idea of reacting or engaging with external stimuli. However, his examination reveals that interactivity is far more intricate, existing along a spectrum with different degrees of engagement. Inspired by this perspective, I can also see a connection between human behavior and design, as he underscores the need for designers and creators to consider the diverse levels of interactivity in their work, recognizing that each level offers unique opportunities for communication.

However, I also find myself wondering the extent to which his framework fully captures the richness of interactive experiences. Are there additional dimensions or elements of interactivity that deserve consideration? Furthermore, while the example of conversation illuminates certain aspects of interactivity, it may overlook other forms of interaction that occur in non-verbal or non-linear contexts.

Assignment 3 – Spinning Symphony | Haziel

My inspiration for this assignment was basically the forms and shapes we usually find around us. Whether it be through the whirlwind or even a simple whirlpool we see in the sink when draining the water, I wanted to created something related to spirals. Moreover, spirals are also inspired by one of my favorite astronomical objects: spiral galaxies. The beautiful spiral arms of these galaxies, stretching outward in what it seems to be a delicate movement, caught completely my attention and evoke a sense of wonder. Drawing from these natural phenomena, I aimed to create an interactive artwork that celebrates the harmony of spirals.

Keep clicking on the screen to create your Spiral Galaxy 🙂

In this project, when the mouse button is pressed, a new spiral centered around the cursor position is drawn on the canvas. The spirals consist of a series of connected points, creating a spiral pattern as they move outward. Each spiral has a random color and speed, creating a dynamic and varied composition. The spirals continue to evolve and interact with each other as the user interacts with the canvas. To create this effect, I challenge myself in creating new patterns, supported by tutorial videos on how to create the spiral effect, like this one.

class Spiral {
  // Constructor function to initialize a new spiral object with specified parameters
  constructor(x, y, radius, color, speed) {
    // Initialize object properties based on input parameters
    this.x = x; // X-coordinate of the center of the spiral
    this.y = y; // Y-coordinate of the center of the spiral
    this.radius = radius; // Radius of the spiral
    this.color = color; // Color of the spiral (as an array [R, G, B])
    this.angle = 0; // Initial angle of the spiral
    this.speed = speed; // Speed of rotation for the spiral
  }

  // Display function to draw the spiral on the canvas
  display() {
    noStroke(); // Disable stroke (outline)
    fill(this.color); // Set fill color based on the color property
    let spiralSize = this.radius * this.angle; // Calculate the size of the spiral
    // Draw a small ellipse at a point on the spiral determined by the current angle
    ellipse(this.x + cos(this.angle) * spiralSize, this.y + sin(this.angle) * spiralSize, 5, 5);
  }

  // Move function to update the angle of the spiral, causing it to rotate
  move() {
    this.angle += this.speed; // Increment the angle by the rotation speed
  }
}

For future assignments, I would like to improve my understanding of object-oriented programming concepts and explore more advanced techniques for creating dynamic and interactive visual experiences. Additionally, I aim to delve deeper into the principles of design and incorporate more sophisticated visual elements into my projects, as well as sound and music to enhance the immersive experience of my projects.