MY CONCEPT:

I made the decision to design a game for my midterm project in the style of the vintage game Fruit Ninja, which was hugely popular a few years ago. I chose Fruit Ninja because it was known for its simple yet addictive gameplay. In the original game, fruits are thrown into the air, and the player must slice them by swiping across the screen. The goal is to slice as many fruits as possible while avoiding bombs. If a player slices a bomb or misses multiple fruits, the game ends. The game progressively increases in difficulty as more fruits and bombs appear on the screen while the timer is running out.

In my version, the game remains similar to the original concept, but instead of swiping, the player uses the mouse to slice fruits as they are thrown into the air. However, I’ll be adding a ninja using a splice sheet, which will make it more fun for the user to interact with. As the game progresses, more fruits and bombs are thrown to increase the challenge. Each sliced fruit increases the score, but if the player slices a bomb, the game ends instantly. My version also gradually increases the difficulty over time by speeding up the fruit and bomb spawn rate, which is a similar addictive experience to the original Fruit Ninja. Also, I’ll be adding music in the background and sound effects for the fruits being sliced and the bomb being triggered. Overall, the goal of the game would be for the user to earn points and beat there high score. It sounds boring, but the interactions within the game are what will make it fun.

In terms of design, I aimed to keep the visuals simple yet engaging, with vibrant fruit images, smooth animations, and a clean background. I wanted to add fruit-slicing effects, which include splatters, to make the game feel dynamic and immersive, similar to the original Fruit Ninja experience. Also, I want to create explosives when the bomb gets triggered. For the background, I will keep it similar to the original game by adding wooden planks. As for the texts, I want to make them bold red or colorful like the fruits (still deciding) and also have them in Japanese text style. Also, as I said, I will incorporate music to make the game lively and as fun as the real game.

USER INTERACTION:

User interaction is central to the experience of my game. Players will use the mouse to slice fruits by hovering and clicking across the screen. The simplicity of using just one hand to interact makes it easy to pick up, while the increasing challenge keeps it engaging. The addition of the ninja character and slicing animations adds a layer of fun to the interaction. As players progress, they’ll need to be more precise and quick as the number of fruits and bombs on the screen increases. Also, I wanted to add something like a bonus fruit, where it would have more value than the other fruits and power-ups to keep it fun. The mouse-based game offers a fluid way to engage with the game, making the experience more immersive. Sound effects will provide immediate feedback for actions, which will make the user’s interaction satisfying while slicing or the warning of an approaching bomb/exploring.

MY MOST COMPLEX PART:

My game’s most challenging component is making sure the game ends smoothly and without needing a page refresh while managing the sound effects. That’s why I’m going to add a gameEnd flag that stops all in-game events, like fruit and bomb spawns, and shows a game-over screen when a bomb is cut or the timer runs out. Background music and sound effects will stop when the game is over, giving the player a clear break. Im also going to add a way to start the game over again from the screen that says “Game Over.” This way,  the user won’t have to refresh the page. Another challenge is ensuring that multiple sound effects, such as slicing fruits and triggering bombs, don’t overlap or cause audio clutter. In order to avoid this, I will manage sound channels and test various scenarios to make sure the sound effects are smooth and don’t collide, enhancing the overall user experience. In the end, I’m still looking for ways where this can successfully go smoothly, and this is what I’ve come up with so far regarding this issue.

MY PROGRESS:

This is just the base of my game. As you can see, the game is still not smooth, and the fruit is getting thrown everywhere; however, I’m still adjusting to it to make it work better. I just incorporated the fruits, the bomb, half of the test, and the background. I still need work on it by adding sounds and the ninjas to finalise this code, as well as fixing on the smoothness issue. Also, I’m still working on the instruction page and how the user can go on from that.

 

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:

 

 

After reading, my initial thought was how, in the real world today, we are always competing to make inventions that already function smoothly look fancy and aesthetically futuristic. This causes us to overlook the importance of simple designs that just work. The examples given in the text, like doors, switches, and stoves, are good examples of how, in today’s world, simple objects can become confusing when designed poorly just for the sake of appearance. In my opinion, I appreciate good design when it works easily, rather than the overcomplicated ones that frustrate me. For example, when he talked about his friend’s experience with a door, it really stood out to me because it shows how humans can take something simple and turn it into something people struggle with, which is also frustrating.

For me, it’s annoying when designers care more about how things look than how they function. It feels like they’re taking away the object’s purpose. It’s not just me who feels this way, because older generations also struggle with this. They have a hard time catching up with how the world functions now, so adding complexity to something that’s supposed to be simple just makes it harder for them. Sometimes it feels like designers expect us to admire their work without caring if we can actually use it. What’s the point of a nice-looking door if I don’t know how to open it? This applies to all kinds of things, not just objects, but whether it’s a phone app or a media project, it needs to be easy to use.

In today’s world, many products are designed with minimalism in mind. While they may look cool and modern, they often hide important functions. For example, take Kim Kardashian’s sink design in her house. The sink looks cool and ultra-modern, but it’s confusing because it doesn’t function like a regular sink. The surface is completely flat with no visible basin, and the water drains into a small slit. While the design looks unique and futuristic, it takes away from the sink’s practicality. When I saw it for the first time, my first thought was, “How does the tap work?” This is a perfect example of minimalist design taken too far, where the design hides or complicates something as simple as a sink’s basic function. The goal of making something aesthetically pleasing can actually make its usability hard and confusing.

Overall, I think the ideas of “discoverability” and “understanding” are important when it comes to the process of designing something. Discoverability helps someone figure out what to do, while understanding helps them know how it works. To me, these two concepts are essential to good design. This also applies to the media work I want to do. If something isn’t clear, the message gets lost. Good design should be so simple and natural that you don’t even think about it. That’s something I want to keep in mind for any future projects I create, whether in film, media, or design. In the end, I think it’s important not to overlook the balance between how something looks and how well it works.

CONCEPT:

For this assignment, I wanted to create generative art that involved text. While searching for inspiration, I came across Scott Garner’s work on Creative Blog, where he used p5.js to create an art piece with stars forming text against a night sky backdrop. This inspired me to explore how stars, randomness, and interaction could be combined to form dynamic, visually engaging text. For my piece, I will create stars that will scatter and form text shapes based on user interaction, blending order and randomness, just like Garner’s example. Ill also make it a space theme while exploring Gaussian distribution to add in the art background.

EMBEDDED SKETCH:

HIGHLIGHT OF MY CODE:

The best part of my code is the interactive switching feature that lets people switch between an arranged text and scattered stars. When you click on a button, this interaction starts. It’s a dynamic, responsive experience where stars move from randomly scattering to making a word. This is how the code works:

// Function to scatter the white dots randomly across the canvas
function scatterDots(canvasWidth, canvasHeight) {
  whiteDots.forEach(dot => {
    dot.currentX = random(canvasWidth);  // Set random x position within canvas width
    dot.currentY = random(canvasHeight);  // Set random y position within canvas height
  });
}

// Function to reset the white dots and stop forming the text
function resetDots() {
  formingText = false;  // Stop forming the text
  scatterDots(500, 500);  // Scatter the dots randomly across the canvas again
}

// Detect mouse presses and trigger button actions
function mousePressed() {
  buttons.forEach(button => {
    if (button.isClicked(mouseX, mouseY)) {  // Check if the button is clicked
      button.action();  // Execute the action tied to the button
    }
  });
}

In the code snippet shown above, I used three key functions to create interactivity and movement:

1. scatterDots(): This function scatters the white dots randomly across the canvas by assigning each dot a random x and y position within the canvas width and height. It adds randomness, simulating stars in the sky.
2.  resetDots(): This function resets the dots to scattered mode by setting ‘formingtext’ to false and calling again scatterDots().
3. mousePressed(): This function detects mouse presses and triggers button actions when the user clicks on the canvas, adding interactivity.

I used these functions to let users switch between random scatter mode and text formation mode based on button clicks. I figured out how to implement these by looking back at class PowerPoints and just experimenting until I got it right.

REFLECTION:

When I think back on this assigment, I like how the stars and the shooting star worked together to make a lively and interactive visual experience. The way the stars scattered and formed the text was just the right mix of randomness and order, just the way I imagined it would be. It looked more real and unpredictable because the shooting star moved in a Gaussian way.

For future updates, I’d like to look into adding more complex interactions. For example, users could drag to control how the stars or shooting stars move. In addition, improving the shooting star trail could make it look more real by making it fade more smoothly over time.

REFRENCES:

Garner, S. (2016, August 10). Explore creative code with p5.js. Creative Bloq. https://www.creativebloq.com/how-to/explore-creative-code-with-p5js.

 

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: