Month: October 2025

Concept

Food has always been something deeply emotional forme  a way to heal, connect, and recharge after long or lonely days. Whether it’s sharing a meal with friends and family or eating quietly in solitude, food always finds a way to lift the spirit. For me, food is more than just fuel; it’s comfort, joy, and sometimes even memory itself. Every dish I eat reminds me of a moment, a feeling, or a person.

But, of course, there’s another side to that relationship  those unforgettable moments when something unexpected shows up in your food: a hair, a fly, a worm, even a tiny stone. It’s disgusting, sometimes shocking, and yet  over time  it becomes something you laugh about. The idea for this project actually struck me when I once found a fly in my food. In that split second, my emotions bounced between anger, disgust, and disbelief and then, later, laughter. I realized how something so small could completely shift my mood and turn an ordinary meal into a story I’d never forget.

It also reminded me of moments with my grandmother. She used to cook for the whole family, and occasionally, there would be a stray hair in the food. Instead of getting angry, I’d turn it into a lighthearted joke so everyone could laugh. Those moments became cherished  not because the food was perfect, but because the imperfections made it real, made it ours. They were messy, human, and full of love.

Through my project, I wanted to recreate those shifting emotions  from disgust and frustration to humor and warmth. I tried to capture the entire emotional cycle we experience in those moments: the anger when something feels ruined, the creepiness of noticing something “off,” and the humor that comes when you finally laugh it off.

• Anger is portrayed through intense, chaotic visuals  like the “deadly” appearance of the dining hall, the harsh red tones.

• Creepiness comes through the eerie atmosphere  the bloody dining hall textures, dim lighting, and strange, almost horror-like visual style that makes you feel uneasy, the same way you feel when you find something in your food that shouldn’t be there.

• Humor ties it all together. I added funny instructions like “Ultimate Guide to impress Worm” that turns disgust into comedy. It’s a playful reminder that these moments, while annoying, are also absurd and relatable  something we can laugh about later.

To make it more personal, I brought in imagery from NYUAD  specifically D2 and the Library, two of my favorite places on campus. They hold countless memories of food, laughter, and friendship, so I wanted to reimagine them in my project. I took photos and used ChatGPT to generate artistic, surreal versions of these spaces  blending reality and imagination. The result is an environment that feels both familiar and eerie, mirroring that strange feeling of discovering something unexpected in what you love.

Lastly, I chose to use hand gestures as one of the interaction method because I wanted the experience to feel physical and expressive, not just mechanical. In real life, our hands are what connect us to food. We cook with them, eat with them, react with them. So, using gestures like moving the left hand to go left, right hand to go right, and closing the fist to jump feels symbolically and emotionally right. It mirrors how our hands instinctively respond when we’re disgusted or startled. We pull back, push away, or clench up.

While it might not be the most conventional control scheme, that’s precisely what makes this project unique  and artistic  rather than a simple computer game. The goal wasn’t to make a polished arcade game, but to create a more embodied experience  one that makes the player aware of their own physical reactions.

 

How to Play:

At its core, the project is an interactive game centered around a simple but expressive idea: defeat the worms that are being generated from right of the screen before they reach the end of the screen on left.

Players can interact with the game in two different ways:

Keyboard controls — using the arrow keys to move and jump: → to go right, ← to go left, and ↑ to jump.

Hand gesture controls — raise your left hand to go left and raise your right hand to go right. By raise I mean make your hand visible to the camera and when u don’t want to go say left make you left hand unvisible to the sight of the camera. If you make a fist or close your finger the girl will jump.

The basic rule is simple: jump over the worms to eliminate them before they cross the screen. Players have three lives, and if they manage to survive until time >= 900 (meaning the draw function has run 900 times) with at least one life left, they win.

At first, it might feel unintuitive, but as you play, it becomes surprisingly fun and natural  like you’re physically fighting off those unwanted “guests” in your meal.

Parts I’m Proud Of

The part I’m most proud of is integrating Machine Learning into a project that’s not only technical but emotional and personal. As a Computer Science major, I’m always drawn to exploring how technology can express feeling and creativity. Implementing gesture control allowed me to bridge art and code  to make something that doesn’t just work, but feels alive.

I’m also proud of how I personalized the experience. By using NYUAD-specific places like D2 and the Library, I rooted the project in a world I know and love. It gives the game a familiar atmosphere one that other NYUAD students can relate to  while still transforming it into something strange and artistic.

Areas for Improvement 

While I’m proud of how the game turned out, there are several areas I’d like to refine. The hand gesture control, though innovative, can feel slightly clunky at first. I’d like to make it more responsive and intuitive  perhaps by training the ML model with more data or maybe using ML to detect body that can say if a person is turning left or right and the character themself move left or right.

I’d also love to expand the visual storytelling. Right now, the “bloody” D2 gives the right kind of creepiness, but I imagine adding more levels or moods maybe transitioning from a calm dining scene to a chaotic food fight as the difficulty increases.

Problems that you ran into

While building the project, I faced a few interesting technical challenges that pushed me to think creatively about how motion and input are detected and processed.

1. Detecting when the hand is closed (fist gesture):
My first major challenge was figuring out how to detect when the user’s hand is closed. I wanted the “fist” gesture to trigger a jump action, but at first, I wasn’t sure which hand landmarks to compare. Eventually, I decided to track the index fingertip (keypoint 8) and the base of the index finger (keypoint 5).

The idea was simple: if the y-coordinate of the fingertip (hand.keypoints[8].y) becomes greater than that of the finger base (hand.keypoints[5].y), it means the fingertip is lower in the camera frame  in other words, the finger is curled in, forming a fist.

I used console.log(hand.keypoints[8].y, hand.keypoints[5].y) to visualize the values and experimented by opening and closing my hand repeatedly to see when the condition triggered. This trial-and-error approach helped me fine-tune the threshold for reliable gesture recognition. It was satisfying to see the jump action respond accurately once the logic clicked.

 

 

2. Managing repeated function calls with hand gestures:
The second issue was with repeated trigger events when using gesture control. Unlike pressing a key  which calls the action just once per pressraising a hand is a continuous motion, so the detection function kept firing dozens of times per second.

For example, calling girl1.jump() or movement functions using hand gestures caused the action to repeat uncontrollably fast. To solve this, I implemented a counter-based system and used a modulus condition to limit how often the action executes. Essentially, if the function was being called too rapidly, I only allowed it to execute once every ten calls.

Similarly, I adjusted the character’s movement speed when controlled by gestures. Instead of moving by this.speed_x each frame (which made her move unrealistically fast), I scaled it down to this.speed_x * 0.005 inside the update_Ml() function. This made her movement smooth and proportional to the natural pace of a hand gesture, giving the game a more balanced and controlled feeling.

This also applied to animation strip changes by updating them every tenth frame, the animation stayed visually consistent without flickering or overloading.

 

My Sketch :

view only screen link: https://editor.p5js.org/aa11972/full/b224cudrh

 

Inspiration

For this project, I want to create an interactive digital art piece that explores the true scale of reality by gradually zooming from large, natural environments down to microscopic and atomic levels.

Visual Elements

Flower Screen

• Add a tree, birds, more flowers, a grass field, and the sun for a fuller composition.

• Include animations such as swaying grass, apples falling from the tree, and birds flying across the screen to make it feel alive.

Leaf Screen

• Add details like insects, the stem, and a more zoomed-in view of the leaf.

• Animate insects crawling across the surface to bring a sense of realism.

Cell Screen

• Show multiple plant cells floating in a jelly-like substance.

• Design them to resemble real plant cells, with more detail and fluid animation.

Atom Screen

• Illustrate atoms with orbiting ellipses that cross over each other.

• Show the nucleus clearly, with protons and neutrons on display.

Interaction: Zoom Functionality

• Replace the two-finger pinch with a two-hand gesture for zooming, making it more intuitive and reducing accidental zooms.

• Add smooth zoom animations between levels instead of abrupt page changes, to create a more immersive transition.

Sound Design

• Integrate sounds that complement each environment:

  • Flower screen: natural ambient sounds (e.g., wind, birds).

  • Leaf screen: subtle insect sounds.

  • Cell screen: soft “jelly-like” sounds.

  • Atom screen: buzzing or electrical sounds.

• Add a “zoom-in” sound effect to enhance transitions

  (All sounds are sourced from Pixabay.com.)

Machine Learning

To enhance user interactivity, I incorporated machine learning using the ml5 library, which integrates well with p5.js and is relatively simple to implement. I set two thresholds, “close” and “far”, based on the distance of the user’s hands. These thresholds determine when the zooming action is triggered, making the interaction feel more natural and responsive.

Extra details and screenshots

I added a home page to show users the hand gestures and extra button functionalities.

Screen Recording 2025-10-07 at 00.17.22

Challenges

Coming up with creative ideas for this project was challenging, and implementing the zooming feature was especially difficult since I had never attempted it before. Getting it to work smoothly took a lot of trial and error.

This link from p5 was helpful – https://editor.p5js.org/mimimimimi/sketches/SOkckqY_r https://editor.p5js.org/Luxapodular/sketches/rk__bPdcm but also just experimenting with the ease in and out values to make the zoom as natural as possible.

// ===== TRANSITIONS =====
// initiate zoom transition between scenes
function startZoomTransition() {
  isTransitioning = true;        // flag to indicate transition is active
  transitionProgress = 0;        // reset
  
  // Play zoom sound for every transition at 50% volume (if not muted)
  if (zoomSound && !isMuted) {
    zoomSound.setVolume(0.5);
    zoomSound.play();
  }
}

// update for each frame
function updateTransition() {
  if (!isTransitioning) return;  
  
  transitionProgress += 0.03;    // increment by 3% each frame 

  //check if 100% (1)
  if (transitionProgress >= 1) {
    isTransitioning = false;     // stop transition
    transitionProgress = 0;      // reset
    currentPage = currentPage === SCENES.length - 1 ? 1 : currentPage + 1;
    playSceneSound(); // Play sound for the new scene
  }
}

// applies visual zoom effect during transitions
function applyCameraTransform() {
  // create smooth easing curve: slow start, fast middle, slow end
  const easeT = transitionProgress < 0.5
    ? 4 * transitionProgress ** 3      // first half: cubic ease-in
    : 1 - (-2 * transitionProgress + 2) ** 3 / 2;  // Second half: cubic ease-out
  
  // calculate zoom level: smoothly interpolate from 1x to 100x zoom
  const zoom = lerp(1, 100, easeT);
  
  // get the target point to zoom into for current scene
  const [x, y] = SCENES[currentPage].zoomTarget;
  
  // apply camera transformation:
  translate(x, y);     // move to zoom target point
  scale(zoom);         // apply zoom scaling
  translate(-x, -y);   // move back to keep target centered
}

final code – https://editor.p5js.org/kk4827/sketches/9CleTb6y1

The Sketch

https://editor.p5js.org/sc9425/full/RnrYJ2fls

Concept Development and Final Concept

I originally imagined this project more like a game, where users would have a limited time to quickly label memories as good or bad, and discard the bad ones to “win.” The goal was simple: clean up the mental space by getting rid of what weighs us down. But as I worked on it more, especially while curating the kinds of memories to include my perspective started to shift.

I realized memories aren’t always black or white. They’re messy, layered, and often emotionally ambiguous. A single moment can carry joy and pain, nostalgia and regret. So the project evolved. Rather than forcing users to judge a memory under a timer, I wanted to create a quieter, more reflective experience,  one where the user has gentle control: to reveal, sit with, or discard memories at their own pace.

For instance, I studied abroad in Paris and found it magical: exploring the city, trying new foods, feeling independent. But I recently came across a post by someone who had a completely different experience there. They couldn’t afford daily subway rides, had to walk 6.5 kilometers to class, and got by on snacks. For them, Paris wasn’t the city of love, it was a daily struggle. That contrast stuck with me. Same place, completely different emotional weight. And that’s what Mind Palace became about: subjective memories, and giving people space to decide what they mean and what to do with them.

In terms of the UI, I think I made meaningful improvements during development. Initially, I had a simpler design with a pink color scheme, thinking it would naturally signify the brain or mind because that’s the color of the brain icon. However, when I showed it to classmates, several of them were confused about what it represented. Based on that feedback, I decided to pivot. I found an actual artistic image of a brain online that better communicated the theme, and I reduced its transparency so it wouldn’t overpower the rest of the experience. This way, the background sets the mood and context without distracting from the interactive elements.

The previous design was:

The final design:

How It Works

The Mind Palace starts with a simple instruction screen. Once the user clicks to begin, memories, represented as floating film icons (often associated with memories), gently drift across the screen. 

The user interacts using just their index finger, tracked by the webcam. Initially, I had a gesture (open palm) to reveal a memory, but after feedback in class, I realized it felt a bit unituitive. So I simplified it, now just hovering over a memory for 2 seconds reveals it. It made the interaction smoother and avoided asking users to remember too many gestures.

Once a memory is revealed and the user has had a chance to read it, they can discard it using a thumbs-down gesture. I have made sure that users can’t just hover over and directly discard a memory without it being revealed, because then users will just be discarding random memories. To make the gesture recognition more robust and avoid accidental deletion, I also made sure users had to hold the thumbs-down gesture for a second, so it wouldn’t trigger accidentally.

For resetting the experience, I originally thought about using an “OK” gesture, like saying “I’m done.” But since reset is a pretty major action, and misfires could be annoying, I decided to keep it simple: users just press the Escape key. It also felt kind of full circle, like they press a button to enter and a key to exit. I focused on keeping things intuitive and reflective. I meant to give the user space to engage with each memory calmly, without rushing.

Each memory is intentionally ambiguous. For example: “The last message I never replied to”

This could evoke very different emotions depending on the person engaging with it. For some, it might feel empowering,  a sign of setting boundaries, moving on, or finally letting go of something that no longer serves them. For others, it might bring up guilt, anxiety, or a lingering sense of “what if.” That’s the heart of the project: recognizing that memories aren’t fixed in meaning. What feels like healing to one person might feel like avoidance to another. By keeping the memories vague yet emotionally charged, I encourage reflection, allowing each user to project their own story onto them.

I’m especially proud of implementing gesture recognition. It’s something I’d seen at IM showcases before, but I didn’t think I’d be able to do it myself. Understanding hand landmarks and translating them into reliable, smooth gestures took time, but I managed to make it functional and fairly intuitive. Here’s the core gesture logic I used:

function isThumbsDown(landmarks) {
  const thumbTip = landmarks[4];
  const wrist = landmarks[0];
  return (
    thumbTip.y > wrist.y &&
    !isFingerUp(landmarks, 8) &&
    !isFingerUp(landmarks, 12) &&
    !isFingerUp(landmarks, 16) &&
    !isFingerUp(landmarks, 20)
  );
}

function isFingerUp(landmarks, tipIndex) {
  const midIndex = tipIndex - 2;
  return (landmarks[midIndex].y - landmarks[tipIndex].y) > 0.05;
}

I also made some simple but thoughtful design choices like placing the webcam feed at the top so users can always see if they’re in frame. That helped during testing and made the interaction clearer.

Challenges and Improvements

Gesture recognition was a big concern for me. It’s surprisingly tricky to get right,  too strict, and gestures feel frustrating to perform (and even to code); too loose, and false positives ruin the experience. One major challenge was simply understanding the hand landmark system, there are 21 tracked points per hand, and it took a while to learn which ones corresponded to each finger joint and how to use them meaningfully in gesture logic.

At first, I tried more complex calculations for gestures, but it quickly stopped feeling intuitive. Users had to “perform” gestures perfectly, and the experience lost its flow. Now I’ve simplified it: instead of complicated checks, I just use the thumb and index finger landmarks in straightforward ways, plus a timing delay. For example, the thumbs-down gesture only triggers if it’s held for one full second. This makes it much harder for it to fire accidentally while still keeping the interaction easy and natural for users.

Another improvement  would be adding variety,  either by generating new memory phrases dynamically or letting users add their own. Right now, the memory list is static. Adding this level of customization could make each user’s Mind Palace feel more personal. I also think sound effects tied to each gesture (reveal, discard, reset) would enhance immersion and make the interactions feel more responsive.

 

Copy Paste To Browser For Full-screen Experience:

https://editor.p5js.org/AsmaAlMurr/full/i15QXvk3g

Overall Concept

My project, Majlis Madness, is an interactive game that introduces players to Emirati cultural traditions through play and memory.  The game is set inside a majlis, a traditional gathering space where families and friends share hospitality, food, and conversation. Instead of just learning about this culture through text, the game engages the player with a memory sequence challenge where they must remember the order in which Emirati snacks “glow” and then repeat the sequence, the player has three lives symbolized by a heart icon at the top left. The concept combines cultural storytelling and information with a fun, simple game design so that players learn something new while having an enjoyable experience.

Originally, my idea was to design the game around plants in a garden, where players would memorize the sequence of flowers. While this concept was visually appealing, it didn’t feel personal enough to me. I realized that using snacks in a majlis would be more meaningful, since it directly connects to my own cultural experiences and memories. Instead, I used its basic bones as a shell to create a better version of this game. This shift made the game feel more authentic and gave it a stronger connection to my Emirati traditions.

My Original Game Idea (Prototype):

Inspiration:

The design of Majlis Madness aims to blend visuals, sounds, and interactivity: background images depict the majlis, oud music plays in the background to create atmosphere, and traditional snacks like Vimto, laban, chips, and ice pops become the central objects of the memory challenge. This makes the project both playful and informative, highlighting how cultural spaces like the majlis combine hospitality, tradition, and fun.

On a personal level, I feel a deep connection to the majlis because it has always been at the center of family and community life for me. Growing up, it was the place where I learned the value of gathering, listening, and sharing food. By recreating it in my game, I wanted to honor this space and give players a sense of its warmth, cultural meaning, and social importance. For me, the project is not only about coding a game but also about carrying forward traditions that shaped my own experiences.

For the background of the game, I was inspired by the traditional majlis setting, with its patterned carpets, red cushions, and lanterns that create a warm, communal atmosphere. This space felt like the perfect environment to represent Emirati culture, since the majlis is where people come together to share food, stories, and hospitality. 

For the sound design, I wanted it to feel authentic and true to the spirit of the majlis. After struggling to find the right audio online, I decided to ask a few local friends for inspiration. Their suggestions helped me discover tracks that carried the warmth and cultural depth I was aiming for, which made the game atmosphere feel much more genuine. I decided to stick to the classic tradition of the oud instrument as that is what both my friends and I associate with the majlis setting .

Screenshot on whatsapp where I asked for help for selecting the sound:

Here is an image of a Oud instrument for those who have never seen one:

How It Works: (Game mechanics)

When the player loads the game, they first see a cover screen with a logo for the game (Majlis Madness) and two options. Pressing ‘Enter’ takes them to a welcome page that introduces the Emirati majlis and explains its cultural importance. There is also an instructions page that gives step-by-step directions on how to play. Once the player starts, they watch a glowing sequence of snacks and then try to click them back in the same order. Each correct click is rewarded with a glow effect and a positive sound, while mistakes trigger an error sound, a red X, and eventually a gameover screen. If the player completes a sequence, they level up and face a longer, more challenging sequence.

Technically, the game uses a state machine to move between phases such as “cover”, “welcome”, “instructions”, “waiting”, “show”, “play”, “win”, and “gameover”.  Images and audio files are preloaded, and the layout is made responsive so the game can adapt to fullscreen sizes.

Planning and Design

(CHAT GPT WAS USED FOR SPECIFIC ARTISTIC ELEMENTS)

Before I wrote a single line of code, I began designing the game on paper. Sketching out screens and flows helped me plan the user experience in a structured way. I connected this process with UI concepts we had learned in class, like keeping instructions simple, providing clear feedback, and creating intuitive navigation between states. Having this roadmap made the actual coding process smoother, since I already had a clear vision of how each part of the game should look and feel.

Initial Planning Sheet:

Whiteboard In Class:

For the visual elements, I combined resources from different places. I gathered some reference images from Google (like snacks and majlis items) and then used ChatGPT to generate cartoon versions of these objects, then further tweaked them on procreate. This gave the game a playful and consistent art style while still grounding it in recognizable Emirati cultural elements. I liked how this workflow let me balance authenticity with creativity, bringing everyday cultural objects into a polished, game-ready format. For assets that were more specific like the glow feature in the game I used procreate on my iPad to draw a glowy circle because that was too difficult to find on google images, so it was better to create that on my own.

I am especially proud of the way my project mixes cultural storytelling with technical interactivity. Adding atmospheric oud music, using Arabic text (“مرحبا”) alongside English, and visually highlighting Emirati snacks that most locals relate with their childhood makes the game feel culturally rich. From a technical perspective, organizing the code into states and using a class for snacks makes the project more readable and user-friendly, while still handling animation, audio, and user feedback effectively.

Code Snippet:

I am particularly proud of the code that handles snack animations and misclick feedback, because it brings the game to life and makes the experience feel way more polished. The way it checks for shaking when a player clicks the wrong snack, enlarging when a snack is chosen, and glowing during active play, adds personality to each object and makes the interactions more satisfying. I also like how the red X sign briefly appears on a misclick before moving to the gameover state, it gives the player clear feedback without being overwhelming. For me, this section shows how I was able to combine logic and creativity: not just making the game functional, but adding expressive details that make it feel engaging and fun.

// Draw snacks with active animations
  for (let i = 0; i < snacks.length; i++) {
    const shaking = wrongIndex === i && wrongShakeFrames > 0;
    const enlarging = clickedSnack === i;
    const glowOnTop = enlarging && state === "play";
    snacks[i].draw(shaking, enlarging, glowOnTop);
  }
  if (wrongShakeFrames > 0) wrongShakeFrames--;

  // when showing a misclick, display the red X sign briefly then go to gameover
  if (state === "misclick") {
    if (wrongIndex >= 0 && xImg) {
      const s = snacks[wrongIndex];
      image(xImg, s.x + s.w / 2 - 30, s.y - 40, 60, 60);
    }
    misclickHold--;
    if (misclickHold <= 0) state = "gameover";
    return;
  }

 

Debugging 🙁

Debugging turned out to be one of the most challenging but also most important/ rewarding parts of this project. There were times when I stared at the same piece of code for hours and couldn’t see what was wrong, and I realized I needed fresh eyes, either by stepping away and taking breaks or by asking someone else to look at it with me. That process often helped me notice small mistakes I had been overlooking. The class we had last week on debugging strategies ended up being way more useful than I expected for a project of this size. It gave me practical techniques, like breaking problems into smaller parts and testing sections of the code separately, which saved me a lot of time and frustration.

Me when I find the bug after looking for hours, just to realize I had spelt the word “function” wrong:

Challenges and Areas for Improvement

One of the biggest challenges I ran into was learning how to use states (this made me want to cry), since I had never worked with them before. At first, it was confusing to manage the different phases of the game and make sure each part made sense (like the cover screen, instructions, and gameplay) and  transitioned smoothly. Over time, I began to understand how states could structure the flow and make the game easier to organize. Another challenge was finding traditional Emirati audio that felt authentic and added to the mood of the majlis setting. I wanted the sound to truly capture the atmosphere, so it took extra effort to search for the right oud tracks that matched the visuals and theme of the game.

For improvements, I would like to add more cultural depth to the game, such as different levels themed around other parts of Emirati hospitality or new backgrounds showing other Emirati cultural settings. Technically, the game could also benefit from smoother animations, for example, fading glows or a more creative transition between states and more positive feedback when a player levels up. While the core mechanics and atmosphere work well, as I learned in this course there is ALWAYS room to expand our games, wether that’s in terms of storytelling or even polishing the technical aspects. Overall, I’m very happy with how this turned out.