Author: Stefania Petre

Approximately ten years ago, a solider has fallen: they took down Flappy Bird. A game which combines simplicity and effectiveness. For my Midterm Project, I have decided to make my own version of it called Flappy Falcon. For this, I needed the code, some pictures and sounds.

The idea behind it is that I wanted to create the NYUAD version of the game, which would have the iconic colors of the University and our mascott.

Code: The code was pretty easy to make because we have already learnt everything that I had to do for it in class. I had to make adjustments along the way, as for some reason the pipes were the hardest thing to code because I faced some issues with them along the way:

– the falcon wouldn’t pass the pipes;

-the moment the falcon would touch the pipes even so slightly it would be game over ;

Pictures: In regards to the media, I came across another problem: the falcon wouldn’t upload and it was showing me an error. After some minutes of thinking of a solution, I got it to work.

Sounds: For the sounds I have uploaded a bird background noise, which signifies the falcon, but another classmate of mine interpreted it as the bird sounds that we hear everyday on campus (thanks sm).

//Flappy Falcon Game
//by Stefania Petre for Introduction Into Interactive Media

let bird;
let pipes = [];
let gameStarted = false;
let score = 0;
let startButton;
let backgroundImage;
let flappySound;
let birdImage;

function preload() {
  backgroundImage = loadImage("background.png"); 
  flappySound = loadSound("sound.mp3"); 
  birdImage = loadImage("bird.png"); 
}

function setup() {
  createCanvas(400, 600);
  bird = new Bird();
  startButton = createButton("Start");
  startButton.position(width / 2.2, height / 1.9);
  startButton.mousePressed(startGame);
}

function draw() {
  if (gameStarted) {
    playGame();
  } else {
    showStartScreen();
  }
}

function playGame() {
  background(94, 38, 163);

  bird.update();
  bird.show();

  updateAndShowPipes();

  showScore();
}

function updateAndShowPipes() {
  for (let i = pipes.length - 1; i >= 0; i--) {
    pipes[i].update();
    pipes[i].show();

    if (pipes[i].hits(bird)) {
      gameOver();
    }

    if (pipes[i].passes(bird)) {
      score++;
    }

    if (pipes[i].offscreen()) {
      pipes.splice(i, 1);
    }
  }

  if (frameCount % 100 === 0) {
    pipes.push(new Pipe());
  }
}

function showScore() {
  textSize(32);
  fill(255);
  text(score, width / 2, 50);
}

function showStartScreen() {
  image(backgroundImage, 0, 0, width, height);
  textSize(32);
  fill(255);
  textAlign(CENTER, CENTER);
  text("Flappy Falcon", width / 2, height / 3);
  textSize(16);
  text("Press Start to Experience Nostalgia!", width / 2, height / 2.2);
  score = 0;
}

function keyPressed() {
  if (key === " " && gameStarted) {
    bird.jump();
  }
}

function startGame() {
  gameStarted = true;
  pipes = [];
  startButton.hide();
  flappySound.play();
}

function gameOver() {
  gameStarted = false;
  startButton.show();
}

class Bird {
  constructor() {
    this.y = height / 2;
    this.x = 64;
    this.gravity = 0.6;
    this.lift = -15;
    this.velocity = 0;
    this.size = 50;
  }

  show() {
    image(birdImage, this.x, this.y, this.size, this.size); // Draw the bird image
  }

  update() {
    this.velocity += this.gravity;
    this.velocity *= 0.9;
    this.y += this.velocity;

    this.y = constrain(this.y, 0, height);
  }

  jump() {
    this.velocity += this.lift;
  }
}

class Pipe {
  constructor() {
    this.spacing = 200; // Increased gap between pipes
    this.top = random(height - this.spacing);
    this.bottom = height - (this.top + this.spacing);
    this.x = width;
    this.w = 40;
    this.speed = 2;
    this.passed = false;
  }

  show() {
    fill(0); // Set color to black
    rect(this.x, 0, this.w, this.top);
    rect(this.x, height - this.bottom, this.w, this.bottom);
  }

  update() {
    this.x -= this.speed;
  }

  offscreen() {
    return this.x < -this.w;
  }

  hits(bird) {
    return (
      bird.x + bird.size / 2 > this.x &&
      bird.x - bird.size / 2 < this.x + this.w &&
      (bird.y - bird.size / 2 < this.top ||
        bird.y + bird.size / 2 > height - this.bottom)
    );
  }

  passes(bird) {
    if (this.x < bird.x && !this.passed) {
      this.passed = true;
      return true;
    }
    return false;
  }
}

Overall, I completed every single requirement for the game which I would say I am happy about!

This week’s reading revisits a familiar situation from the Interactive Media Lab, where a shadow projected on the lab’s TVs welcomes us as we enter. It represents the combination of technology and creativity, opening the way for human journey.

Building on our prior conversations, the text emphasises a key point: technology alone is not enough for achievement. The individuals who drive innovation make a true impact. Myron Krueger’s Videoplace is a good illustration of how skill and vision can transcend both time and technology, leaving an enduring effect on the industry.

Furthermore, the reading goes into the many ways that artists use  interactive media. From experimental installations to immersive experiences, it demonstrates the limitless potential of artistic expression in the digital era. It emphasises the significance of user experience and technological affordability in producing meaningful interactive art pieces.

Overall, this reading talks about the different approaches that artists take in regards to Interactive Media. Also, it takes into account some of the things that you have to consider in order for your art piece to work.

A few weeks ago I stepped upon one big memory :

10 years since Flappy Bird has been taken down. What a time!

So, when we were required to make a game this is exactly where my mind went. The concept of the game would be the same but I want to make it NYU themed. Instead of the bird, it will be the falcon: FLAPPY FALCON!

In terms of potential challenges I will have to be careful with the code, but I have faith in myself! Let’s get to work!

For this week’s assignment I decided to do aa text with an interactive part.

First, I did the sketch and put the text in. I have to admit, it was difficult to choose the background color because I wanted something that would suit every single random color generated when you press the button. At first I thought of a beige, sand color but it did not look right. So, I decided to stick with black.

After that, I created a function for the mouse interaction.

I have to admit, I did not have much time to do this but this is the end result! All in all, I am pretty proud of my improvement on coding giving the fact that I started 4 weeks ago.

For the future, I want to figure out how to use other fonts as well.

The banality of evil design is everywhere. Don Norman’s argument is trying to prove that there should be thought behind every new idea. On top of that, there is also a need for some boxes to be checked before coming out with a new product.

This first chapter of his work reminded me of the book ‘Universal Principles of Graphic Design’ by Jill Butler and how there are certain instructions when it comes to good design.

Since my arrival at NYUAD in August, I have encountered several instances of design oversights within the campus environment. For instance, the positioning of football court seats on the incorrect side of the field exposes them to relentless sunlight, diminishing their utility and comfort. Similarly, the placement of the alarm button adjacent to the toilet flush button presents a comical yet concerning scenario, where inadvertent activation could disrupt the tranquility of the Arts Center.

All in all, I believe that good designers think ten times before coming out with a product. It is better to think twice at first than having to deal with redesigning it over and over again.

In the provided text, Chris Crawford goes into the complexities of interactive media, attempting to create a specific definition while distinguishing its numerous manifestations.

In my opinion, there is a need for a broader appreciation of interactive media, which is often misunderstood as essentially superficial. However, I am confident that beyond its surface lurks great depth and importance.

Finally, I encourage for collaborative initiatives to help individuals and communities get a better knowledge of this fluid industry.

For this assignment, I decided to take my previous work and try and make it interactive. I have to admit that it took me longer than expected but I eventually got there.

First step was the code. I had to find a way in which I could create firstly a ball that was moving on the screen. After that, I just had to make a bunch of them and make them move in different directions.

I decided to make the colors of the circles random because I thought it might end up being colorful, which it did.

Regarding challenges I think that the constructor was the thing that took me longer but I eventually made it work.

END RESULT:

After looking for some inspiration from the books that we were assigned to look at, I have found one that was realistically possible for me to recreate. Even though the ones in the book were very interesting looking, I decided to take a different direction and make it my own in a way.

I have got to admit, I needed help from the internet. So, I started watching some tutorials on how to make it.

After some hours, this was the outcome!

As you can see, they are slightly decreasing by almost each line. At first, they had a triangle shape but I tried to zoom them in to make this effect.

It was a little bit difficult to understand the algorithm but once I got it I was able to make this.

I named it ‘Bubble staircase’ because I thought it fits the theme pretty well!

Digital art has always been criticized because of its algorithm, as it challenges the old-fashioned traditions of painting, making music, videos et cetera. I believe that Casey Reas’ Eyeo talk on chance operations is a good argument on why modern artists still remain artists.

The way he is trying to explain the whole documentation process that has to happen in order for digital art to be created is very valuable. We do not only hear about the steps, but also we have the chance to see everything that goes behind digital art.

My favorite part of the talk was when he quoted the fact that ‘ a chance is always planned’, meaning that without the person, everything would just be a random code that has no beginning and no end. The human is what makes it have value.

In the end, I have to admit that after having watched this video I can certainly say that I have gained more respect towards digital creators.

For the first assignment I decided to go for a simple self portrait. Not knowing how to code a lot, I went with the flow and took it easy.

I started with a beige ellipse and from there slowly created the whole face. After that, I went for a rectangle for the hair.

This was the end result!