Category: Fall 2022 – Mang

I’m really into a band called Arcade Fire. They have a lyric that goes: “My body is a cage that keeps me from dancing with the one I love, but my mind holds the key…” This is how I view Interactive Media. Humans have always felt stunted by the limitations of themselves and their realities. I hold the metaphor of the Garden of Eden very closely. Adam and Eve were forced out of their original home and they have been lost ever since, wandering back. I believe we all have the Garden of Eden in our hearts, and everything we do is an attempt at finding home, at freeing the Garden of Eden within us. Our bodies house souls that are profoundly larger than our bodies themselves. So we all struggle with the cognitive dissonance of having a body. We want our spirits to be free. Interactive Media artists do this by creating different experiences and worlds with the technology at their disposal.

That’s why I wholeheartedly agree with Tigoe’s assertion that Interactive Media artists should allow their audiences to interact with their installations freely, without being bounded by rules and guidelines. Or else you risk negating the entire point of the practice–to help people confront and explore their hidden internal realities. That’s why I also agree with the Tigoe’s comment: “I think physical computing should ideally foreground the person’s input.”

Take, for example, the “Fields of Grass” archetype Tigoe mentioned. I thought it was funny when Tigoe said, “Why would you want to make a field of grass that you run your hand over? Because the idea of responsive texture is magical, I guess.” And it is. I think again of the movie Avatar, where, when Jake Sully entered the new world, the first thing he did was touch the glowing trees and grass in awe. I also recalled The Gladiator, where Maximus let his hand flow through the silver grass of the Fields of Elysium. One of my favorite Rumi quotes goes, “There is a field between right and wrong. I’ll meet you there.” Fields are windy and otherworldly and beautiful. If I were to start on a project, out of everything Tigoe said, I would start with this one, because it’s through creating magical fields that I feel like I’m closer to the Garden of Eden. It boggles me that I could make something that allows me to actually stand in something close to what the Garden of Eden looks like in my head.

But that’s my world and my interpretation. It would all be ruined if the I instructed other people on how to walk through the grass, or what to think when they did. Because then I’m imposing my internal world on them rather than allowing them to explore their own.

I also really liked Tigoe’s comment: “The limitation of this is that the gesture of moving your hand over a sensor has little meaning by itself. The challenge here is to come up with a physical form and context for the sensors that afford a meaningful gesture.” With every form of art, there comes a necessary suspension of disbelief. So naturally, when we’re interacting with an installation that allows us to leave our reality behind, we want to interact with it the way we can in the real world. That way, we can truly forget about reality for the one that is in front of us, and really believe it. That’s an obstacle that continues to stump Interactive Media artists to this day.

But I really loved Tigoe’s “heart beats faster when your loved one’s cell phone is detected in a cell that’s closer to you” example as well. Once, a visiting author named Fransisco Goldman said the point of art is to leave you saying, “And isn’t life just like that.” And that’s what I thought reading about that particular example–”isn’t life just like that.” That’s good interactive art.

Emotion and design

The book delves into the intricate balance between usability and aesthetics in design, drawing from examples like three different teapots that serve various purposes. It resonates with me as it highlights the versatility of design preferences based on different situations and moods. The author’s  exploration of how emotions influence problem-solving and task performance is particularly intriguing, emphasizing the significance of considering both positive and negative emotions in design. It’s a reminder that a good design should strike a balance between usability and visual appeal. Understanding the impact of emotions on the user’s experience seems crucial, reinforcing the need for designs that accommodate various emotional contexts for a better overall user experience.

Her Code Got Humans on the Moon—And Invented Software Itself

 

in the 1960s, Margaret Hamilton broke barriers and redefined the course of technological history. Working in a male dominated field, her unexpected journey into the Apollo space program played a pivotal role in the moon landing. As a young mother and programmer, she altered her career trajectory, which resulted  into the creation of software that shaped human capabilities and space exploration. Hamilton’s leadership in software development became instrumental in the success of the Apollo mission, expanding the realm of software engineering and setting a foundation for future technological advancements. I strongly agree that her pioneering work revolutionized the role of software across various industries, leaving an enduring legacy that continues today through her company, Hamilton Technologies, at the forefront of technological innovation. Her influence not only propelled humanity’s reach beyond Earth but also reshaped the landscape of computer science and technology which by itself is a ground breaking achievement.

 

 

Concept:

For this assignment, I wanted to take the chance to get used to using Arduino, circuits, and everything we learned in class. At first, I was intimidated by the kit we had because I did not know what anything was or how it worked.

It was not easy to get an idea for this assignment mainly because I do not know yet the many things I can do with Arduino. For this assignment, I wanted to do something useful especially when it comes to kids.  As scissors can cause damage when kids touch them, I decided to create a switch that turns on when the scissors are opened or touched. It is a simple idea and the main concept behind it is to learn more about Arduino.

Highlight:

IMAssignment

I always start with research. I personally can start doing something if I am not sure if I fully understand its different components and how it really works.  As you can see in the file attached all the things I learned while doing this small project.

SwitchAssignment

I began by trying to put the project together and see if it would work. I initially used foil to put things together in a circuit. A problem was that I did not use the solderless board and it was not neat, but at least it worked. Then I decided to make it make more sense by using the solderless board and copper tape instead of foil. It was confusing at the beginning but once I understood it it made sense. The code is very simple too. It is a small conditional to indicate when the light will be on and when it will be off.

const int scissor = 3;   // Pin connected to the scissors
const int led = 2;       // Pin connected to the LED

void setup() {
  pinMode(scissor, INPUT);
  pinMode(led, OUTPUT);
}

void loop() {
  int scissorState = digitalRead(scissor);

  if (scissorState == HIGH) {
    digitalWrite(led, HIGH);  // Turn on the LED when scissor is opened
    delay(50);  
  } else {
    digitalWrite(led, LOW);   // Turn off the LED when scissor is closed
    delay(50);  
  }
}

 

Reflection and ideas for future work or improvements:

In these assignments, I learned a lot, and I broke the fear of using the kit we have. I know that the scissors are not the most creative thing so for future work I would try to make it a switch for a safe or a drawer where someone puts valuable things in.

 

One word “Finally”! This project was one of the worst ones I’ve worked on in a long time, I was met with error after error and pure confusion more than once.

But in the end and after millions of trial and error and hours in the lab this is my little baby and I couldn’t be happier and prouder of how it turned out:

Link to the full screen version (Zoom out to 60% or 75% for the best experience): https://editor.p5js.org/nourhane/full/vzSr13gm7

Whack-a-mole with a twist, I choose to focus a lot on the visuals of the game to make it reach the vision I had in mind but furthermore, I choose to add new features that the normal whack-a-mole didn’t have like bombs, and magic worms.

 Highlights:

The game begins at the main menu, inviting players to dive into the frenzied world of moles, bombs, and worms. Clicking on the screen transitions to an instruction page, which succinctly explains the game mechanics and objectives.

if (this.gameState === "mainMenu") {
    if (mouseY > height * 0.6) {
        this.gameState = "instructions";
    }
}

Moles sporadically appear from their designated holes, and the player must click on them to score points. However, there’s a twist! Occasionally, bombs disguised as moles pop up, and clicking them deducts lives. Additionally, friendly worms grace the screen, offering bonus points if clicked.

One of the features I’m particularly proud of is the random appearance logic of moles, bombs, and worms. It keeps players on their toes, ensuring every game session is unpredictable and challenging.

if (frameCount % 60 === 0 && game.gameState === "playing" && !game.paused) {
    let moleToShow = random(game.moles);
    moleToShow.visible = true;

    setTimeout(() => {
      if (!game.paused) {
        moleToShow.visible = false;
      }
    }, random(500, 1500));
  }

  if (frameCount % 80 === 0 && game.gameState === "playing" && !game.paused) {
    let showWorm = random() < 0.15; // 15% chance to show the worm
    if (showWorm) {
      game.worm.resetPosition();
      game.worm.visible = true;

      setTimeout(() => {
        if (!game.paused) {
          game.worm.visible = false;
        }
      }, random(500, 1500));
    }
  }
}

The game’s immersive experience is further enhanced with dynamic sound effects, creating an auditory feedback loop that’s satisfying and engaging.

Issues faced:

One of the main issues that took me hours to figure out was the score. It wasn’t increasing no matter how many times I clicked on the mole even though the mouse was telling me that it was clicked. I tired everything to fix it and used thousands and thousands of console.log statements to try and pin point the issue but nothing, looked on the internet, asked unix tutors, no one was able to figure it out, till it jumped to me “THE HAMMER, THAT’S THE ISSUE, IT’S NOT ALIGNED WITH THE MOUSE” at that moment I couldn’t feel happier but also dumber because it was such an easy fix yet i had to rake my mind and go crazy to find it.

Another main issue I had was with the sound, for some reason it kept giving me “undefined” and crashing my entire game and once again after hours of looking and console.loging, the issue was easy, I didn’t play the sound where it should. I was loading but not playing them in their respective spots (stupid right?)

Improvement:

In the end I’m so so so proud of it and couldn’t be happier with how it turned out. But no project or game is ever done, there always room for better and in this case they could be:

Game Dynamics: While the game offers a good mix of unpredictability with the random appearance of moles, bombs, and worms, adding more diverse game elements or increasing levels of difficulty could enhance the player’s experience. Introducing different types of moles with varying speeds, for instance, or adding power-ups and penalties, could make gameplay more dynamic and engaging.

User Interface and Graphics: The user interface, though functional, could benefit from a more refined design. Enhancing the graphics, smoothing out animations, and possibly introducing a thematic storyline could make the game more immersive. A more intuitive and interactive menu system could also be introduced, allowing players to adjust settings, view high scores, or access tutorials

Mobile Compatibility: Given the growing number of mobile gamers, optimizing the game for touch controls and ensuring it’s responsive to different screen sizes would be a significant improvement.

Conclusion:

However, considering my coding level and how far I got from the beginning and how much effort I put into it. Whack-a-mole Land is easily one of my favorite projects I worked on and I’m so proud of it and of myself as well.

I found the idea of using computer vision to judge how intensely a person is smiling to be very intriguing. There is an animated short film by the name of Shehr-e-Tabassum which imagines a dystopian future where anyone who doesn’t smile is considered to be outcast and is immediately captured by the government. I can only wonder how computer vision technology in the future will be used for deep public surveillance and for penalizing those who don’t comply.

I wonder if cameras are the only way we can implement computer vision. I think things like heat sensors and sonar technology also has a space in the computer vision landscape. I also wonder if computer vision will ever be as advanced as a human eye and by extension will AI ever be able to process as much information as humans can or will it always be limited by what computer vision can achieve and have to rely on other sensors for getting a complete picture of what is happening. There is also anti computer vision technology which will massively undercut the effectiveness of computer vision and security systems in general.

As usual finding an idea for assignment 4 was a challenge of its own and as I was scrolling through instagram I saw a video about the overthinking brain and there it was, my generative text artwork. The mind is an amazing thing but the overthinking mind is an epitome as it lies to its owner and paralyses him in negativity.  So through my artwork I wanted to create a simulation of that but have the positive thoughts “win” and create a sense of peace and victory in the end.

This is what I came up with in the end:

First, I started off with a simple black background and positive and negative words just floating around and the negative words disappear when colliding with the positive to symbolize that we should not let the negative thoughts our head lies to us with win.

Highlight of code:

The mechanism of the colliding and disappearing is honestly what I’m most proud of because it took a lot of researching and trial and error but in the end it came out exactly how I envisioned it.

Initially, each word is represented as an object, complete with its position, velocity, and type. Using the dist() function, a foundational function in p5.js, the code assesses the distance between two word objects. If this distance is less than a specified threshold, it infers that the two words are overlapping or colliding. Given the creative intent, the code dictates that if either of the two colliding words is negative, it should be removed from the display. However, directly manipulating (like removing items from) an array while iterating over it can lead to skipped iterations or index out-of-bound errors. To circumvent this, the code first logs the indices of words slated for removal in a separate removalIndices array. Only after all overlap checks are completed does the code loop through removalIndices to remove the identified words from the main displayedWords array. This ensures a safe, error-free removal process. Such collision-detection methodologies are commonplace in game development and interactive visualizations.  Daniel Shiffman’s tutorials on The Coding Train on YouTube were extremely helpful in figuring all of this out, especially object collision pt1, object collision pt2, and  his video about adding and removing from arrays

// Update and display each word
for (let i = displayedWords.length - 1; i >= 0; i--) {
    displayedWords[i].display();
    displayedWords[i].move();

    // Count negative words
    if (displayedWords[i].wordType === "negative") negativeWordCount++;

    // Check for overlapping words
    for (let j = i - 1; j >= 0; j--) {
        if (dist(displayedWords[i].position.x, displayedWords[i].position.y, displayedWords[j].position.x, displayedWords[j].position.y) < 30) {
            if (displayedWords[i].wordType === "negative" || displayedWords[j].wordType === "negative") {
                if (displayedWords[i].wordType === "negative" && !removalIndices.includes(i)) {
                    removalIndices.push(i);
                }
                if (displayedWords[j].wordType === "negative" && !removalIndices.includes(j)) {
                    removalIndices.push(j);
                }
            }
        }
    }
}

// Remove words based on indices stored in removalIndices list
for (let index of removalIndices) {
    displayedWords.splice(index, 1);
}

However, I didn’t like how simple and plain it looked so I started thinking of what other things I could add and started building the mind of my dreams. First, the background was to plain so I made it into a gradient of black and added particles that symbolizes the other thoughts and memories that are present in the mind and that alone made it look better and more lively like a real mind. Then I moved on to the words themselves and decided I wanted to make them look more distinctive so I went ahead and changed their color palette making the positive words lighter and cheerful and the negative more dark and gloomy. After that I remembered the goal I wanted to have which was a sense of peace and victory that comes with letting the positive thoughts win and decided to represent that with a beautiful sun that appears (symbolizing the radiance and happiness one feels when we don’t believe the lies our mind tells us) once all the negative thoughts are whooshed away and is surrounded by a peaceful find filled with nothing but positive words floating around.

Reflection:

The journey was both challenging and rewarding. The task started simply: display positive and negative words on a canvas. But as the requirements grew more complex – making words move, detecting overlaps, and having words disappear based on specific conditions – the code had to evolve. There’s a beauty in the simplicity of the final visualization: negative words being “overpowered” and disappearing when they encounter other words, and the eventual appearance of the sun symbolizing the triumph of positivity. However, behind that simplicity was a series of problem-solving steps, from collision detection to safely modifying arrays during iteration. In the end i’m so happy with the end result and what I was able to come up with in the end and of course the message it conveys.

Ideas for Future Work and Improvements:

1. Interactive Elements:
   • Allow users to add their own words to the positive and negative lists, personalizing the experience.
   • Let users click on words to manually remove them or promote them.
2. Animations and Transitions:
   • Instead of immediately removing negative words, they could fade out or shrink, making the disappearance smoother.
3. Sound Integration:
   • Add background music or sound effects, enhancing user engagement. For instance, a calming tune could play, with chimes or effects when words disappear or when the sun appears.
4. Narrative or Storytelling:
   • The visualization could be part of a larger narrative or game where users have to actively combat negativity.
5. Adaptive Challenges:
   • Introduce “boss words” that require more effort to remove.

Whenever someone asks me: “what projects do you do as an IM major?”, I reply by saying: “I mean.. a big part of the projects is about that interaction between humans and what we develop. We develop cool interactive stuff?” Now I don’t know how much this description is consistent, but I actually sensed this description in Crawford’s arguments about Interactivity.

Basically, the chapter emphasizes the importance of interactivity in modern technology and entertainment. Crawford argues that interactivity is not a mere add-on but a core element of design, making it distinct from other forms of media. He highlights the unique ability of interactive media to engage users actively and elicit responses.

An important concept Crawford introduces is the concept of the “reactive mind”. He explains that interactivity relies on users’ ability to perceive and respond to changes in the system. He also discusses the role of user actions and system responses in creating a dynamic interactive experience.

It might be because of my Physics background, but just like Crawford, I’m too technical and direct with my definitions, which is why I agree with the points he talked about. One may think he is biased because he didn’t think of the internal interaction that occurs inside your brain when you open a fridge, but please? It’s hardly convincing to say that a fridge is interactive unless it has interactive elements in it (does the fridge open with a tactile button? does it answer when you say I want milk?). Same for a book, a cupboard, a rug, a static artwork.. You do not interact with what I just listed and it’s okay, it does not change their value. They are just not interactive. I feel like there is a very thin line that can be easily blurred between Interactive and Immersive. The first one concerns the actual interaction and the effect it elicits in the user, and the second one only concerns the engaged reaction of the user to anything, which doesn’t require the object or the work to be interactive.

 

 

Reflection

After reading this article about computer vision methods and how they are used in interactive media, I am incredibly excited by the remarkable potential that this field holds. Beginning with the enormous difficulty of obtaining meaningful information from digital video, which by its very nature lacks semantic content, the article emphasizes the difficulty of so doing. Also, the article presents basic computer vision techniques that detect motion, presence, and other interactive features encoded in video streams. The techniques include frame differencing, background subtraction, and brightness thresholding. The explanation of these techniques fascinates me since it makes them seem unexpectedly approachable, especially to novice programmers. Without a doubt, this accessibility emphasizes how computer vision has democratized the fields of art and design.

The article also emphasizes the essentiality of matching physical parameters with vision algorithms to improve their dependability. It demonstrates how astute environmental planning can dramatically boost computer vision systems’ functionality. I am inspired by the accessibility of these technologies for artistic efforts as I learn about the numerous multimedia authoring tools and plugins accessible to designers and artists. The article concludes with an encouraging illustration of LimboTime, a straightforward yet entertaining interactive game that was developed by workshop participants in just one afternoon. Such an illustration depicts how computer vision may enable designers and artists to explore new realms of interactive art. The article demystifies the complexity of computer vision techniques and emphasizes their accessibility while revealing their revolutionary power. As such, it highlights their capacity to enable creators of all skill levels to create interactive experiences, enhancing the field of multimedia and beyond. As it turns out, I am in awe of the nexus of technology and creativity, where pixels become dynamic canvases, providing new horizons for creative expression.