Author: Noura Alhosani

CONCEPT:
For my midterm project, I decided to combine my two favorite things together, SpongeBob and my childhood game Geometry Dash (which was my first inspiration for the game).
I decided to be more creative and create my own version of geometry dash using Spongebob as my main theme. Furthermore, instead of jumping over obstacles, you have to jump over SpongeBob characters.
The main goal of the game is to score as many points as possible by avoiding colliding with an obstacle; it’s pretty simple. I also added a twist to it; there’s a feature where you can fuel up the power bar by gaining more points, which leads to a rocket mode effect where you can collect double points but instead of jumping, you’re flying. For the characters, I decided just to use png images online, which I will attach to the website at the bottom; however, to incorporate shapes and colour, I decided to use shapes and gradients to create the theme of the background, including the burgers and jellyfish. I also used a Spongebob font for the text to add more to the aesthetic. To organize my codes, because at some point it got messy, I decided to create multiple files, for functions and classes, which made it a lot easier as I knew where everything was and it was most helpful in debugging anything if there was an error.

HIGHLIGHT:
The code I’m most proud of is probably the jellyfish part of the game because it handles more than one thing like spawning, moving, and removing jellyfish, while also checking for player collisions. It also has conditional behavior since the jellyfish can only cause the game to end when the player is in rocket mode. I had to redo the code multiple times as there were a lot of errors in the beginning and I had to update multiple loops. Additionally, it depends on variables like `isRocketMode` and `gameOver` from other parts of the game, which makes it more complicated to manage since it must stay in sync with the overall game.
here is the code:

function updateJellyfishObstacles() {
  // Spawn new jellyfish obstacles at intervals
  if (frameCount % jellyfishInterval === 0 && jellyfishObstacles.length < maxJellyfish) {
    let jellyfishY = random(70, height - 80);
    let jellyfish = new Jellyfish();
    jellyfish.y = jellyfishY;
    jellyfishObstacles.push(jellyfish);
  }
   // Update jellyfish obstacles and handle rocket mode collisions
  for (let i = jellyfishObstacles.length - 1; i >= 0; i--) {
    jellyfishObstacles[i].move();
    jellyfishObstacles[i].show();
    
    // Remove off-screen jellyfish
    if (jellyfishObstacles[i].offScreen()) {
      jellyfishObstacles.splice(i, 1);
      continue; // Move to the next jellyfish
    }
    
    // Only trigger game over if the player hits a jellyfish while in rocket mode
    if (jellyfishObstacles[i].hits(player)) {
      if (isRocketMode) {
        deathSound.play();
        gameOver = true;
      }
      
    }
  }
}

IMPROVEMENTS:
In the future, I would probably like to add more elements to the game as it gets repetitive. Also, if I had more time I would fix this upside-down section of the game, as I feel like it looks odd in some sort of way, since the obstacles are upside down but not the player. Moreover, I would also improve the way the obstacles are shown in the game, as I fear they aren’t visually clear or hurt the eyes when you look at it too long, and it is because its moving fast, however, if its too slow, the game would be easier.

Here is the game:

 

REFRENCES:
https://www.jsdelivr.com/package/gh/bmoren/p5.collide2D. (my collide reaction HTML)
https://www.fontspace.com/category/spongebob (font)
https://www.pngegg.com/en/search?q=spongebob (all my images)

Computer vision and human vision differ in interesting ways. While human vision is natural and intuitive, allowing us to recognize patterns and emotions effortlessly, computers need specific algorithms to make sense of images. For instance, what we instantly understand as motion or objects, computers detect through methods like frame differencing or background subtraction. I honestly find it intresting how rigid and task-specific computer vision is compared to our flexibility. Furthermore, to help computers “see” what we want, it uses techniques like brightness thresholding or background subtraction, and sometimes adjusts the physical environment by using better lighting or reflective markers.
Moreover, in interactive art, computer vision creates exciting new opportunities but also brings up ethical questions. For instance, Videoplace used computer vision to create playful, full-body interactions, while Standards and Double Standards used it to explore themes of authority and surveillance. However, a question that popped into my mind is that, when you consider the ability of these systems to track movements and gestures, do you feel like the line between creative interaction and surveillance can sometimes blur? This reminded me of the movie M3GAN, where AI uses computer vision to care for a child, but the surveillance becomes invasive. What if we might see something similar with interactive art or technology, where the systems that are meant to engage us could start to feel more like surveillance. Hence, it’s an interesting balance between enhancing the experience but also respecting privacy.

CONCEPT:

I couldn’t decide between a game or an artwork for my midterm project. However, I was playing on my phone, and there’s this one game that I still play to this day “Geometry Dash”. My siblings and I grew up around this game and we still love it to this day, and as the game design is basically shapes, I thought it would be the perfect game to try and re-create.

The main idea or goal is to control a character that moves through several/ repeating obstacles. The difficulty increases over time as the player’s score rises, with obstacles speeding up and appearing more frequently. There’s also a feature where the game randomly switches to an upside-down mode, adding unpredictability and complexity to keep the player more engaged.

Design:

So far, I haven’t really worked on the design but the layout of my game. I want to have a similar concept to the actual game, where the background is gradient, and changes colour that aligns to the beat of the background music and the obstacles. As for the obstacles, for now, I left them as simple shapes, rectangles, and spikes just to test everything out and see how it flows in the game. For the use of sound, I found online the original music used in Geometry Dash and implemented it in my game as well as adding a sound effect when the player dies. However, I still need to fix the background music so that when the player dies the song stops until he starts playing again, since I used the loop function it’s just playing over and over non-stop.

This is the inspiration for my design and how i would like it to turn out in the end.

User Interaction:

My user interactions are basically the player’s input in the game. The player must press the spacebar to jump. If the spacebar is held down, the player continues jumping until the key is released. As for my instructions and text, I’ve applied it in the beginning, so the game begins when the player presses the spacebar at the start screen. After a game is over, pressing “1” will restart the game. Moreover, I still need to work on the visual design of the Start page, as of now, I just left it as text. I’ve also added a score count which is displayed at the top of the screen, which increases by one as the player successfully passes an obstacle. In the game, the obstacles appear from the right side of the screen, and the player must jump to avoid them. Then the game randomly switches to an upside-down mode at higher scores, adding an extra challenge, but I still think I need to make it more complex and play around with the obstacles, as I fear the game might be too simple and boring the way it is now.

The Most Difficult Part of the Project:

The hardest part of making this game has been figuring out how to make the difficulty increase smoothly as I want the game to stay engaging throughout. I want the game to get harder as you play, but I also need to make sure it doesn’t become too hard too soon, to the point it just gets frustrating.

Collision Detection (When the Player Hits an Obstacle):

The other tricky part is making sure the game knows when the player hits an obstacle, especially the spikes.  For the spike obstacles, the spikes are drawn as triangles, but I treated them as if they were inside an invisible rectangle (called a bounding box) that surrounds the spike. This makes it easier for the game to detect if the player hits the spike. Even though the spike is a triangle, the game checks if the player touches the rectangle around the spike. I used the collideRectRect() function in p5.js. This function checks if two rectangles touch each other. Even though the spike is a triangle, the game uses a rectangle around it for simpler collision detection. If the player’s rectangle overlaps with the spike’s rectangle, the game registers a hit. The same goes for the rectangle obstacles.

How I Made It Less Risky:

To make sure the game doesn’t get too hard too fast, I tested how quickly the obstacles speed up and how often they appear. By setting limits on both, I made sure that the game gradually gets harder, but not too difficult right away.

Code so far:

Concept:

For this assignment, I honestly had no clue what to create, at first, I wanted to create generative text data; however, I couldn’t think of a sketch, so I decided to do visualization data instead. My concept was straightforward as I was still trying to understand the codes, so I decided to do a simple solar system, but the data wasn’t accurate it was just for the sketch and the placements in p5. I first started with a blank black background with the planets orbiting, which was too basic, so I decided to use the Lerp function, which I got my inspiration from Jheel’s assignment last week, to change the color to blue gradually. Furthermore, I added shooting stars and normal starts, to make it look more appealing.

Highlight:

The highlight of my code is the animation of the planets and setting the planets, as it was the hardest to figure out. However, the PowerPoint and previous in-class work helped a lot, and without them, I would still be trying to make it work.

// Draw and animate planets orbiting the sun
 for (let i = 0; i < planets.length; i++) {
   let planet = planets[i];

   // planet position based on orbit
   angles[i] += planet.speed;
   let x = sun.x + cos(angles[i]) * planet.distance;
   let y = sun.y + sin(angles[i]) * planet.distance;

   // Draw the orbit path
   stroke(255, 255, 255, 50);
   noFill();
   ellipse(sun.x, sun.y, planet.distance * 2);

   // Draw the planet
   noStroke();
   fill(planet.color);
   ellipse(x, y, planet.diameter);

   // Display planet name
   fill(255);
   textSize(12);
   text(planet.name, x + planet.diameter / 2 + 5, y);
 }

Reflection:

For improvements , as you can see the planet, are going out of the canavs, i tried fixing it by making the orbit smaller, but then everything look tight, so i left it as it is. Also I believe some user interaction would’ve been a great addition, as of now there isn’t any interaction, I should’ve maybe allowed the users to control the orbiting of the planets using the mouse, or maybe the shooting stars.

My design: