Author: Ayesha Anwar

This week’s reading is eerily interesting. Learning about how we can now interact with our computers with our entire body seems uncanny, if not revolutionary. Reading about Myron Krueger’s work, Videoplace, which he developed between 1969 and 1975, stands out as an early example where participants’ silhouettes were digitized and used for interactive graphics, showing the potential of whole-body interactions with computers. This overcomes the common use of mouse and keyboards. It reminds me of the Apple Vision Pro and how we can interact with the digital space by just moving our hands around, and how physically turning can show a 360 view of our space.

The article also introduces Messa di Voce, a collaborative project incorporating whole-body vision-based interactions, speech analysis, and augmented reality to create a unique audiovisual performance. This shows the evolution of computer vision in the arts, combining different sensory inputs for creative expression.

David Rokeby’s Sorting Daemon and the Suicide Box by the Bureau of Inverse Technology delve into a rather darker side of computer vision, shedding light on issues of surveillance and profiling. Rokeby’s installation creates diagnostic portraits of social environments, reflecting concerns about automatic systems in the context of the “war on terrorism.” On the other hand, Suicide Box, which is near the Golden Gate Bridge, captures live data on suicides, giving birth to controversy of using technology in social and public settings.

In this reading, Norman discusses the psychological aspects of design, especially focusing on how users often blame themselves for difficulties with poorly designed objects rather than recognizing the design flaws. He introduces the term “psychopathology” to describe the mental stress and frustration caused by poorly designed objects.

During one of the lectures in a core I took last semester, “Re-Design” with professor Goffredo Puccetti, we learnt about one of the Universal Principles of Design, which is “Accommodation”, which is basically when you design an object that can be used by most of the population. Like certain designs don’t seem to be a hindrance in most cases, like stairs.

Let’s take a beautiful beach as an example. A scenic view right here on Saadiyat Island. But what’s that? Not everyone can enjoy it? Because of the stairs?

According to WHO, an estimated 1.3 billion people experience significant disability. That’s a whopping 16% of the population, coming to 1 in 6 of us. And despite there being a significant number of people who can’t access stairs, there still seems to be designers who don’t accommodate such people. Consequently, these people end up not going to places due to their disabilities and blame themselves.

All in all, what I got from the first chapter is that it explores the principles of good design and the impact it can have on people’s daily lives.

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.

Chris Crawford’s “The Art of Interactive Design” was such a mind-engaging reading for me. While exploring the text, I noticed a specific emphasis on how a work or piece of art is interactive. It’s not a simple yes or no anymore, it’s about the intensity of interactiveness. Whether a text engages you mentally or physically. Crawford’s insights into user interface design and player psychology have broadened my understanding of the complexities involved in creating interactive experiences. The text made me start recalling all the previous conversations I’ve ever had, and what I could have done to be more interesting in replying or holding a talk. It has prompted me to reconsider the role of storytelling in ways that are beyond normal talking or hand gestures.

I also think Crawford’s extensive experience in the video game industry justifies his perspectives. Studying the mind of a player, I see that it aligns with how users interact with digital interfaces in today’s cutting-edge technology. However, while the text is informative, I feel as though there might be a lack of some principles being discussed in the interactive design contexts. Moreover, Crawford’s specialization in the video game industry enriches the text with practical examples and specific insights, and it may also introduce a bias towards gaming viewpoints. I am left questioning whether the principles outlined are universally applicable or if adaptations are necessary for different interactive design contexts.

To think that art is just a collection and aesthetic grouping of random objects, and that we find beauty in it is baffling to me. I never thought about it that way. Listening to Casey’s talk and observing the pictures shown, I noticed that it was mostly just randomness concocting a beautifully crafted piece.

Casey Reas, in his Eyeo Festival talk, explores the fusion of algorithms and randomness in digital art, challenging traditional notions of control in the creative process. Linking information from the past, Reas connects chance operations in art, highlighting the balance between intentional ideas and serendipity. This mixture unlocks new creative avenues, encouraging artists to embrace unpredictability for unique and enriched artistic expression.

I think that’s what artworks are mostly about these days. Which could be somewhat tiring to see, as I miss the stories that are conveyed through work such as “The Starry Night”. I guess the concept of chaos can be applied to more than just visually pleasing art, such as music. Specifically Jazz or any instruments that are played really. I wonder what inspired people to create such devices that make sounds that just come together so harmoniously.

My inspiration for this assignment came from when I went camping in the desert last semester with my peers. There we were, sitting under the night sky, gazing at the stars and getting lost in the moment. We were talking about how the “small” stars we see are actually ginormous balls of fire flying around in space. We think it’s small because of how far they are. And then I started to ponder, how anyone seeing our world would think the same thing. An insignificant flying rock in mid-space. At that moment, I felt so small. My actions seemed inconsequential.

The power of gravity from the Sun held our Solar System together for so long and will do so for many more millennia. And what I do now or in the next 10 years can’t possibly change the trajectory of Earth. And I guess that’s why I wanted to create our Solar System as the project. And intentionally made it not-interactive to depict that we have no control over this captivating phenomenon.

A particular code I’m fairly proud of is creating randomized stars to depict constellations and making the planets with their respective colours, and distances and setting the rotation of the planets around the sun.

// making the planets rotate around the sun
function drawPlanet(name, distance, size, speed, planetColorR, planetColorG, planetColorB) {
  let angle = frameCount * speed;
  let x = width / 2 + distance * cos(angle);
  let y = height / 2 + distance * sin(angle);

  // giving the planets their color
  fill(planetColorR, planetColorG, planetColorB);
  ellipse(x, y, size, size);
}

class Star {
  constructor() {
    this.x = random(width);
    this.y = random(height);
    this.timer = random(0, 4);
  }

  show() {
    fill(255, 255, 255, (0.5 * (Math.sin(this.timer)) + 0.5) * 255);
    ellipse(this.x, this.y, 3, 3);
    this.timer += deltaTime / 1000;
  }
}

I believe I can do better to make the stars appear and disappear a bit slower to make them look like they’re exploding to dust to make them look more realistic. Additionally, I would like to try adding a part where the stars disappear and appear in different positions. Moreover, I would like to add an interactive element which is when I click on a part of the sketch, the stars burst or suddenly appear.

I have always been a happy and smiley person. Perhaps more now that I’m doing something I thoroughly enjoy: coding. How do I put this simply? It makes me happy to be happy.  And funnily enough, I get the most compliments when I radiate joy and have a toothy smile on. And my top priority? Make sure my happiness is contagious.

Hence, I chose to make this funny, interactive self-portrait in which I am seen to be miserable but seen to be smiling when my body is clicked on. The idea is that the person is tickling me by clicking on my body, which makes me laugh.

My sketch is fairly simple, but I profusely enjoyed making it! The concept behind had me excited because I can incorporate my personality into my work, which isn’t relatively easy while coding. A particular code I’m proud to share is where I was able to limit the click of the mouse to only a certain place on the sketch. One can’t just click anywhere and make me smile, you have to tickle me at the right spot to make me laugh.

let currentView; //defining a variable, which is going to decide what is going to be displayed

function setup() {
  createCanvas(570, 400); //making a landscape scene
  currentView = noLaugh(); //the initial view is set to my resting face, variable is defined to a value
}

function mousePressed() //when the mouse is clicked
{
  if (mouseX > 212 && mouseX < 350 && mouseY > 285 && mouseY < 400) //setting limits to where you can click to make the view change
  {
    currentView = meLaugh(); //initial view changes because the variable is defined to another value
  }
}

function mouseReleased() //when the mouse is released
{
  currentView = noLaugh(); //view changes to initial setting
}

Above is the work that went into defining variables, setting limits on mouse-clicking-places, and lastly the changes that occur. As much as I tried to be as efficient as possible in my codes, I still missed out on important details. There are places on the body which when clicked, don’t cause a change. That is because I couldn’t accurately put in the coordinates of the body. I hope to improve this aspect of my work and make my sketch more interactive in the future. Moreover, I believe I can work more on the rotation and angling of my shapes, and get more familiar with the calculations with radians and degrees.