Author: Morris Chang

For my midterm project, I decided to do a Space Invaders-inspired shooting game with space ships and aliens. The game was partly inspired by a mobile game called: Radiant. The game’s main feature was an array of weapons in which the player could freely switch between. Because each weapon type had its own advantages and disadvantages, you had to switch between all of them to successfully complete the game. I wanted to incorporate this element into my shooter game to make it more unique and be more interactive and replayable.

Game Design

The game begins on a menu screen, where the player sees the game title and has access to all the instructions they need to play the game. I found a really cool arcade-style font that really matched the theme of the game. Because the game instructions were relatively minimal there was no need to have mutliples screens of text.

Then when the game begins the player is spawned and enemies start spawning from the top of the screen at regular intervals, with the interval decreasing over time to increase the difficulty of the game. The enemies path directly towards the player, ending the game if even one of them touches the player. Because of the number of enemies already present, I did not make the enemies fire any shots.

The player had access to 6 different type of weapons, normal shots, machine gun, shot gun, laser and other settings that all had their own characteristic. The player could switch at anytime by pressing the number keys 1-6. Each type of shot deals different amounts of damage to enemies.

When the player is hit by an enemy the game cuts to a GAME OVER screen. The player can then press play again to restart the game.

Challenges

One problem I continuously faced was when the alien sprites because of the way they were coded, were often the wrong size and unable to be resized by the variables. I had to consult  p5 reference for a while to fix this.

Another problem I had faced for a long time was getting the shot type to switch to the proper type of shots. After tutorials and looking at other projects I switching with cases allowed me to control this as well as shot spread with the keyboard numbers.

Lastly, one thing I was surprised was so challenging was assigning a sound to play when the game ended (I ended up forgoing this). There was no way to easily play a sound once without looping when my game state switched.

  damage = 6
  break
case 4:
  color = [255, 255, 0]
  width = 15
  height = 10
  speed = 12
  damage = 1.5
  break;
case 5:
  color = [255, 50, 255]
  width = 8
  height = 24
  speed = 15
  damage = 3
  break;
case 6: 
  color = [170, 50, 255]
  width = 5
  height = 35
  speed = 25
  damage = 3
  break
}

 

function keyPressed() {
  if (key === '2') {
    shotType = 2
    cooldown = 150
  } else if (key === '1') {
    shotType = 1
    cooldown = 400
  } else if (key === '3') {
    shotType = 3
    cooldown = 800
  } else if (key === '4') {
    shotType = 4
    cooldown = 600
  } else if (key === '5') {
    shotType = 5
    cooldown = 500
  } else if (key === '6') {
    shotType = 6
    cooldown = 600;
  }
}

 

Future Improvements

There are so many ways to potentially improve this game. One way is to definitely have more enemy types that would resist or be weak towards different types of projectiles. This would further incentivise the player to switch weapons, allowing the game to be more engaging.

Another potential improvement is improving the movement patterns of the aliens to be more challenging. If they moved unpredictably towards the player that allowed them to “dodge” shots, the game would have a whole other level of challenge.

Lastly, A scorekeeping method or score in the top left corner would be very useful and would make the game feel like its progressing- this is probably the first change I would want to implement.

For my project I decided upon doing a top-down shooting game where the player would fight zombies (sprites are a work in progress). The main concept is that the player would be able to use a variety of weapons to attack an endless wave of zombies. This week, I worked on the array to have zombies endlessly spawn and the player’s movement.

The biggest challenge was getting the enemies to follow the player not with lerp, but to slowly puruse the player. This was the code that I had to use to get the ‘enemies’ to follow the player in a linear steps-per-frame model.

for (let ball of balls) {
   //direction ball is "facing"
   let direction = createVector(playerX - ball.x, playerY - ball.y);
   //playerSpeed control
   direction.setMag(ballSpeed); 
   ball.add(direction);

 

What are some of the ways that computer vision differs from human vision?

The biggest distinction is that while when we see a photo, it is intuitive for us to distinguish a person from the background, it is comparatively harder for computers to make the distinction. This means, early computers had to use movement to distinguish which pixels on a display belonged to the object or person of interest and which were only part of a background. Furthermore, to detect movement computers had to calculate the change in color or brightness of pixels between frames whereas these things are quite simple for human vision.

What are some techniques we can use to help the computer see / track what we’re interested in?

frame differencing – comparing frames to determine movement.

background subtraction – has an original background scene, compares with captured scene to determine what is not part of the background and is the object of interest.

brightness thresholding – looking for changes in luminosity to determine the position/change in position of objects.

How do you think computer vision’s capacity for tracking and surveillance affects its use in interactive art?

It allows for the extra dimension of interaction. Many artworks, including the one with the poem’s falling letters. This means that you can take more than just key or button input sand by using computer vision to track human movements, you make the artwork more intuitive to operate (consider that people may not know you need to press a button but if you see your own image on the projector you already know how to control that shadow).

Inspired by my floor’s theme I am making batman. I used object-based coding to make the rain appear to fall. Adding music also gave it the batman like mood I was looking for. I think the way that half of the rain falls in front of him and half falls behind him was something that took me a while to conceptualize. Therefore this was a part of the code I was proud of.

  // draw raindrops that go behind batman
  for (let drop of drops) {
    if (drop.z <= 1.5) {
      drop.fall();
      drop.show();
    }
  }
  //draw batman
  fill(0)
  noStroke()
  ellipse(200, 250, 100, 100)
  quad(400-250, 248, 250, 248, 400-120, 400, 120, 400)
  triangle(152,240,160,170,182,240)
  triangle(400-152,240,400-160,170,400-182,240)
  fill(255)
  quad(163,250,183,250, 190, 260, 170, 260)
   quad(400-163,250,400-183,250, 400-190, 260, 400-170, 260)
  
  
  // then draw the raindrops in front of batman
  for (let drop of drops) {
    if (drop.z > 1.5) {
      drop.fall()
      drop.show();
    }
  }
}
  //making the raindrops fall
class RainDrop {
  constructor() {
    this.x = random(width);
    this.y = random(-height, 0);
    //perspective
    this.z = random(1, 3);
    // this makes the background slower than the foreground
    this.speed = map(this.z, 0.5, 2, 2, 6);

In terms of improvements I definitely could have made batman less minimalistic, and I think doing some other things to the rain to make it even more real (vary thickness of raindrops to account for perspective and stuff like that) which would add to the artwork. Lastly, adding some sort of more interactive element would have also made it better.

• What’s something (not mentioned in the reading) that drives you crazy and how could it be improved?

One thing recently is that in the game I’m playing right now, a Pokémon game, I cannot reorder my card decks even though on so many other UI interfaces I can, it is really frustrating that I cannot do this on an iPhone.

• How can you apply some of the author’s principles of design to interactive media?

I think they are especially applicable. Keeping in mind that products mus be designed with the end-user in mind, we can use the assumptions people will have about things (link should be pressed) (pages scroll down) as ways to help us decide how we should structure the media we create to make it more accessible for users. It is a matter of stepping into their shoes and thinking about how would someone with no knowledge of the thing they are interacting with do upon first instinct.

This week’s prompt made me think of pickup sticks, which are scattered on the ground in a cluster. This made it so that I could be random about how the sticks were distributed. But at the same time, considering the idea of controlled randomness, I realized I wanted it to not just be completely random, but in some ways simulating they were being tossed.

for (let i = 0; i < 40; i++) {
   let x = random(((width)/2)+50);
   let y = random((height/2)+50);

This part of code was very simple, but a highlight to me because I had to acutally think about how if they were tossed out in real life, the sticks would not  be completely random but would sort of cluster in an area. This allowed me to implement a bit of control into the randomness by dividing the width and height by 2.

One way that I see myself impoving upon this design is to have the sticks interact with each other like they do in the game. This would not only make the piece more interactive by also make it feel more real.

How are you planning to incorporate random elements into your work?

One way is to think about making it human. Because of the elements of human error especially compared to something like a computer, I feel like  using more of what the human user gives you is a good way to incorporate randomness. Another way is chance. For example, the current games that I play still rely on simulated coin flips that give 50-50 odds. Imprecision is also a great way. It still allows the work to retain its qualities and recognizability, but at the same time, it allows the work to take on a new character and uniqueness.

Where do you feel is the optimum balance between total randomness and complete control?

It is definitely somewhere in the middle; but too little is preferable to too much. Introducing too much chaos and randomness removes from what the work actually is and as the world tends towards chaos, removes the work from being art. However, too much perfection and too much control runs the risk of the same occuring. Things that are too perfect seem to remove themselves from the world of humanity, and in an AI-generated type of way, is very easy for us to spot that it is not real.

What do you consider to be the characteristics of a strongly interactive system?

I think it is the ability to render meaningful change as a result of the conveyance of meaning coming from the user. If we were to conceptualize a very weak interactive system, it would not change at all as a result of user input. This would be like conversing with someone who did not listen to what you had to say and as soon as you were done speaking, reply with “Yes, anyways…” and just continue speaking on whatever they had to say, not making meaning of your input. If we take that the reversal of this would be a strong interactive system, we can consider that a strong system would make meaningful change as a result of user input. Like a conversationalist that actively listens and asks questions pertaining to the content of your input, a good system would have the ability to register meaning in the user’s input effectively, then use the input to meaningfully “reply.”

What ideas do you have for improving the degree of user interaction in your p5 sketches?

Because we are limited, generally, to the hardware of a laptop running the p5 website, the keyboard and mouse are going to be the primary, most accessible methods of input which the basis of user interaction will be built upon. Because of this, trying to at least make the user interact by moving and clicking the mouse is a good idea. Because of how we are trying to increase user interaction, using the keyboard, which is much easier for users to assign meaning to inputs to is also a great idea. Chatbots are the pinnacle of this, where they can assign meaning to the user’s textual inputs and generate a response after “reading” what you wrote.