Week 5 Reading Response

The exploration of computer vision in interactive artworks is truly fascinating, especially considering its roots in Myron Krueger’s Videoplace from the late 1960s. The idea that the entire human body should be involved in interactions with computers was revolutionary at the time. Videoplace’s ability to digitize a participant’s silhouette and synthesize graphics based on their posture and gestures was ahead of its time. I believe that the notion of involving human body with computer interaction through computer vision to be an essential yet dangerous idea. While it does produce valuable possibilities like the Videoplace or Sorting Daemon, but there could be dangerous implications for our society. For instance, computer vision algorithms may exhibit bias, leading to discriminatory outcomes, especially if the training data is not representative of diverse populations. Biases in such algorithms can result in unfair and discriminatory decisions, affecting individuals in areas like hiring, law enforcement, and financial services. While this can be considered as a interactivity through computer vision, the consequences of this in this contemporary society could affect the lives of many in serious ways.

While reading the computer vision techniques, the notion of semantic understanding piqued my interests. Upon further research I found that unlike text-based data, which inherently carries semantic and symbolic information, digital video, in its raw form, consists of streams of rectangular pixel buffers with no intrinsic meaning therefore making the case for this problem. This lack of inherent semantics hinders a computer’s ability to interpret or extract meaningful information from the video content without additional programming. Bridging the semantic gap seems to be important for developing computer vision algorithms that can discern and interpret the content of video streams, enabling applications to answer even elementary questions about the presence of objects or individuals and the contextual details within a given scene.

Midterm Project Progress (The Dungeon Maze)

MAZE GAME

Concept

The idea behind the game is that player must make their way through a sequence of difficult mazes using mathematical algorithms, each one generated randomly to provide a different challenge with each maze. The main objective of the game is for the player to navigate from the beginning point to the maze’s exit.

Gold coins are scattered throughout the maze and act as collectibles for players to find. This helps them to finish the game if they collect a certain number of gold coins. Also, 90% of the gold coins spawned on the maze must be collected for the player to exit the maze. However, they can use the teleporter without this condition.

There are teleporters placed in the maze that serve as an interesting twist to the game. Stepping upon a teleporter transports the player to a whole new maze, which changes the difficulty and forces them to adjust their approach on the fly.

Every maze in the game has a timer built into it, which creates a sense of urgency and tests the player’s ability to think quickly and make decisions under pressure. Also, the player has limited vision which makes it difficult for the player to plan their next move. This forces them to memorize their path to complete the maze.

Design 

The visual and thematic components of this maze game are designed to put the player in the shoes of a dungeon master.

The image is used for the background of the maze.

This is a snippet of the maze. The design is a work in progress as I am focusing on getting the basic functionality to work first. Currently, the big yellow is the player, the small bronze-colored circles are the gold coins, the blue circles are the teleporters, and the red square is the exit. I planning on replacing these with some avatars or icons.

Frightening Part

The most frightening part when I started to code was the main functionality of the game, The Maze. I wanted to have random mazes being generated every time the user plays the game or is teleported. So that it invokes a new sense of challenge.

The use of randomness and the cyclical structure of the path-carving process is what gives the procedure its complexity. Recursive functions include function calls that repeat back on themselves, they can be challenging to study and comprehend. I have

The code below shows how I tackled this issue:

function generateRandomMaze(rows, cols) {
  let maze = new Array(rows);
  for (let y = 0; y < rows; y++) {
    maze[y] = new Array(cols).fill('#');
  }

  function carvePath(x, y) {
    const directions = [[1, 0], [-1, 0], [0, 1], [0, -1]];
    // Shuffle directions to ensure randomness
    shuffle(directions); 

    directions.forEach(([dx, dy]) => {
      const nx = x + 2 * dx, ny = y + 2 * dy;

      if (nx > 0 && nx < cols - 1 && ny > 0 && ny < rows - 1 && maze[ny][nx] === '#') {
        maze[ny][nx] = ' ';
        // Carve path to the new cell
        maze[y + dy][x + dx] = ' '; 
        carvePath(nx, ny);
      }
    });
  }

  // Randomize the starting point a bit more conservatively
  const startX = 2 * Math.floor(Math.random() * Math.floor((cols - 2) / 4)) + 1;
  const startY = 2 * Math.floor(Math.random() * Math.floor((rows - 2) / 4)) + 1;

  // Ensure starting point is open
  maze[startY][startX] = ' '; 
  carvePath(startX, startY);

  // Set exit
  maze[rows - 2][cols - 2] = 'E';

  // Place teleporters and coins after maze generation to avoid overwriting
  addRandomItems(maze, 'T', 3);
  addRandomItems(maze, 'C', 5);

  return maze;
}

function shuffle(array) {
  for (let i = array.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [array[i], array[j]] = [array[j], array[i]];
  }
}

The generateRandomMaze() function creates a random intricate maze by first populating it with walls and then utilizing the depth-first search algorithm to recursively find pathways. To ensure variation in the pathways formed, it shuffles possible directions (up, down, left, and right) starting from a randomly selected point. It improves the gameplay experience by slicing through the grid, placing an exit, and dispersing interactive features like coins and teleporters at random. The carvePath function’s use of recursion and randomness is essential to creating a maze that embodies the spirit of maze exploration and strategy and is both difficult and unique each time the game is played.

 

NOTE: I have used a lot of functions rather than classes. The functionality of the game is 80% achieved and from here on now I will change the functions to classes and complete 100% of the game/gameplay.

Reading Response Week 5 : OpenAi Sora, Apple Vision Pro, Virtual Reality and the rise of Computer Vision

For this reading response I decided to take a different kind of approach and Instead of acknowledging and kind of rephrasing what is said in the original piece, I decided to look at the topic from a different pair of lenses.

Starting off, when we talk about Computer Vision and this interaction between computer systems and machines with humans, it always comes out as some kind of a new concept. One example is Virtual Reality and the New Apple Vision Pro headset which actually is an augmented reality (AR) headset but I don’t want to get deeper into that. What if I tell you that this concepts have actually been around since the 1970, YES, THE 1970S, that is like 50 years ago!

To explore more about the concept you can read the book “What you should wear to an artificial Reality?” but to summarize, the author talks about this development of this artificial reality world starting of from the 1970s with his exhibition called METAPLAY which involved two people playing with a ball that was not even a real one (it was just a projection on a screen). That quickly escalated to his projects called VIDEOPLACE, DIGITAL DRIVING and CRITTER which all worked on this idea to connect people throughout this computer vision and manage interaction in spaces which don’t really exist in real life.

On the other side, what I found interesting is the rise of AI systems in the past few years, specifically one that was announced in the past week and that is the OpenAi Sora, an AI software that can supposedly make videos out of simple prompts and all of that without even filming a single second. I am really interested in how this affects the Computer Vision, Film and Interactive Media World

 

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.

 

Midterm Progress: Knighthood Arcade

From a young age, I always loved playing arcade games with my brother. We would get around 20 gold coins from the cashier and spend all of it on different games. Which is why for a midterm project, I have decided to make a small arcade game called Knighthood using sprites. I am using p5play library and incorporating it to p5js using cdn. For now, I have one character called knight who stay idle, walk, jump, and attack. Although I have not implemented it yet, I am planning to make the game seem as vintage as possible. Design wise, I am also planning to incorporate a background music and movement sounds as well. For instance, there will be sound when the knight attacks or when enemies die.

As for game logic, I am planning to make 3 types of difficulties so the number of enemies change alongside their life bar. As the user chooses the difficulty, the number of enemies with different life bars will be pre loaded and will spawn in random location is set interval and attack the character. the Character will die after 3 hits.

I believe that the challenging aspect of this project will be implementing the way in which the knight hits the enemies. The condition is that the enemy should be near the knight with the margin of 10 px and the key ‘K’ should be pressed. To mitigate this problem, I am planning making boolean variable is Attacking to check if the K key is pressed and if it is pressed, checks if the enemy is nearby and if they are, they will change animation to dead state and then vanish after few seconds. Another potential problem might be the interactive problem of indicating that the knight was hit. User has to know besides the health count that the knight has been hit. For this, I am thinking of implementing knock back effect for the knight when he is hit by an enemy.

function keyPressed() {
  if (keyCode === 66) {
    // 'B' key pressed, hide instructions
    showInstructions = false;
  }
  if (keyCode === 87) {
    mySprite.setSpeed(3, 270);
    mySprite.changeAnimation("walk");
    setTimeout(() => {
      mySprite.changeAnimation("stand");
    }, 500);
  } else if (keyCode === 83) {
    mySprite.setSpeed(3, 90);
    mySprite.changeAnimation("walk");
    setTimeout(() => {
      mySprite.changeAnimation("stand");
    }, 500);
  } else if (keyCode === 65) {
    mySprite.setSpeed(3, 180);
    mySprite.changeAnimation("walk");
    setTimeout(() => {
      mySprite.changeAnimation("stand");
    }, 500);
  } else if (keyCode === 68) {
    mySprite.setSpeed(3, 0);
    mySprite.changeAnimation("walk");
    setTimeout(() => {
      mySprite.changeAnimation("stand");
    }, 500);
  } else if (keyCode === 13) {
    mySprite.position.x = width / 2;
    mySprite.position.y = height -100;
    mySprite.setVelocity(0, 0);
    mySprite.changeAnimation("stand");
  } else if (keyCode === 32 && !isJump) {
    mySprite.changeAnimation("jumping");
    isJump = true;
    mySprite.velocity.y = -8;
    // Set a timeout to reset the jumping flag after a short duration
    setTimeout(() => {
      mySprite.velocity.y = +5;
      mySprite.changeAnimation("stand");
      isJump = false;
    }, 500); // Adjust the duration as needed
  } else if (keyCode === 75 && !isAttack) {
      mySprite.changeAnimation("attack");
      isAttack = true;
      setTimeout(() => {
        mySprite.changeAnimation("stand");
        isAttack = false;
      }, 500) ;
  }
}

 

Reading Reflection – Week #5

This week’s reading was interesting from the technical and social sides of things. The concept of creating something for experimentation, and even art, to then transform it into a weapon of mass surveillance (and even war) is something that can provoke many thoughts. Indeed, I know that my iPhone applies many processes internally, which allowed face recognition to happen in the first place, and probably surveillance of me without my consent (just probably).

I remember when I was a child. I was impressed when I first saw another human face through Skype in 2013. Yes, the machine was just displaying a set of pixels that were observable through my screen, but the fact that another human, who was residing in another country, was actually seen was truly impressive! Then the smartphone arrived, and more complex algorithms were starting to get implemented, which allowed for further experimentation and user engagement.

Therefore, I would argue that the reading really did not change that much my views on video image processing, aside from the thought-provoking fact that a war medium originated from an art experiment. And I have not used many of the algorithms that allow modifying the perception of you through the screens of other people.

In conclusion, I would not argue that the author is biased, as he presents factual information and techniques for students or professionals to implement in their careers. Nevertheless, most information could be considered outdated as it was presented around 2006–2007. In today’s world, we have Artificial Intelligences that are capable of understanding humans and even replicating them through simulations, which can then be shared as a small clip through social media.

Mid Term Process Update

My game is inspired by the Club Penguin Puffle Park games, specifically the Puffle Roundup. The game aims to gather as many Puffles into a designated area (the cage) in under 120 seconds. The more you gather, the more points you earn. The twist is that if you’re not careful with the movement of the mouse you could push away the puffle, making them escape, meaning you lose points.
The most complex part of the project would be looking for images/assets to make the game, the mouse interactivity smoothness, and probably the timer and point count system. I did some research and found a tool that lets you pack your images together to use in the code “http://free-tex-packer.com/” which would be very useful for the clock timer in my game.

Assignment #5 – Reading Response – Surveillance Against Surveillance

I really enjoyed reading this text, particularly discovering the artworks on surveillance. I find it quite ironic (but in a good way) that a lot of artworks that want to talk about surveillance, employ some sort of surveillance themselves. Of course, here, surveillance has to be looked at in the wider sense. Usually, when we think surveillance we imagine CCTV or hidden cameras. However, as the text mentions, human tracking is also included under surveillance. So, even artworks that simply track your body movements, as basic as the Cheese installation by Möller, can be said to be «surveilling» you in a way. There are also the other forms of human tracking, like Lozano-Hemmer’s Standards and Double Standards, which involve more intense forms of surveillance and tracking. To have items following you takes the «scrutiny» to a different level. Reading about this artwork reminded me of the Manar Abu Dhabi exhibition which took place last fall. It included 35 artworks, many of which were installations. The one that Lozano-Hemmer’s work reminded me of is the Abu Dhabi Dots by Carsten Höller, which was exhibited on the shore of the Corniche beach. Essentially, there are projected spotlights on the sand, and when you stand on them and move, they move with you.

After reading about it now, I found out that it is actually a game. Here is the description:

“Operating as a reward and punishment game, you can upgrade from red to blue by overlapping your dot with a blue dot, and can then move to green, and white. People you are playing with who are overlapped are downgraded. 

But if a series of red dots join an interrupted chain or cluster, the dots all become white. If not, the game continues until 7 or more white dots don’t overlap with other white dots any more.”

Before reading this text, I hadn’t thought much about it, but now I realize that it is a form of tracking after all. And although it seems like a game for children, the whole «reward and punishment» part of it actually reminds me a bit of surveillance and scrutiny, where your actions can favor you but also disadvantage you, while also impacting other people around you. It is therefore interesting to see how computer-based tracking artworks feed into the idea of surveillance, and potentially how they use our data (and store them?).

Assignment #5 – Progress on the midterm

For my Midterm Assignment I decided to go a little bit back in time to the Windows XP era, basically the Windows of my childhood.  Just hearing the sounds of a windows XP computer turning on brings back so many memories.

My midterm is going to be exactly that, a Windows XP emulator with a twist, It has errors all over it and it gives us the famous Blue screen of death. Fun isn’t it? Let me show you my progress so far.

For the opening screen I decided to have a button which would be used to “turn on the computer”. It looks something like this:

Furthermore when we click the button the original Windows XP sound plays and I have also added the original background and My Computer Icon:

Snippet of code where I load these elements upon a click:

if(mouseIsPressed === true)
        {
          noLoop();
          clickSound.play();
          noTint();
          image(windowsImage, width/2,height/2, 400,400);
          imageMode(CENTER);
          windowsSound.play();
          image(computerIcon, width/10, height/10, 60, 60)

 

I know there is a long way to go but for now you can enjoy the sketch using the window below.

Week 5 – Midterm Project Concept – Classic Tank Game

Concept:

For my midterm project, I am inspired by my childhood game: a classic Tank Game in the small brick game console.

The game is basically divided into different levels. As you come to the next level, the speed come from the bullet will be faster and more component will spawn in the game. Also, the player only has a limited number of lives. When those lives are used up, it is game over. The user can move around to dodge the bullet. However, because the screen is relatively small to contain both player and enemies, it becomes more and more difficult to win.

Design:

I aim for a similar design as its original. I want player tank will have a brick-like display which is distinguished from the enemies. However, instead of doing a monochrome game similar to the original, I want to add colors and random movements to the enemies. It will be either the enemies will move close and close to the player’s tank or the tank will move and shoot bullets randomly.

Object Oriented Class:

  • Tank – Need to have 2 designs, one for player and one for the enemies.
  • Player – Lives, Points
  • Game – Call all the player and enemies state and changes of levels.

Most Frightening Part:

  • The tank movements. In the best case, I want the enemies tank to move based on the players movements. In other words, they would move close and close to the player’s tank. Since the player’s tank will constantly moving, the enemy target path will also change accordingly.
  • Levels. I think it is quite difficult to have the correct parameters for each level. As the level increases, the parameters such as speed and number of enemies will also increase.

Risk Prevention:

  • I will continue to come up with a way to have the tank targeting the player’s tank. However, in the worst case scenario, I can make the tank to move randomly. As I increase the number of tanks, the disadvantage of not having targeting tank will disappear.
  • I will try to be careful with the game state control. It is really important to know when a player wins to move to the next level. Or when the player loses to allow replay sufficiently. Therefore, I will make sure these parameters are set up appropriately for different levels.