Week 9 reading

Making Interactive Art: Set the stage then shut up and listen

I think the author makes a very important distinction between traditional art pieces and interactive art pieces by bringing up the importance of user interpretation within interactive pieces. When it comes to art, we would often want the viewers and users to have the same takeaways as we did when creating the project, however, the thing that sets interactive works apart is its ability to allow interpretation from people experiencing the piece instead of just being viewers of a story that is being told solely from the perspective of the artist. The essence of interactive works may be lost when we try to force 1 singular interpretation for it.

Physical Computing’s Greatest Hits (and misses)

The Article introduces many different hardware for physical computing which was very interesting to read about.  Each piece of hardware offered a different type of interaction between human and computers. For example, floor pads implemented buttons that you step on, much like arcade games like Dance Dance Revolution. The project Things to yell at is also very interesting to me. In general projects that is reactive and implements sounds are all fascinating to me, you hear things everyday, and its interesting to see how that is visualized.

 

Reading Reflection Week 9

Physical Computing’s Greatest Hits (and misses)

Reflecting on this writing, I am fascinated by how our interaction with technology can be both deeply personal and impersonal. Physical computing projects encourage people to touch, move and react but I question whether the create real human connections or if they are just interesting projects. Projects like the interactive gloves and theremins are playful and creative but does interacting with them leave a lasting experience? Are they just things for quick entertainment or is there something deeper? I was particularly interested by the “remote hugs” which made me think about how technology connects us emotionally even when we are far apart. Despite the effort to create warmth and closeness I still think that it still has a distance and I am not sure if a machine can really replace the feel of a real human connection. This made me wonder if we as humans are losing appreciation for physical presence when depending more on technology.
This reading made me think differently about what technology should achieve. Having always thought technology to be a way of getting things done efficiently, I have got to learn of it as a tool for emotional experiences also. Maybe, if we stopped focusing on the practical uses only we would get to appreciate the side that brings joy.

Making Interactive Art: Set the Stage, Then Shut Up and Listen

I found the authors advice to “step-back” to be very thought-provoking. The concept of creating something and releasing it without controlling how people experience it is something which I find to be difficult but I guess in the field of interactive art it makes sense. It made me realise that for art to be art it needs to not deliver a clear and defined message but leave space for audience to have their own interpretation.
To me, I perceived that good art should have a purpose and bear a specific idea but this writing opened my eyes. Maybe art is a means of conversation where the artist is more of a facilitator rather than a director. This makes me wonder if over-explaining art pieces limit artists work since this stops the art from becoming fully alive in other peoples minds. I have come to understand that letting the audience interpret the art freely means that each person gets their own unique experience which might not even be what the artist intended. This writing has made me see interactive art as more about curiosity and less about control

 

Assignment 6: Overspending Warning

Concept:

For this assignment, we were asked to control one LED in an analog manner and another in a digital manner. I chose to use a button switch to control one LED and a potentiometer for the other. For the digital component, I attached a button switch to my wallet’s card-ejection button so that whenever I try to access my credit card, a red LED lights up as a gentle warning to consider my spending. For the analog component, I connected a potentiometer to a blinking LED, allowing the speed of the LED’s blinking to be adjusted by turning the potentiometer. This setup demonstrates both analog and digital LED control in a creative, practical application.

Highlight:

A key highlight of this project is my approach to keeping the analog and digital circuits distinct from each other. By treating them as separate circuits, I chose to use the Arduino’s 5V and 3.3V power outputs individually powering the digital circuit with 5V and the analog circuit with 3.3V. Additionally, I set up each circuit on separate breadboards, which makes it easy to distinguish between the two and ensures a clear, organized layout. This setup not only reinforces the conceptual differences between analog and digital control but also simplifies troubleshooting and testing.

Hand-Drawn Schematic

For the coding aspect of this project, I organized the code by designating separate blocks for the analog and digital controls, clearly separated by comments. This structure makes the code easier to navigate and understand, as each section is dedicated to controlling one LED independently.

In the blinking LED project, I utilized the map function, as we covered in class, to control the blinking speed with the potentiometer. By mapping the potentiometer’s analog input range (0–1023) to a delay range (e.g., 50–1000 milliseconds), I was able to adjust the blink rate based on the potentiometer’s position.

int led = 11;

void setup() {
 Serial.begin(9600);

 pinMode(led, OUTPUT);
 pinMode(13, OUTPUT);
 pinMode(A2, INPUT);

}

void loop() {
//controlling led with a potentiometer
    int sensorValue = analogRead(A1);
    Serial.println(sensorValue);

    // Map the potentiometer value (0–1023) to a delay time (e.g., 50–1000 ms)
    int blinkDelay = map(sensorValue, 0, 1023, 50, 1000);

    // Blink the LED at a speed controlled by the potentiometer
    digitalWrite(led, HIGH); 
    delay(blinkDelay);        
    digitalWrite(led, LOW);    
    delay(blinkDelay);         

//Controlling Led with a Button
int buttonState = digitalRead(A2);
if (buttonState == LOW) {
digitalWrite(13, LOW);
} else {
digitalWrite(13, HIGH);
}

}

Demonstration:

Digital Circuit

Analog Circuit

Complete Setup

READING #WEEK 9

“Making Interactive Art: Set the Stage, Then Shut Up and Listen” by Tom Igoe was an interesting look at interactive art. It seemed like Igoe’s advice to not over-explain our work and let viewers make up their own minds about it was trying to say that art can be more than just a one-way statement. For instance, by letting people interact without being told what to do, we’re having them finish the piece through their own experiences.

This made me think of Yayoi Kusama’s “The Obliteration Room.” Igoe said that art is like directing players; the artist sets the scene but doesn’t control every action. Kusama makes a room that is all white and tells people to cover it with colorful dot stickers in any way they want. She doesn’t tell them where or how to put the dots; the audience is the only one who can change the room. It turns into a lively group work over time, with each person’s choices shaping it. I felt that this example was like Igoe’s concept of stepping back and letting go, allowing people to experience art in their own way.

This concept of letting go and allowing for freedom in interpretation also ties into Igoe’s approach in “Physical Computing’s Greatest Hits (and Misses)”. Here, he similarly emphasizes the value of exploring foundational themes and encourages creativity without fear of being unoriginal. Rather than chasing entirely new ideas, he urges creators to build upon recurring themes in physical computing, adding their own twist.

What I liked about this example was the “theremin like instruments.” It says that even though making a simple theremin is fun, it doesn’t always allow for useful interaction. This example showed me that even though the projects are easy, they can still push the people who make them to think beyond the basics and look for ways to give the interaction more meaning. Whether in art or software, I think both readings support the idea that effective interactive work emerges when the author takes a backseat, encourages individual interaction, and has faith in the audience to realize their interpretations.

Assignment 5: Unusual Switch

Concept:

The inspiration for this project came from a common issue in my home: my siblings often leave kitchen drawers and cabinet doors open after grabbing snacks. This habit leads to my cat sneaking into these spaces, where she can hide for hours. To solve this, I came up with the idea of creating a simple sensor-based system that alerts my siblings when they forget to close a drawer or cabinet. By using a light sensor, this system can detect when a drawer or door is left open and activate a notification, such as an LED, to remind them to close it. This project combines basic electronics with a practical problem-solving approach to keep both the kitchen organized and my cat safe.

Highlight:

The highlight of this project was developing a functional switch system that alerts users when a drawer is left open. I began by connecting a light sensor to a 10k resistor in a voltage divider circuit, which allowed me to monitor light changes accurately. I added a red LED and a green LED, each with its own 330-ohm resistor, connected to digital pins 10 and 11.

void setup() {
  // initialize serial communication at 9600 bits per second:
  Serial.begin(9600);
  
  // Set pin modes for LEDs
  pinMode(10, OUTPUT); // Red LED
  pinMode(11, OUTPUT); // Green LED
}

// the loop routine runs over and over again forever:
void loop() {
  // read the input on analog pin A2:
  int sensorValue = analogRead(A2);
  
  // print out the value you read:
  Serial.println(sensorValue);
  delay(1);  // delay in between reads for stability

  if (sensorValue > 600) {
    // Turn on red LED and turn off green LED
    digitalWrite(10, HIGH);
    digitalWrite(11, LOW);
  } else {
    // Turn on green LED and turn off red LED
    digitalWrite(10, LOW);
    digitalWrite(11, HIGH);
  }
}

Then, using code adapted from Week 9 lecture slides, I programmed the LEDs to respond to light levels: the red LED illuminates when the sensor detects that a drawer is open, and the green LED lights up when the drawer is closed. Finally, I mounted the light sensor inside the drawer and tested the setup. As designed, the red LED serves as an alert when the drawer is open, while the green LED confirms it is securely closed. This project successfully provided a practical solution to alerting users to close drawers, helping prevent pets from accessing open spaces.

Setup

Demonstration:

 

 

Reading Reflection 5

The utilitarian Design vs Aesthetics:

Norman,“Emotion & Design: Attractive things work better”
Her Code Got Humans on the Moon

In reflecting on Don Norman’s “Emotion & Design: Attractive Things Work Better” and the article “Her Code Got Humans on the Moon”, I’ve gained a deeper appreciation for the role of user-centered design, particularly in high-stakes environments. Norman’s insights on emotional engagement in design highlight how well-designed, intuitive products improve user experience, functionality, and even safety. This principle aligns with Margaret Hamilton’s story in the article, where her recommendation to include a warning note in the Apollo software was initially dismissed but could have prevented a critical error that later occurred.

Both Norman and Hamilton emphasize that design must go beyond the technical requirements and account for human unpredictability. In high-stress situations—such as a lunar landing or, more broadly, any critical application—users may act differently than designers anticipate. Hamilton’s experience reflects Norman’s point about designing not only for ideal circumstances but also for scenarios where things go wrong. This reinforces the importance of creating safeguards in design to prevent errors, support users under pressure, and mitigate risks, demonstrating that effective design is as much about empathy and foresight as it is about functionality.

In reflecting on how design impacts safety and usability, an example that comes to mind is the design of fire extinguishers. While essential in emergencies, many fire extinguishers are not immediately intuitive to use, especially in high-stress situations. The sequence—pull the pin, aim the nozzle, squeeze the handle, and sweep—may seem simple, but in a crisis, it can be easy to forget steps or become disoriented, particularly for those who haven’t received training.

UNUSUAL SWITCH

CONCEPT:

For my switch, I wanted it to reflect something meaningful from my culture, drawing inspiration from the way men greet each other with a traditional nose-to-nose gesture. This greeting, known as “Al Khushm,” symbolizes respect and warmth, and it felt like the perfect starting point for a unique switch design. I wanted the setup to embody this gesture functionally, so I used two pieces of aluminum foil, each attached to a wire to act as a touch-sensitive switch.

I positioned the foils so that, with a light press—just like the gentle touch in a nose-to-nose greeting—they connect and complete the circuit, turning on the light. I chose aluminum foil for this setup because it’s simple and a good conductor, making it easy to work with for a touch-sensitive design. This material and setup felt like the best way to capture the essence of a traditional greeting functionally. This design doesn’t just represent the gesture; it brings it to life in a modern form which is why i want to create this.

HIGHLIGHT:

The part I’m most proud of is the touch mechanism that simulates the cultural greeting. By setting up the switch with two pieces of aluminum foil and wiring them so that contact turns on the LED, I’ve managed to capture the concept of a traditional greeting in a unique, interactive way.

  // Read the current state of the switchPin
  // LOW means the metal plates are in contact (touch detected)
  int switchState = digitalRead(switchPin);  
  
  // Output the switch state to the Serial Monitor for troubleshooting
  // Prints '0' when plates touch and '1' when they are apart
  Serial.println(switchState);  
  
  // Check if the switch state is LOW (indicating touch/contact)
  if (switchState == LOW) {     
    digitalWrite(ledPin, HIGH); // Turn on the LED when plates touch
  } else {
    digitalWrite(ledPin, LOW);  // Turn off the LED when plates are apart
  }
}

REFLECTION:

One challenge I faced with this setup was keeping the aluminum foil pieces stable. They kept slipping out of place, which made the switch less reliable and the circuit would often disconnect unintentionally. For future improvements, I’d like to find a better way to secure the foil pieces and wires, perhaps by using a more solid base or even switching to conductive tape that can stay in place more effectively. Additionally, adding a way to adjust the pressure sensitivity would make the interaction feel more realistic and closer to the gentle touch of a greeting. These adjustments would help make the switch more durable and improve its functionality, keeping the cultural gesture intact in a smoother way.

UNUSUAL SWITCH:

(i couldn’t find men to do this)

https://github.com/aaa10159/intro-to-IM/blob/3c5cdd3fb62cd513e27758de7d7c168917ccd288/sketch_oct28b.ino

Reading Reflection – Week 8

These readings about Don Norman’s design insights and Margaret Hamilton’s crucial contribution to Apollo’s software development have two different but related effects on me. Resilience and creative thinking are crucial for overcoming both technological and cultural obstacles, as demonstrated by Hamilton’s voyage through the unexplored field of software engineering. Hamilton was not simply coding when she took on programming problems that would have jeopardized the mission; she was also breaking new ground under extreme pressure, proving that effective software design necessitates flexibility and foresight. Her story of having to model every system before takeoff emphasizes how crucial thorough testing is, particularly in high-stakes scenarios. This strengthens my conviction that strong design principles and a proactive approach to mistake handling are essential in any technical endeavor.

The way that Norman explores emotive design, especially his assertion that “attractive things work better,” offers an alternative viewpoint. His focus on how aesthetics affect usability shows that well-designed products enhance the user experience by adding emotional appeal in addition to functionality. The success of design frequently rests in its adaptability and alignment with user context, as demonstrated by his collection of teapots, each of which has a distinct function depending on the occasion and mood. His defense of balanced design principles—where functionality, aesthetics, and usability all coexist peacefully—particularly strikes me as thought-provoking. I find myself wondering how I can apply this balance to my own work so that beauty doesn’t come at the expense of functionality or vice versa.

The combination of Norman’s holistic design approach and Hamilton’s technological rigor serves as a reminder to me that when developing any interactive system, we should give equal weight to emotional resonance and functionality. I want to apply this combined emphasis on accuracy and user empathy to my own work, not just in this course, but in general.

MIDTERM

CONCEPT:
For my midterm project, I decided to combine my two favorite things together, SpongeBob and my childhood game Geometry Dash (which was my first inspiration for the game).
I decided to be more creative and create my own version of geometry dash using Spongebob as my main theme. Furthermore, instead of jumping over obstacles, you have to jump over SpongeBob characters.
The main goal of the game is to score as many points as possible by avoiding colliding with an obstacle; it’s pretty simple. I also added a twist to it; there’s a feature where you can fuel up the power bar by gaining more points, which leads to a rocket mode effect where you can collect double points but instead of jumping, you’re flying. For the characters, I decided just to use png images online, which I will attach to the website at the bottom; however, to incorporate shapes and colour, I decided to use shapes and gradients to create the theme of the background, including the burgers and jellyfish. I also used a Spongebob font for the text to add more to the aesthetic. To organize my codes, because at some point it got messy, I decided to create multiple files, for functions and classes, which made it a lot easier as I knew where everything was and it was most helpful in debugging anything if there was an error.

HIGHLIGHT:
The code I’m most proud of is probably the jellyfish part of the game because it handles more than one thing like spawning, moving, and removing jellyfish, while also checking for player collisions. It also has conditional behavior since the jellyfish can only cause the game to end when the player is in rocket mode. I had to redo the code multiple times as there were a lot of errors in the beginning and I had to update multiple loops. Additionally, it depends on variables like `isRocketMode` and `gameOver` from other parts of the game, which makes it more complicated to manage since it must stay in sync with the overall game.
here is the code:

function updateJellyfishObstacles() {
  // Spawn new jellyfish obstacles at intervals
  if (frameCount % jellyfishInterval === 0 && jellyfishObstacles.length < maxJellyfish) {
    let jellyfishY = random(70, height - 80);
    let jellyfish = new Jellyfish();
    jellyfish.y = jellyfishY;
    jellyfishObstacles.push(jellyfish);
  }
   // Update jellyfish obstacles and handle rocket mode collisions
  for (let i = jellyfishObstacles.length - 1; i >= 0; i--) {
    jellyfishObstacles[i].move();
    jellyfishObstacles[i].show();
    
    // Remove off-screen jellyfish
    if (jellyfishObstacles[i].offScreen()) {
      jellyfishObstacles.splice(i, 1);
      continue; // Move to the next jellyfish
    }
    
    // Only trigger game over if the player hits a jellyfish while in rocket mode
    if (jellyfishObstacles[i].hits(player)) {
      if (isRocketMode) {
        deathSound.play();
        gameOver = true;
      }
      
    }
  }
}

 

IMPROVEMENTS:
In the future, I would probably like to add more elements to the game as it gets repetitive. Also, if I had more time I would fix this upside-down section of the game, as I feel like it looks odd in some sort of way, since the obstacles are upside down but not the player. Moreover, I would also improve the way the obstacles are shown in the game, as I fear they aren’t visually clear or hurt the eyes when you look at it too long, and it is because its moving fast, however, if its too slow, the game would be easier.

Here is the game:

 

REFRENCES:
https://www.jsdelivr.com/package/gh/bmoren/p5.collide2D. (my collide reaction HTML)
https://www.fontspace.com/category/spongebob (font)
https://www.pngegg.com/en/search?q=spongebob (all my images)

MIDTERM

CONCEPT:

The idea for my project initially came from my nostalgia for Fruit Ninja.

Fruit Ninja Classic - Halfbrick

This was a game I enjoyed during my childhood, and I wanted to capture that excitement in my own way. I began by recreating the core mechanics: objects falling from above, mimicking the action of fruits being thrown up in Fruit Ninja. The player interacts by catching these items, with some scoring points and others, like the scorpions, leading to an instant loss. It took me a while to fine-tune these functions and get the timing, speed, and interactions to feel as responsive and engaging as the original game. At first, I struggled with the mechanics, as I wanted the motion and flow to feel natural and intuitive, just like in Fruit Ninja.

After a lot of trial and error, I was able to get the objects falling at varying speeds and from random positions, which gave the game a sense of unpredictability and challenge. I also added a cutting effect, just like in the game. This process helped me understand the importance of small details in game development, such as timing and object positioning. I also experimented with different speeds and sizes to make the game challenging yet enjoyable. The initial version was simple, but it felt exciting to see it come to life and mirror the familiar feeling of Fruit Ninja while incorporating my own twist. Here’s how it came out:

However, as I progressed, I realized that directly copying Fruit Ninja wouldn’t fully reflect my own creativity or bring anything new to the experience. This led me to reflect on my childhood memories. I recalled family trips to the desert in the UAE, where we would snack on dates and sweets under the open sky. I remembered the joy and the relaxed environment, but also my fear of scorpions, which were common in the desert. It struck me that this blend of joy and tension could provide a compelling twist to the game. I decided to adapt Fruit Ninja’s concept to incorporate elements of these desert trips. Instead of slicing fruits, the player would catch falling dates and sweets in a basket to score points, which was the cultural twist I wanted to add. Dates and traditional sweets, which are common in Emirati gatherings, served as the main items to catch, reflecting my childhood memories of trips to the desert with family. However, there was also a twist that added suspense to the game: scorpions. Just as scorpions are a real concern in the desert, they posed a threat in the game. If the player accidentally catches a scorpion, the game instantly ends, mirroring the risk and danger associated with encountering one in real life. To add more depth, I included power-ups like coins for extra points and clocks to extend the timer. These power-ups fall less frequently, requiring the player to remain alert and responsive. This combination of culturally inspired items, the risk of game-ending threats, and occasional rewards created a gameplay experience that balances fun and challenge. The game’s aesthetic, from the falling items to the traditional Arabic music, all contribute to the cultural theme. Overall, the game became not just a nostalgic tribute to Fruit Ninja but also a playful representation of a personal childhood experience infused with elements of Emirati culture.

HERES MY GAME:
LINK TO FULL SCREEN: https://editor.p5js.org/aaa10159/full/rZVaP6MKc

HIGHLIGHT OF MY CODE:

The gameplay mechanics involve the basket interacting dynamically with various falling items, including sweets, dates, scorpions, and power-ups. Each of these elements serves a unique purpose in the game. For example, catching sweets and dates earns points, catching a scorpion ends the game, and catching power-ups like coins or a clock offers bonuses that enhance the gameplay experience. Integrating these interactions smoothly required attention to detail and precision in coding, as I needed to ensure that each item type was recognized and handled correctly by the basket.

To handle collisions between the basket and the falling items, I implemented a collision detection method within the basket class. This method calculates the distance between the basket and each item, determining if they are close enough to be considered “caught.” If they are, the game then applies the appropriate action based on the type of item. This collision detection is crucial for the game’s functionality, as it allows the basket to interact with different items dynamically.

// Define the Basket class, which represents the player's basket in the game.
class Basket {
  // Constructor initializes the basket with an image and sets its position, size, and speed.
  constructor(img) {
    this.img = img;           // The image used to represent the basket.
    this.x = width / 2;       // Horizontal position, initially centered on the screen.
    this.y = height - 50;     // Vertical position, near the bottom of the screen.
    this.size = 150;          // Size of the basket, controls the width and height of the image.
    this.speed = 15;          // Movement speed of the basket, determining how fast it can move left or right.
  }

  // Method to control the movement of the basket using the left and right arrow keys.
  move() {
    // Move left if the left arrow;is pressed and the basket is within screen bounds.
    if (keyIsDown(LEFT_ARROW) && this.x > this.size / 2) {
      this.x -= this.speed;   // Update the x position by subtracting the speed.
    }
    // Move right if the right arrow is pressed and the basket is within screen bounds.
    if (keyIsDown(RIGHT_ARROW) && this.x < width - this.size / 2) {
      this.x += this.speed;   // Update the x position by adding the speed.
    }
  }

  // Method to display the basket on the screen.
  display() {
    // Draw the basket image at its current position with the specified size.
    image(this.img, this.x, this.y, this.size, this.size);
  }

  // Method to check if the basket catches an item (e.g., a date or power-up).
  catches(item) {
    // Calculate the distance between the basket's center and the item's center.
    let distance = dist(this.x, this.y, item.x, item.y);

    // Check if the distance is less than the sum of their radii.
    // If true, this means the basket has caught the item.
    return distance < this.size / 2 + item.size / 2;
  }
}

In this code, the ‘catches()’ function plays a central role. It calculates the distance between the basket and the center of each item. If this distance is smaller than the sum of their radii (half their sizes), it means the item is “caught” by the basket. This collision detection method is efficient and works well for circular objects, which is perfect for the various falling items in the game.

By using this approach, I was able to ensure that the basket can accurately catch power-ups, dates, and sweets, and also end the game when a scorpion is caught. It’s a simple yet effective way to handle interactions between the player and game objects, which is essential for my game. This method also ensures that players can control the basket smoothly, making it feel natural as they try to avoid scorpions and collect items to score points.

FUTURE IMPROVMENT:

One of the specific challenges I encountered was perfecting the basket’s interaction with falling items, particularly when it came to maintaining accuracy in collision detection. Initially, I found that the items would sometimes pass through the basket without registering a catch, which was frustrating. To resolve this, I adjusted the bounding boxes for each object and tuned the distance calculations in the ‘catches’ function. However, this process revealed another area for improvement: the scorpion’s animation. Currently, the scorpion is static, but animating it would add a dynamic and slightly intimidating effect, enhancing the player’s experience.

Another improvement I’d like to make involves expanding the game by introducing different game modes. Currently, the game focuses on catching dates and sweets while avoiding scorpions, but I envision adding modes with unique objectives and challenges. For instance, one mode could intensify the difficulty by increasing the speed of falling items, while another could introduce new types of falling objects that require different strategies to catch or avoid.

Additionally, I would like to explore a survival mode where players have to last as long as possible, with gradually increasing difficulty as more scorpions and fewer power ups appear over time. By adding these game modes, It would offer players more choices and variety, encouraging them to keep playing and exploring new strategies within the game. This would not only add depth to the gameplay but also align with my goal of making the game more engaging and enjoyable for a broader audience.