• Describe the overall concept of your project (1-2 paragraphs)

For the midterm project, I’m continuing to develop the “SURVIVE” game I created in week 3. The game concept is based on many retro games such as space invaders. The goal of this interactive video game is to avoid oncoming RGB-colored missiles while the user controls a triangle at the cursor. The objective of the game’s endless mode is to live for as long as you can and obtain high scores. To go with the retro theme, I made the main menu also styled like an arcade game. The sound effects I chose were also intended to give off a retro vibe.  The soundtrack is energetic and upbeat which matches the type of feel I wanted the gameplay to have.  

 

 

• Describe how your project works and what parts you’re proud of (e.g. good technical decisions, good game design) 2-3 paragraphs

The projectiles are all separate objects that have collision detection with the player. The timer counts up and the bullets’ speed increases the more time passes. To make the game easier to browse, I also incorporated a variety of menus. There is a main menu and a game-over menu included. I also added a Highscores menu that keeps track of the player’s scores locally (in the browser) and sorts them from highest to lowest. The gameplay has been enhanced by adding 3 new mechanics. Shield and Slowdown which are powerups and Clear which is an active ability. Picking up Shield allows the player to be able to take collide with an incoming projectile without losing any HP. Slowdown, when picked up makes the projectiles move in slow-motion for a short duration. Clear can be activated by pressing space or mouseclick, and it emits a blue circle around the player which neutralizes all incoming projectiles that collide within the circle.

Finding the right balance with regard to the power-up spawn frequency and clear cooldown is something that I found to be very interesting. For the game to have the right amount of challenge while not making it too easy is surprisingly a hard balance to find. This naturally took a lot of trial and error to find a frequency that forced the player to actually play the game and avoid the obstacles while also keeping them frequent enough to where the player gets to use the power-ups multiple times a playthrough. With Clear being an active ability the player can trigger it was vital to not make the cooldown time too short as it would make the game too easy, I settled on around 20 seconds. This amount of time makes the player heavily consider the opportunity cost of using the ability which makes the game more engaging.

I am also proud of how I structured the program to handle multiple menus. How organized or disorganized the code depends on the structure used. Each menu will be in its own if statement that tests the current “level,” as I chose to do. Currently, there are 4 different levels. These are the main menu, game over screen, high scores, and the actual game. The application can only retrieve information that is made available to the current level variable using this structure. As a result, developing game features is considerably simpler and easier. It also makes it so that the program does not have to go through every line of code as it is restricted to levels, this reduces the amount of processing power required.

• Describe any problems you ran into (1-2 paragraphs)

I ran into problems with the Highscores function of the game. Initially I thought that it would be possible to write directly to an uploaded txt file in p5js. When I was researching online I saw that most people were using savestring() to do this. However, when I tried it, the file would just download onto my browser but not change the already uploaded txt file which I was reading from. I had tried a few more functions but to no success. So I opted for a local storage solution that used storeitem() and getitem(). These functions would store all the data locally on your browser and would stay after multiple sketch resets. The main drawback with this approach is that it is locally stored, meaning that players on other computers would not see the same high scores.

I also ran into a weird bug that I couldn’t figure out for a good while. When I was clicking on the return to main menu button it would take me to the high scores menu. This weird behavior did not make any sense when I looked at the code itself. But upon further investigation, I realized the problem stemmed from the mouseIsClicked variable I was using to interact with the buttons. The issue was that it would stay returning true as long as I held the mouse button down and I was within the range of the button. In addition to this, my return to the main menu button was in the exact same position as the high scores button in the main menu. So in reality the program was actually switching to the main menu, but in the split second in which I was holding down the mouse button, it would also activate the high score menu. I solved this problem but introducing a clicked boolean value and using the mouseClicked() function. This made it so that only one instance of true would be returned when I clicked on the mouse button.

 

Sketch links:

To play the game in fullscreen click this link -> Click Here to Play the Game

The project code -> Code

Overall Concept

Good day! I wanted to offer some information on a Doodle Jump game I made using p5.js. I truly adored playing this game as a kid. Trying to steer the avatar to leap on platforms and dodge obstacles was both thrilling and difficult. I can still recall how good it felt when I was able to jump higher and advance to new levels. However, playing solo was in a way boring, so I decided to make it two player game.

The objective of the game is to outperform your opponent. Both players control their Doodlers by using WASD keys and ARROWS keys. You compete against each other by getting up faster than your opponent. Whoever is left behind loses the game. On the way up you have obstacles such as monsters, UFOs, and black holes that can immediately kill you. Also, there are some pleasant surprises waiting on top such as boosters that speed up your way and make you invulnerable to the obstacles.

I’m pleased to inform you that I could effectively execute the game concept for my project. To improve the game’s realism and appeal, I included collision detection logic and gravity. Also, I took an effort to adjust the degree of difficulty such that it was demanding without being overly unpleasant.

Implementation and Design

How this project works

Welcome to Two Player Doodle Jump, the classic jumping game with a twist! In this game, you and a friend will control your own doodlers using WASD or ARROWS keys as you jump higher and higher.

But wait, there’s more! We have three different themes for you to choose from: Original, Ancient Egypt, and Easter Egg. Each theme has its own unique obstacles and designs to keep you entertained.

But beware, the journey to the top is filled with obstacles such as pesky monsters and UFOs trying to knock you off course. Don’t worry though, there are also boosters scattered throughout the game to help you on your way. Look out for jetpacks that will give you a temporary boost in height and trampolines that will launch you even higher.

As you climb higher, the obstacles become more difficult to avoid, making the game more challenging and exciting. With every jump, you and your friend will be on the edge of your seats, trying to reach the highest point possible.

So, gather your friends and get ready to jump into action in Two Player Doodle Jump. Can you make it to the top and become the ultimate jumping champion?

Technical Design/Good technical decisions

The game starts with an instructions screen where players will be able to learn how to play the game and select the theme they want to dive into. By clicking on any of the dancing Doodlers, the game will start with the appropriate mode(doodler skin, boosters, monsters).

After choosing the skin, players start competing in the main game.

One of the most impressive technical decisions in the game is its use of the p5.js library’s built-in functions for creating animations and graphics. The smooth animation of the doodlers jumping, the movement of the obstacles, and the booster effects all demonstrate the quality of the game’s technical design. Additionally, the use of different colors and themes for each level shows how I paid close attention to the visual design of the game.

Another notable technical decision is the game’s use of the keyboard as the primary control method for the doodlers. The use of WASD and ARROWS keys for the two players makes it easy to pick up and play the game without requiring any complicated controllers or devices. The control scheme is intuitive and responsive, which makes for a more enjoyable experience overall.

Furthermore, the game’s procedural generation of obstacles is a testament to the thought and effort put into the technical design of Two Player Doodle Jump. Each level presents new challenges with different patterns of obstacles and boosters, keeping the gameplay fresh and engaging. A lot of different computations were considered while working on the obstacle generation. You don’t want the user to get stuck in an impossible situation, otherwise, user will get angry and stop playing the game

The implementation of the game’s scoring system is also a well-executed technical decision. The scoring system is simple yet effective, with players earning points for each jump they make. The game’s technical design is also notable for its effective use of sound effects. The sound of the doodlers jumping, the obstacle collisions, and the booster pickups all enhance the overall experience of playing the game. The sounds are not random and actually resemble the physical world that people live in.

In conclusion, Two Player Doodle Jump is a well-designed game with excellent technical decisions that have contributed to its success. The use of the p5.js library’s built-in functions, the use of the keyboard as the primary control method, the procedural generation of obstacles, the scoring system, the effective use of sound effects, and responsive design are all examples of good technical design decisions.

Good Game Design

The availability of various characters to pick from increases the game’s originality and diversity is one of the things I’m most pleased about. I also included boosters that assist the player in making bigger jumps and scaling greater heights. In order to provide a personal touch, I left a particularly humorous message at the game’s conclusion. All the boosters are different depending on the doodler that is selected. That way the theme of the doodler stays the same. However, it was a bit tough to have all the pictures of the same dimensions(you can see in the game that some boosters are bigger than others). Nonetheless, even if it is not the same, it adds more of a personal touch to the game by being random and not symmetric(Who said that everything should be symmetric? xd)

After I let a few of my friends test the game, they gave me a few hints on what to improve/make clear. Apparently, it was not clear who is WASD player and who is ARROWS player, so instead, I named them player 1 and player 2 at the beginning of the game and at the game over screen. This made it clear to the players who won, so they didn’t have to map the keys and numbers themselves

In addition to that, a few of my friends pointed out a case where the game was breaking if one of the doodlers picked up the jetpack and the second one didn’t. I found the flaw in the code and was able to fix it straight away. I learned that even though I thought of myself as an expert there is a still possibility of an error that I could not catch. Hence, user testing is a perfect solution to make sure the game works as intended.

Potential Improvements and Challenges

I did, however, have certain difficulties in the course of the work. Implementing the collision detection mechanism correctly took me some time since it was so challenging. In the below code, I had to iterate in a reverse manner in order to check if the doodler was on a specific platform. According to the platforms the direction of the doodler may change and the game ground level changes so that game shifts up.

for (let p of [...game.platforms].reverse()) {
        // checking if doodler on the platform then change it to the ground, this.r/3 needed to cut the nose of the doodler and not count it
        if (
          this.y + this.r <= p.y &&
          this.x + this.r / 3 >= p.x &&
          this.x - this.r <= p.x + p.w &&
          this.dir == 1
        ) {
          this.g = p.y;
          break;
        } else if (
          this.y + this.r <= p.y &&
          this.x + this.r >= p.x &&
          this.x - this.r / 3 <= p.x + p.w &&
          this.dir == 0
        ) {
          this.g = p.y;
          break;
        } else {
          // ground is the under the screen
          this.g = game.g;
        }
      }

I also had to make sure that the game mechanisms were balanced to provide the gamer with a demanding experience without making it too difficult. The toughest part was to make update the amount and type of platforms depending on the score of the game. I created 3 thresholds for simplicity that represent 3 levels of difficulty. The higher you go the less easy-green platforms spawn, fewer platforms in general spawn, and more white types of platforms that disappear once you jumped on them. This way, the game keeps being interesting without looking to easy for the players.

// last level of platforms
if (game.score > 100000) {
  
  // maintaining playable game logic
  while (game.platforms.length <= 7) {
    
    // randoming y position but making it possible to jump
    this.tmp_y =
      game.platforms[game.platforms.length - 1].y - int(random(100, 150));
    if (this.tmp_y > 70) {
      this.tmp_y =
        game.platforms[game.platforms.length - 1].y - int(random(50, 70));
    }
    this.tmp_x = int(random(0, WIDTH - this.w + 1));
    
    // counting the number of white platforms
    let count = 0;
    for (let p of game.platforms) {
      if (p.c == "white") {
        count += 1;
      }
    }
    
    // if their number is less than 2 then add them and call the monster method
    if (count < 2) {
      game.platforms.push(
        new Platform(this.tmp_x, this.tmp_y, 100, 20, "white")
      );
      this.monster();
    }
    
    // based on random add either darkblue or green platform and call the booster method
    else if (int(random(0, 10)) > 7) {
      if (int(random(0, 2)) == 0) {
        game.platforms.push(
          new Platform(this.tmp_x, this.tmp_y, 100, 20, "darkblue")
        );
      } else {
        game.platforms.push(
          new Platform(this.tmp_x, this.tmp_y, 100, 20, "green")
        );
        this.booster();
      }
    } else {
      game.platforms.push(
        new Platform(this.tmp_x, this.tmp_y, 100, 20, "blue")
      );
    }
  }
}

// second level of platforms
else if (game.score > 50000) {
  if (game.platforms.length <= 10) {
    // randoming y position but making it possible to jump
    this.tmp_y =
      game.platforms[game.platforms.length - 1].y - int(random(20, 100));
    if (this.tmp_y > 70) {
      this.tmp_y =
        game.platforms[game.platforms.length - 1].y - int(random(40, 70));
    }
    this.tmp_x = int(random(0, WIDTH - this.w));
    
    // counting the number of brown and blue platforms
    let count = 0;
    for (let p of game.platforms) {
      if (p.c == "blue") {
        count += 1;
      }
    }
    
    // if their number is less than 2 then add them and call the monster method
    if (count < 2) {
      game.platforms.push(
        new Platform(
          this.tmp_x,
          this.tmp_y - int(random(20, 50)),
          100,
          20,
          "blue"
        )
      );
      this.monster();
    } else {
      game.platforms.push(
        new Platform(this.tmp_x, this.tmp_y, 100, 20, "green")
      );
      this.booster();
    }
  }
}

// first level of platforms
else {
  if (game.platforms.length <= 12) {
    // randoming y position but making it possible to jump
    this.tmp_y =
      game.platforms[game.platforms.length - 1].y - int(random(30, 60));
    if (this.tmp_y > 70) {
      this.tmp_y =
        game.platforms[game.platforms.length - 1].y - int(random(20, 70));
    }
    this.tmp_x = int(random(0, WIDTH) - this.w);
    
    // based on random green platforms and call booster method
    if (int(random(0, 11)) > 9) {
      game.platforms.push(
        new Platform(
          int(random(0, WIDTH - this.w)),
          this.tmp_y - int(random(20, 50)),
          100,
          20,
          "green"
        )
      );
    } else {
      game.platforms.push(
        new Platform(this.tmp_x, this.tmp_y, 100, 20, "green")
      );
      this.booster();
    }
  }
}

Overall, building a Two Player Doodle Jump game using p5.js was rewarding, and I hope that others will find it as entertaining as I did as a youngster.

The concept

The concept of this game is basically have a rocket fly up in the sky and eventually leave the earth’s atmosphere and go to other planets. There will be several horizontal bars on the rocket, and a line moving across the rocket. Whenever the line reaches the green bar, the user must click quickly. Based on how close the line is to the green bar and how well the user timed their click, the rocket will get a velocity boost.

The Current Implementation

I have tried several implementation by now, and faced several dead ends. In the beginning, I tried to make the rocket fly across the background, or keep the rocket stagnant and make the background move “downwards”.  But going to other planets and showing the whole game space would be difficult. Eventually, I ended up with the approach that I will draw the whole game space out first. I am doing this by making my canvas really long (500,5000). This means my rocket itself will be very tiny compared to the rest of the drawing. Then, I will play around with the Camera function available in p5js. The camera will be focused into the rocket at launch, and as it flies up, the camera will slowly zoom out. This way all the gamespace is already loaded into the game, and the camera will show different parts of it to the user.

Here is the initial game space that I have created till now.

function setup() {
  createCanvas(500, 5000);
  frameRate(10)
}

function draw() {
  background(0, 0, 30); // Set the background color to a dark blue

  // Draw shiny stars randomly across the canvas
  for (let i = 0; i < 1000; i++) {
    fill(255, 255, 255, random(100, 255)); // Set the fill to a slightly transparent white
    noStroke();
    ellipse(random(width), random(height), random(1, 5)); // Draw a small ellipse at a random location with a random size
  }

  // Draw a semicircle at the bottom of the canvas and a light blue glow
  noStroke();
  fill(0, 200, 255)
  arc(width/2, height, 200, 200, PI, TWO_PI); // Draw a semi-circle at the bottom of the canvas
  stroke(0, 200, 255, 50); // Set the stroke color to a light blue with low opacity
  noFill();
  strokeWeight(5);
  arc(width/2, height, 215, 215, PI, TWO_PI); // Draw a slightly larger semi-circle on top to create a glow effect
}

Possible Challenges

This is the first time I will use the camera feature in p5js and thus making sure the game play is smooth while using the camera will definitely pose some challenges. I might face more issues when implementing the line moving into the green bar on the rocket feature, as I am still not sure what will be the best way to approach this, such as should the rocket and the green bar be separate object or not, or how will I move a line across a moving rocket which is in a moving frame. All these different moving parts will be difficult to manage for sure.

For my midterm project, I was inspired by “Everything is Temporary” by Joe Pease. You can find the link to the work he has done here:

In order to capture the same feeling that the video gave me, the temporariness of the surroundings, combined with the life going on in its own chaotic and messy way, even if we engage, if we don’t, and even if we try to. This temporary feeling is everpresent, when the weird realization hits us at a party, in a room of friends, and on the shore sitting at the edge of Saadiyat or being in the view of a beautiful mountain.

Therefore, I will be creating an interactive artwork where there will 3 rooms (as of now) with the following compositions. There will be available actions to the user which they will be briefed on before being put inside the room. The idea is to allow the user to have a set of actions, while the output of those actions not being what they wanted or tried to achieve at all, hence achieving the temporary feeling by highlighting our powerlessness in the outcomes of our choices.

Room 1: The rave

(room created through pattern making in p5js)

I basically want a room that is loud and chaotic with the sensory overload of voices and visuals in this room. The visuals will be produced by p5js using shapes and color contrast with respect to a black background, with the sound being outsourced from the internet. The user will be allowed to use right, left, up, and down arrows to go to any area of the screen. Depending on the area the user moves to on the screen the visual and sound will get amplified or toned down but never disappear.

Room 2: The home

(room created by a background of a picture)

I want to capture the chaos of home, where at one point the self seems to be disintegrating and lose its meaning in the face of the community. For this room, I will be using a picture that is dear to me (not the one provided here) in which all my friends are hanging out in my room in a chaotic manner. The user will be given the option to be able to “speak” (printing words on screen) however the voice of chattering will be exponentially rising as more attempts to speak are made, in which the users “seem” to be drowning.

Room 3: The nature

(room created by drawing a mountain using p5js)

I want to capture the serenity and calm of nature. My initial idea is to create a simplistic drawing of nature using p5js which looks mountainous and pristine. There is a small snowfall, and the user is given a specific set of input keys to make a fire. After the fire is set by the user, the snowfall seems to get faster and faster, covering every part of the “vision”, hence the screen.

In this assignment, I knew that I wanted to combine the process of creating a poem and going through a huge data chunk. Moreover, I was repeating Edgar Allan Poe’s poem Annabel Lee, for some time before making this poem. That’s why I decided to make a alt version of the original poem. In order to find what kind of data to incorporate into the data, I have went through data sites, and found a data set for a range of colors (1500+) with their rgb values. Thus I have decided to choose 2 colors from this set randomly and put it inside the first and third line of the 4 lines I chose from the main poem.

However for me it was important to have a type of data visualization in, so I wanted to do that by mapping the two colors of each poem on the screen like a gradient where the bottom of the screen would have one of the colors and slowly as it went up the screen it would transition to the other color. I achieved this by using lerpcolor and mapping the height of the y position in comparison to the bottom color, and drawing that color on screen line by line.

It was fun to try out different ways of having the colors on the screen, with huge bands, with gradient, in response to the speed of the mouse in the y-direction.

I feel that the main challenge was having also the poem written on the screen. I got the feeling that commanding the text, in terms of font, and coloring and filling, was hard to navigate and hard to preserve in response to the mouse’s position. I feel that understanding the dynamics of text function in relation to rest of the drawing functions that are available in p5js will be my challenge.

Link to p5js:

https://editor.p5js.org/iremnaz/sketches/xrBpShmUv

For this piece which had to incorporate arrays and objects, I was inspired by the poetry book called “the sun and her flowers” by rupi kaur. While I was looking around at my desk, in order to get inspired on what to work on, my eyes got fixated on the cover and at that moment I decided that I wanted to do something that incorporated the book into my code, as my life has been entangled with the book up to that point.

Hence I first started by designing the sunflower class. The hardest part for me in this was making small circles that would form a silhouette of a circle altogether in the middle of the sunflower. The math to figure out to make sure that the final shape was also a circle took some time as well as trial and error, as even when I incorporated the right math, sometimes my results would be different due to misusing other commands (such as int()). After being able to make the middle of the sunflower, the petals were similar to drawing as it was an iteration of the ellipses in an angle around the middle of the flower. For an artistic choice, I decided to make them a range of yellow with also a range of transparency, so that it would give a feeling for the range of differences between flowers, hence adding to each one of the flowers’ uniqueness.

After finishing up the flower object, I worked on the sun and moon which share the same class, and this was pretty straightforward to make by making the constructor pass on the starting location of the sun and moon as well as their color, the rest of qualities for the two were common.

One thing I decided later on was making the flowers move downwards as the sun went out of the frame and the moon came, while the background darkened. This was particularly hard, as the making of the petals, center, and stem for each flower was unique, and while going down they should not be changing in each frame. Trying to figure out the mechanics of this, defining its most central variables in the constructor while the actual drawing happening was in the draw function of the sunflower took some time to perfect, but in the end, I was able to print each flower going down while keeping the same composition for petals and stem, while the middle would be dynamic, giving in a way more life to the flowers.

Link to p5js:

https://editor.p5js.org/iremnaz/sketches/YpKfMJJaH

For this assignment, we had to use loops for and while to create or create an artwork. As I did not have any specific artwork that I wanted to make and go for, I experimented with three different shapes (circles, rectangles, and lines) in order to get more comfortable with how to construct them and what to expect. Therefore, I randomized which shape would be printed, and in what size and in what color in order to get different compositions each time the mouse was clicked.

I really enjoyed the making process of the piece, as I realized I was not so sure what would come out in the end either due to my unfamiliarity up to this point. So, I was able to play around with some parameters to see what kind of output I would receive by tinkering with them. After printing more and more patterns after altering another parameter and another, the pattern I was seeing was reminding the cubism form that marks Picasso’s art style. Since I enjoyed connecting it to reality like that, I decided to keep the artwork as it is.

The biggest challenge for me, in this case, was not what to print but how to print. I was struggling on figuring out how to achieve multiple patterns. In the draw function, the patterns would move very fast that it was staggering. On the other hand, the setup would have to be run repeatedly. Therefore I have finally decided to incorporate the mouse-clicked function to loop the pattern code that resides under the draw function. This way I was able to receive multiple patterns in a way more accessible manner.

Link to p5js:

https://editor.p5js.org/iremnaz/sketches/BLhDgFAOm

In this assignment, I tried to incorporate the basic shapes we covered in the first week of the classes. One of the things that captured my attention in the class was how the location of the mouse was integrated into the pieces for the exercises as well as other self-portrait projects I have seen on this blog! So I knew that I really wanted to do that.

In terms of the creative incentive I knew that I didn’t want to make my self-portrait not too human but also not so little. A highlighted experience for me while making this portrait was the fog that would cloud my effort and mind, most of the time, and would require serious and conscious effort to pass that over. Therefore I have made cloud shapes with a combination of multiple ellipses that hovers around the head in the darkness and move to the side when the mouse hovers into the middle.

The biggest challenge for me here was actually finding an idea. I felt that it was hard to choose an idea but also after finding it, it was hard to implement. I could feel while drawing the ellipses that I was uncomfortable with producing the desired shapes with shape functions that were available and for me, it was a big struggle to make the lines meet, and align each time.

The integration of the location of the mouse to the brightening of the background and dispersing of the clouds was a creative choice and compared to the actual drawing of the shapes was not that complicated. I feel that after experiencing these initial struggles with p5js I will be comfortable with creating the art pieces I desire.

Link to p5js:

https://editor.p5js.org/iremnaz/sketches/oxRGnv701