Midterm – Mohamed Sunkar

Overall Concept

links:

https://editor.p5js.org/mss9452/sketches/OTs6tFggnA

https://editor.p5js.org/mss9452/full/OTs6tFggnA

For my project, I redesigned the classic Snake game, with more focus on the atmosphere and visual experience rather than just the gameplay. For the design I added geometric patterns for the background with music playing as well. The game also changes themes by pressing the t button to either light or dark. Instead of the usual blocky snake I made it with a glowing circular shape to represent light movement through an environment.

I wanted the experience to feel somewhere between calm and intense. The background slowly shifts between geometric patterns, creating subtle motion without distracting from the game itself. At the same time, the gameplay remains simple and familiar, allowing the user to focus on both playing and experiencing the visuals. Overall, my goal was to take a very well-known game and transform it into something more immersive while still keeping it intuitive.

How the Project Works / What I’m Proud Of

The game is built using p5.js and uses object-oriented programming to organize the main elements. I created separate classes for the Snake and the Fruit, which made the code easier to manage and extend. The snake moves across a grid system, updating its position each frame, while collision detection checks for walls, self-collision, and fruit collection. When the snake eats the fruit, it grows, the score increases, and a sound effect plays to give feedback to the player.

One part I am particularly proud of is the visual design. I replaced the traditional square snake with glowing circular segments that create a layered light effect. This connects back to my concept of light moving through darkness. I also added two background images that slowly fade into each other, which gives the game a more dynamic and atmospheric feel without interfering with gameplay. The dark/light mode toggle was another feature I liked, since it allows the user to switch between two different moods.

Another aspect I think works well is the overall structure of the program. I used a game state system (start, playing, and game over), which made it easier to control what is displayed at different times. I also added background music and sound effects, which made the game feel more complete and interactive rather than just a basic version of Snake.

Code Snippets

Fruit interaction + sound

if (snake.getHead().equals(fruit.position)) {
  score += 1;
  snake.grow();
  fruit.relocate();

  eatSound.play();
}

Snake movement

move() {
  this.segments.pop();

  let head = this.segments[0].copy();
  this.segments.unshift(head);
}

Areas for Improvement / Challenges

One of the biggest challenges I had to deal with was the interaction between the different parts of the program, especially when incorporating new features such as the use of sound, images, and different game states. There was also the time when some of the functions were not recognized, as well as the issue with the game over screen not displaying as desired. This was easily solved by organizing the code in such a way that the state system is utilized.

Another challenge I encountered was dealing with the images and the sound files with the p5.js library. There was some difficulty with the formats as well as ensuring that the sounds do not overlap. This made me think more critically about the use of the sounds.

If I had more time, I would definitely consider incorporating some new features such as the difficulty level as well as the level. This would definitely make the gameplay experience more interesting. In addition to this, I would consider further improving the looks as well as incorporating some interactive elements. While the atmosphere is good, there is still room for improvement with regard to the gameplay experience.

Week 5 – Reading Response (mss9452)

From reading this I understood just how different “seeing” actually is from one person or entity to the next.

As a human, I don’t have to think about the process of seeing. I see a person, and I immediately understand a face, an expression, perhaps even an intention. But computer vision doesn’t see meaning, it sees numbers. The article clearly states that high-level image understanding is still a very difficult task, whereas low-level image understanding is much more feasible. A computer doesn’t see “a person walking,” it sees the differences in pixel values.

For instance, frame differencing involves subtracting one frame from another to identify movement. This seems so very mechanical in contrast to how easily we, as humans, can identify movement. Background subtraction involves comparing a live image with a pre-stored image of the background to identify what is out of place. As humans, we can easily identify a person regardless of how much the lighting changes. However, for a computer, lighting, contrast, and setup are very important.

One thing that I found particularly interesting is that rather than trying to make computers see the world as we do, the reading proposes that we design the physical world so that it is easier for the computer to see, using high contrast, controlled lighting, and reflective surfaces. This is a reversal of the situation, rather than trying to make the algorithm “smarter,” we are trying to make reality more computable. For me this is fascinating because interaction design is not just about the digital world, it is also about the physical world.

However, with interactive art, this is even more complicated. Tracking technologies can enable very powerful experiences of embodiment, such as in early works such as Videoplace, where silhouettes and motion become interactive elements. I find the concept of being able to have meaningful artistic experiences through simple detection technologies very appealing. The system does not fully “understand” the body but simply tracks enough information to react to it.

However, at the same time, the reading points out works such as Sorting Daemon, which emphasize surveillance and profiling. This was somewhat uncomfortable. The same technology that enables playful interaction can also extract, categorize, and analyze individuals. In the context of interactive art, being tracked can be very engaging. In other contexts, it can be very invasive.

I think it’s this tension that makes computer vision so potent in interactive media. It turns the body into data, but this data can either be expressive and interactive or controlling and analytical. As artists and designers, we’re not simply using tracking as a tool, we’re making choices about visibility and power.

This reading has made me more conscious of the fact that computer vision isn’t about simulating human vision. It’s about finding patterns that the machine can calculate. And perhaps it is interactive art that is where human vision and machine vision intersect.

week 5 – Midterm Progress (mss9452)

Concept:

For my project I plan on redesigning the classic game “Snake,” however I do plan on adding my own twists to the game.

In this game the Snake is represented as glowing circular outlines, moving like a light source.
For the background I intend to add islamic geometric patterns for the aesthetics, but I still haven’t implemented it yet.
More Features will be added to make the game more engaging and interesting.

UI Design:

Interactions remain the same as the classic game:

Arrow Keys to control direction
Mouse click to start/restart game
T key to toggle theme

I decided to keep interactions simple to preserve the familiarity of the game, in hopes that the visual redesign could shift the experience from purely arcade-based to more atmospheric and reflective. Additionally, there’s a time counter, to make players more aware of the duration rather than just the score.

Code Structure:

I tried making the program more organized by into different layers, where each part does a specific function. They are:

Game Logic: to handle movement, growth, collision and fruit spawning.
Rendering: for background, glowing snake, grid display and UI overlay
Interaction: to handle key input and theme toggling

I made sure to separate things to avoid confusion and to make adding additional features easier.

Uncertain / Complex Parts:

The thing I’m most worried about is adding sounds to the game as there are several different things that need it such as:

fruit collection
collision
background sound

There are several issues I’ve identified which include the timing of the sounds, possible audio restrictions and making sure the audio is not distracting.

To avoid this risk early on, I experimented with basic p5.js sound playback on its own. I tested playing simple oscillator sounds based on mouse interaction to make sure that:

Audio plays back properly after user interaction.
There are no console errors.
Sound playback can be controlled in short bursts.
Sound playback can synchronize with game events such as fruit pickup.

By testing sound playback independently before incorporating it into the full game logic, I avoided the risk of ruining the main system later on.

Week 1 – self-portrait

my concept: My self-portrait is a very simple one, I’ve gotten the idea of the shape from the koala example we’ve seen in class. I wanted to make it look cool (even though it didn’t go that well), so I added an interaction where a sword shows up. I’ve gotten this idea while playing a video game called “Elden Ring” where one of the characters would make swords show up.

A section of the code I feel a bit proud of is this:

if (hasSword && swordPosY < swordStopY) swordPosY += 6;
if (!hasSword && swordPosY > -200) swordPosY -= 6;

it was quite confusing getting it to work right, and took time for me to find a good position and make it work the way I want it.

How was this made: I tried keeping the portrait simple, so I mostly used things like ellipse, arc and rect from the references section on the p5 website. I also used AI to look for functions I could use with the swords, cause it seemed faster than me looking them up, it ended up giving me some functions that were quite new and complicated. from AI I ended up using the mousePressed() function to move the sword, which I remember we did see soemthing similar being used in last week’s class. Another function it suggested was lerp() which I didn’t use.

Reflection: I’ve never used Js before, so this was a new experience to me especially with the p5 library, where I got to learn how to arrange shapes and manage coordinates. Making a portrait from such basic things was really fun. If I had more time I would’ve tried adding another animation with the sword instead of it just dropping down. Another thing I could’ve done was making the facial expression more personal and less goofy. The last thing was making a better background like it being night with the moon and stars up there.