Reading Reflections- Week 10 (2 Readings)

Physical Computing’s Greatest Hits (and misses)

As I read about the common themes in physical computing, I was amazed by the variety of projects possible in this field. Each idea seemed to offer its own unique possibilities for creativity and learning.

One theme that particularly caught my attention was the concept of theremin-like instruments. As a musician myself, the idea of creating music through physical gestures rather than traditional methods intrigued me, especially considering the simplicity of the setup. However, I couldn’t help but wonder about the potential for incorporating more complex gestures or interactions to enhance the musical experience further. Another interesting theme was using video mirrors to reflect movements. While this sounded cool, I wondered if there were ways to make these projects more engaging beyond just reflecting movements. I was also intrigued by the idea of mechanical pixels, where small parts move to create artwork. It sounded challenging but exciting. I wondered how artists could use this technique to tell stories or convey emotions.

Overall, I was struck by the balance between simple and complex projects in physical computing. Some ideas were easy to understand, while others seemed more intricate. I’m excited to explore these concepts further and see what new ideas I can come up with!

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

Reading this article about making interactive art really changed how I see my role as an artist. Instead of just expressing myself, I now understand that my art can be a conversation with the people who experience it. I learned that I should set the stage for interaction without telling people what to think or do. It’s like creating a performance where the audience completes the work through their actions.

I realized that I tend to explain my art too much, which can limit how people engage with it. Now, I want to give the audience space to form their own interpretations. I’m curious about how I can use performance and interactivity to make my art more engaging. I think it’s important to listen to the audience’s reactions and learn from them to improve my future projects.

This article inspired me to take a more collaborative approach to my art. I want to create pieces that encourage people to participate and explore, while still conveying my message. I’m excited to experiment with new ideas and see how they resonate with viewers.

Week 9 – Unusual Switch

Concept

For this assignment, the task is to create an creative switch that doesn’t require manual activation or coding. Drawing from a personal challenge of frequently and leaving the essential cards like the room and NYUAD access cards in my dorm room, the aim is to design a solution that addresses this issue. The proposed idea is to create a switch that lights up when the wallet is kept in the room and dims when it’s taken out.

Process

So for this project the materials and components used were red LED light, 330 ohm Resistor, 4 Wires, Aluminum foil, tape, Breadboard, and Arduino board. The breadboard circuit connection is shown below:

Video Demonstration

Future Improvements

Sound Effects: I would like to add music or sound effects for a more engaging experience. For example, a pleasant tune could play when the wallet is detected, enhancing user interaction.

Aesthetic Enhancements: I would like to add visual appeal with colorful LEDs or creative casing designs. This will make the device more attractive and blend better with the room decor.

Blinking Lights: I would also like to modify the lights to blink continuously instead of remaining constantly on, which would need some coding integrations.

 

Reading Reflections- Week 8a (2 Readings)

Emotions & Attractive by Donald A.Norman

Reading about the author’s teapot collection and the talk about design was really thought provoking. I never realized how much design can affect how we feel about things. For example, the different teapots the author has are all for different reasons – some are pretty, some are just practical. It made me think about the things I have in my home. Do I choose the things because they look nice, or because they work well?

The part about how color screens were introduced in computers got me thinking about the things that I have with me. Do I like them more because they look cool, even if they don’t work perfectly? And then, there’s the talk about emotions and how they affect our choices. It made me think about the times when I bought something just because it made me happy and gave satisfaction, even if it wasn’t really practical.

Overall, this text made me realize that design is more than just how something looks. It’s about how it makes us feel and how well it works. It made me want to pay more attention to the things I buy and think about why I choose them.

Her Code Got Humans on the Moon

Learning about Margaret Hamilton’s role in the Apollo space program was really inspiring. It’s amazing how she broke stereotypes by being a working mom in a field dominated by men. Seeing how Hamilton faced various challenges and still made groundbreaking contributions to software engineering makes me think about the countless times that I doubted myself when faced with obstacles. She reminds me that determination and hard work can lead to amazing achievements, even in the face of difficulty.

Moreover, Hamilton’s leadership and problem-solving skills during critical moments, like the Apollo 8 mission, inspire me to be a better leader in my own life and encourages me to challenge myself, believe in my abilities, and strive for excellence in everything I do.

Midterm Project- Catch the Fish 。˚ 。˚

Link to sketch: https://editor.p5js.org/Hazpaz/full/H-g4lq8jJ

Concept and inspiration

Amazon.com: Haktoys Fishing Game Play Set Includes 21 Fish and 4 Fishing Poles on Rotating Board with Music On/Off Switch for Quiet Play | Board Game for 1-4 Players : CDs & Vinyl

For this project, I’ve drawn inspiration from a childhood game my brother used to play, called the “Fishing game.” It involved catching fish with a fishing hook within a time limit. I’ve adapted this concept into my own version of the game, adding some twists and modifications. Instead of a traditional fishing game with a box of fish, my game features fish scattered randomly across the canvas. The objective remains the same: capture each fish individually using a fishing hook (the mouse) and deposit them into a fish bowl before time runs out. This adaptation allows for a unique gameplay experience while still capturing the essence of the original game.

How it works

1. Starting:

– When you first open the game, you’ll see a logo on the screen.

– To start playing, you just need to click anywhere on the logo.

2. Instructions Screen:

– After clicking the logo, you’ll see some instructions on how to play the game.

– These instructions include how to choose the number of fish in the game and how to start playing.

3. Gameplay:

– Once you’re ready, the game starts.

– You’ll see a background with a fishbowl and some fish swimming around.

– Your goal is to catch all the fish and put them in the fishbowl before time runs out.

4. Catching Fish:

– To catch a fish, you just need to move your mouse cursor close to it.

– When you’re close enough, the fish will be caught on your fishing hook.

5. Ending the Game:

– The game ends when either you catch all the fish and put them in the fishbowl or the timer runs out.

– If you catch all the fish in time, you win!

– If time runs out before you catch all the fish, you lose.

6. Restarting the Game:

– If you want to play again, you can press the Enter key to restart the game.

– If you want to go to the home page (instructions page) click on any key.

7. Music:

-Throughout the game, there’s background music to enhance the gaming experience.

-There’s different music for when you win or lose, adding to the atmosphere of the game.

8. Fullscreen Mode:

– You can also toggle fullscreen mode by pressing the ‘f’ key.

9. Game Elements:

-The game includes various elements such as shapes (the ellipses behind the slider), images (fish, fishing hook, fish bowl, backgrounds), text, and sound to create an immersive experience.

– The game is also developed using Object Oriented Programming, with classes called “Fish.js” and “Timer.js”.

Highlights of some code that I’m particularly proud of

The playGame() function is responsible for handling the main gameplay dynamics such as the timer, fishbowl, fishing hook and music. I’m proud of how I tackled most of the logics of the game in this function. Here is the code snippet of the function.

// Play the game function
function playGame() {
  
  image(gameBg, 0, 0, windowWidth, windowHeight); // The background of the game 
  timer.update(); // Update timer  
  
  numFishiesSlider.hide(); //hides the slider
  
  // Draw time left at the top center of the screen
  textSize(50);
  textAlign(CENTER, CENTER);
  fill(0);
  text("Time left: " + timer.getTime() + " seconds", windowWidth / 2, 100);
  
  // Draw fish bowl
  image(fishBowl, windowWidth / 2 - 50, windowHeight / 2 - 50, 200, 200);
  
  // Draw fishing hook
  image(fishingHook, mouseX - 25, mouseY - 25, 70, 70);
  
  // Display and update fishies
  for (let fish of fishies) { // Checks each element of the "fishies" array
    
    fish.display();
    
    // Hooking the fishies to the hook
    if (dist(mouseX, mouseY, fish.x, fish.y) < 25) {
      
      fish.hooked = true;
      
    }
    
    if (fish.hooked) {
      
      fish.move(mouseX, mouseY); // The fish is hooked to the hook
      
    }
  }
  

  // Check if all fishies are inside fish bowl
  let allFishiesInside = true;
  for (let fish of fishies) {
    
    if (!fish.insideBowl) {
      
      allFishiesInside = false;
      break;
      
    }
  }
  
  
  if (allFishiesInside) {
    
    gameFinished = true;
    timer.stop();
    
    //play music
    if (timer.timeLeft > 0) {
      
      victoryMusic.play(); // Play victory music if game finished before countdown ends
      gameMusic.stop(); // Stop background music
      
    } 
    
    else {
      
      losingMusic.play(); // Play losing music if countdown ends before game finished
      gameMusic.stop(); // Stop background music
      
    }
    
    gameState = 'end';    // Change to end game state

  }

  // Check if time is up
  if (timer.getTime() === 0) {
    gameFinished = false; // Player loses if time is up
    gameState = 'end';
    losingMusic.play(); // Play losing music
    gameMusic.stop(); // Stop background music
  }
}

 

The continuation of the playGame() function is the displayEndscreen() function which displays the end screen on the basis of winning or loosing the game. At first, I had trouble understanding how this code worked, but eventually, I figured it out and got it to function properly.

//function for the endscreen
function displayEndScreen() {
  
  fill(255);
  textSize(50);
  textAlign(CENTER, CENTER);
  
  if (gameFinished == false) {
    
    //displaying that the player lost the game
    fill('#F44336');
    background(gameOver)
    // text("Game Over!", windowWidth / 2, windowHeight / 2);
    text("Time left: " + timer.getTime() + " seconds", windowWidth / 2, windowHeight / 2 + 280 + 60);
    
  } 
  
  else {
    
    //displaying that the player won the game
    fill('rgb(16,96,16)');
    background(win)
    // text("You WIN!", windowWidth / 2, windowHeight / 2);
    
  }
  
  // instructing the player on how to restart the game
  textSize(50);
  fill('#710404');
  text("Click Enter key to restart", windowWidth / 2, windowHeight / 2 + 570);
  text("Click any key to go to Home page", windowWidth / 2, windowHeight / 2 + 620);

  
  
}

Challenges with the project

1. Implementing the functionality to drag and drop each fish individually to the fish bowl has posed a significant challenge.

2. Providing users with the ability to select their preferred difficulty level by choosing the number of fishes in the game: I initially attempted to let users input the number of fish they wanted using a text box, but it didn’t work as expected. So, I switched to using a slider instead. Although it was challenging to code initially, I refined the logic and eventually got it to work.

3. Difficulty in adjusting the timer according to the number of fish that the player inputed.

4. Making the whole experience of the game in full screen posed a significant challenge for me, forcing me to change some design choices for the game.

Future Improvements

1. Allow players to customize their fishing hook or fishbowl with different designs or colors.

2. High scores boards for each levels.

3. Enable users to drag the fishes individually to the fish bowl for a more interactive experience.

4- Make the game a bit more responsive to the screen size.

5. Add more colors and deigns to the overall design of the game to make it more aesthetic.

 

Reading Reflection- Week 5

In this passage the author talks about computer vision, which is a technology which allows computers to interpret and understand visual information from the surrounding environment.

What is so cool about this is how the computers can understand what they see through the use of computer vision, like movements and objects. Lets take the game “Limbo Time” as an example, where players use their hands, and a computer tracks their movements to play the game. Its fascinating how these simple techniques like movements can create some intriguing interactive experiences.

Another example which fascinates me is the “Messa di Voce,”a performance where voices were transformed into images. Its crazy how the simple voices and sounds themselves transforms into images. As a musician this art-piece really caught my attention and showed me the range of possibilities that are achievable using computers.

Lastly, I found it interesting how computer vision is becoming more accessible in multimedia tools. They talked about plug-ins for programs like Processing and Max/MSP/Jitter that let artists and designers easily add computer vision features to their projects. It’s like having a toolbox full of cool gadgets that make it easier to create interactive art or games, which for us could be useful for our future projects.

These examples show how artists use technology to make interactive projects in lots of different  varieties of ways. In the age of Artificial Intelligence, it’s cool to see how these early ideas helped make the tech world we have now. These are like the building blocks for the interactive designs we see all the time.

 

Week5- Midterm Progress

Concept

For this project, I’ve drawn inspiration from a childhood game my brother used to play, called the “Fishing game.” It involved catching fish with a fishing hook within a time limit. I’ve adapted this concept into my own version of the game, adding some twists and modifications. Instead of a traditional fishing game with a box of fish, my game features fish scattered randomly across the canvas. The objective remains the same: capture each fish individually using a fishing hook (the mouse) and deposit them into a fish bowl before time runs out. This adaptation allows for a unique gameplay experience while still capturing the essence of the original game.

Design

1. The game begins with an instructions page featuring a button labeled “Click here to continue” at the bottom.

2. Upon clicking, the player is directed to a page where they can select the number of fish to be displayed on the canvas, adjusting the game’s difficulty.

3. After choosing the level of difficulty, the player clicks a button labeled “Click here to start the game.”

4. Upon starting the game, a countdown timer begins, indicating the time limit for completing the game.

5. Background music plays throughout the game, creating an immersive experience.

6. If the player successfully captures all the fish before the timer runs out, they win the game.

7. Upon winning, a new page displays congratulating the player on their victory and showing their completion time.

8. A victory music plays to celebrate the player’s success.

9. If the player fails to capture all the fish before the timer expires, they lose the game.

10. Upon losing, a new page shows that the player has lost the game.

11. An end game music plays to signal the conclusion of the game.

Challenges with the project

1. Implementing the functionality to drag and drop each fish individually to the fish bowl has posed a significant challenge.

2. Creating an on-screen countdown timer that accurately tracks the remaining time and triggers the end game page when it reaches zero has been another obstacle.

3. Providing users with the ability to select their preferred difficulty level by choosing the number of fishes in the game initially proved to be problematic, requires for code refining.

4. Design challenge: Positioning the fish bowl on a table above water and making the users to drag the fish from the water surface into the bowl, which would make it aesthetically pleasing.

Code

let fishes = [];
let fishBowl;
let fishingHook;
let timer;
let gameStarted = false;
let gameFinished = false;
let numFishes = 5; //  default number of fishes


function preload() {
  
  fishBowl = loadImage('bowl.png'); // Load image for fish bowl
  fishingHook = loadImage('hook.png'); // Load image for fishing hook
  gameMusic = loadSound('gamemusic.mp3'); // Load background music
  victoryMusic = loadSound('victorymusic.mp3'); // Load victory music
  losingMusic = loadSound('losingmusic.mp3'); // Load losing music
  
}

function setup() {
  
  createCanvas(800, 600);
  timer = new Timer(numFishes); // timer object with the number of fishes
  
}

function draw() {
  background("#2196F3");

  if (!gameStarted) {
    displayInstructions(); // Display instructions if game hasn't started
  } 
  
  else {
    timer.update(); // Update timer

    if (!gameFinished) {
      // Draw fish bowl
      image(fishBowl, width / 2 - 50, height / 2 - 50, 150, 150);

      // Draw fishing hook
      image(fishingHook, mouseX - 25, mouseY - 25, 50, 50);

      // Display and update fishes
      for (let fish of fishes) { //checks each elements of the "fishes" array
        fish.display();
        
        //hooking the fishes to the hook
        if (dist(mouseX, mouseY, fish.x, fish.y) < 25) {
          fish.hooked = true;
        
        }
        
        if (fish.hooked) {
          fish.move(mouseX, mouseY); //the fish is hooked to the hook
        }
      }

      // Check if all fishes are inside fish bowl
      let allFishesInside = true;
      for (let fish of fishes) {
        if (!fish.insideBowl) {
          allFishesInside = false;
          break;
        }
      }
      if (allFishesInside) {
        gameFinished = true;
        timer.stop();
        
        //play music
        if (timer.timeLeft > 0) {
          
          victoryMusic.play(); // Play victory music if game finished before countdown ends
          gameMusic.stop(); // Stop background music

        } 
        
        else {
          
          losingMusic.play(); // Play losing music if countdown ends before game finished
          gameMusic.stop(); // Stop background music

        }
        
      }
    } 
    
    else {
      fill(255)
      textSize(40);
      textAlign(CENTER, CENTER);
      text("Game Over!", width / 2, height / 2);
      text("Time left: " + timer.getTime() + " seconds", width / 2, height / 2 + 40);
      
    }
  }
}

function displayInstructions() {
  
  // Display instructions
  fill('rgb(0,0,134)'); //color of ellipse
  ellipse(width/2, height/2,650,150); //ellispe in the center behind the circle
  fill(255); //color of the texts
  textSize(40); //size of texts
  textAlign(CENTER, CENTER); //texts in the center of the canvas
  text("Click to start the game", width / 2, height / 2);
  
}


function mousePressed() {
  if (!gameStarted) { //if the game is not started 
    gameStarted = true; //the variable is set to true and it resets the fishes array
    fishes = []; // Reset fishes array
    
    //adding fishes to the canvas
    for (let i = 0; i < numFishes; i++) {
      fishes.push(new Fish(random(width), random(height)));
    }
    
    timer.start(); //countdown starts
    gameMusic.loop(); // Play background music on loop

    
  }
}

class Fish {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.hooked = false;
    this.insideBowl = false;
    this.fishImage = loadImage('fish.png'); // Load fish image
  }

  display() {
    image(this.fishImage, this.x - 25, this.y - 25, 50, 50); // Draw fish image
  }

  move(x, y) {
    this.x = x;
    this.y = y;
    
    // Checking if the fish is inside the fish bowl
    if (dist(x, y, width / 2, height / 2) < 50) {

      this.insideBowl = true; // If the distance is less than 50, then the insideBowl property is set to true


    }
  }
}


class Timer {
  constructor(numFishes) {
    this.totalTime = numFishes * 1; // Adjust the total time based on the number of fishes
    this.timeLeft = this.totalTime;
    this.running = false;
  }

  start() {
    this.startTime = millis();
    this.running = true;
  }

  stop() {
    this.endTime = millis();
    this.running = false;
  }

  update() {
    if (this.running) {  //if the timer is running
      
      let timePassed = millis() - this.startTime; //calculates the time passed since the timer started
      
      this.timeLeft = max(0, this.totalTime - floor(timePassed / 1000)); // Calculate remaining time
      
      if (this.timeLeft === 0) {
        this.stop(); // Stop the timer when time runs out
      }
    }
  }

  getTime() {
    return this.timeLeft;
  }
}

Future Improvements and plans

1. Add more colors and deigns to the overall design of the game to make it more attractive, I want to make the design more aesthetically eye pleasing.

2. Add an instructions page to guide users on how to play the game.

3. Enable users to drag the fishes individually to the fish bowl for a more interactive experience.

4. I want to add more music to the game like subtle sounds and musics when the user interacts with the game.

5. Refine all aspects of the code to align with the initial plans and ensure smooth functionality.

Reading Reflection- Week 4

I really enjoyed reading the chapter by Don Norman called “The Design of Everyday Things”. The chapter for me was engaging and the author gave various examples and insights on why design is important in everything. Norman says that the two of the most important characteristics of good design are “discoverability” and “understanding”. And through the doors example, Norman clearly explained to us that why these components are essential for designing. I completely agree with him on his view on the current designs which are complex and how these designs should not just merely focus on the beauty part but also focus on the human interaction/ accessibility side of the design.

I liked how Norman gives importance for the concept of Human-Centered Design (HCD), which was really an eye opener for me. He emphasized the need of the designers to focus on the potential errors of the designs during the designing process itself. Which really enlightened me and taught me that, checking for such potential errors in the designs will help us to have a better user-design interaction which will ultimately lead to a better user-end reaction for the design. This concept is what which I believe, is important in all designing process and I would like for it to be incorporated in my future designs and projects.

Assignment 4 – Data Visualization

Concept

For this assignment, I drew inspiration from one of the previous students works where they used the 2018 world cup data to create a graph. As a passionate football enthusiast, with football being my favorite sport, and considering that the FIFA world cup is the biggest sports tournament in the world, I decided to collect the data on the total number of goals scored in every World Cup tournament from 1930 to 2022. My goal is to present this data in the form of a bar graph, visually depicting the historical trends and patterns of goals scored across different tournaments.

A highlight of some code that you’re particularly proud of

// Inserting bars
    for (let i = 0; i < data.length; i++) {
    let year = data[i].getNum('YEAR');
    let goals = data[i].getNum('GOALS');
    let x = map(year, 1930, 2022, margin+20, width - margin); // mapping the Year
    let y = map(goals, 0, maxGoals, height - margin, margin); // mapping the number of goals
    let barWidth = w / data.length;
      
      
    fill('#E8B6B6'); //color of the bars
    rect(x - barWidth / 2, y, barWidth, height - margin - y); //draws the bar

    fill('#100D0D'); //color of the texts
    text(goals, x+6, y -10); //writes the number of goals
  }

 

Embedded SketchReflection and ideas for future work or improvements

For future improvements, I would like to add various patterns into the bars of the graph and additionally, I plan to implement interactivity, allowing users to click on individual bars to reveal which country achieved the highest goal count in each respective tournament.

Reading reflection: week 3

Chris Crawford starts by saying that none of us truly have an understanding on what interactivity is, and states that listening, thinking and speaking are the key elements of interactivity. Crawford also states that interactivity is not two-sided, and which is something that can be defined as low-interactivity and high-interactivity. The example of conversation between two persons (Fredegund and Gomer) made me understand the importance of interactivity namely its elements such as listening thinking and speaking in having an effective conversation.

Before reading the article, I simply thought that interactivity meant reacting or interacting with something. However, Chris Crawford’s insights shed light on the nuanced nature of interactivity, revealing that it has various levels, each with its own importance. Through his explanation, I came to understand that interactivity isn’t a one-size-fits-all concept; rather, it spans a spectrum with different degrees of engagement. This revelation deepened my appreciation for the multifaceted nature of interactive experiences and the significance of considering these levels in design and interaction.

Assignment-3 Floating Bubbles

Concept

The assignment was to create a generative artwork using Object-Oriented Programming in p5.js. So for this assignment I wanted to create a bubble generator, such that when a button is pressed, random bubbles generates and floats into different directions.

Inspiration

Acrylic Bubble Wall Aquarium, Packaging Type: Box at best price in Noida

I got inspired by watching a Bubble Wall aquarium. It’s like a magical glass tank where bubbles pop up randomly, creating a beautiful display. So, I wanted to recreate that magic digitally by making bubbles appear randomly on the screen when you press a button.

A highlight of some code that you’re particularly proud of

function mouseClicked() {
  
  // Check if mouse click is within the box
  
  if (mouseX > width / 2 - 50 && mouseX < width / 2 + 50 && mouseY > height - 50 && mouseY < height) {
    
    // Add multiple bubbles to the array
    
    for (let i = 0; i < 50; i++) {
      
      //initialize
      let x = random(width);
      let y = height;
      let speedX = random(-5, 5);
      let speedY = random(-10, -5);
      let col = color(random(255), random(255), random(255));
      let size = random(20,60);
      
      //push it to the array
      bubbles.push(new Bubble(x, y, speedX, speedY, col, size));
    }
  }

Embedded sketch

Reflection and ideas for future work or improvements

For future improvements I want to add more life to the aquarium by adding fishes, plants etc. which will contain interactive elements in them