Category: S2025 – Mang

https://editor.p5js.org/hajar.alk.2007/sketches/

Concept Recap

Now that I’ve finished my game, I just want to restate my concept briefly (which I explained in detail in my Week 6 submission). The original idea started as a candy game, but I decided to make it more traditional and personal by turning it into a Gahwa Rush theme. The inspiration came from my grandpa and my little brother how in our culture, gahwa is always seen as fine for kids while soft drinks aren’t. I found that really funny, so I made the goal of the game to catch the gahwa and avoid the Pepsi. It’s a simple idea, but it means a lot to me because it connects to my family and culture, and I’m really happy with how it turned out.

Week 7 Progress

This week, I was mainly working on the final details to perfect the game. Most of it was already done since last week the whole structure and idea were already there. What I focused on this week was adding sounds to make the game feel more alive and interactive. I also let my friend play it, and I noticed that it was really hard for her, even though for me it felt easy. That’s when I realized I had been increasing the difficulty too much without noticing because I kept testing and improving my own gameplay, so I was getting better while others weren’t. To fix that, I decided to lower the difficulty level to make the game more beginner-friendly and enjoyable for everyone.

I also found a small bug where the player would lose even when the character didn’t actually touch the Pepsi. To fix this, I adjusted the collision detection by making smaller rectangle frames around the Pepsi so that it only counts as a collision when it really touches the character.

Sources/Credit

https://youtu.be/enLvg0VTsAo?si=mPNyWkxCoWeOn3CG

https://youtu.be/bMYQbU01u04?si=KDpfq1w9eC_Bifax

https://youtu.be/Z57hx4ey5RY?si=ruAPhn2WmEeyHKXG

https://youtu.be/MuOcdYjF2F4?si=Z160JD3BE2VQnpvr

Although these YouTube links aren’t the same concept as my game and are actually very different, I used them to help me with the technical parts of creating my game. Since I’m still a beginner at coding, some things especially the math equations were really hard for me to figure out on my own. These videos really helped me understand how to make objects fall, how to make them appear randomly, and how to control different elements in the game. Even though their games had completely different themes, they included similar components that I could learn from, and I applied those ideas to make my own game work.

Code Highlight

const pw = p.w * PLAYER_HIT_SCALE.w;
const ph = p.h * PLAYER_HIT_SCALE.h;
const s  = ITEM_HIT_SCALE[it.kind] || { w: 0.5, h: 0.7 };
const iw = it.w * s.w, ih = it.h * s.h;

return (Math.abs(p.x - it.x) * 2 < (pw + iw)) &&
       (Math.abs(p.y - it.y) * 2 < (ph + ih));

When I was fixing the collision bug, it took me many tries to get it right. Even though I found YouTube videos about collision detection, I still couldn’t really figure it out at first because my game’s sprites and hitboxes didn’t match properly. The player would lose even when the Pepsi was far away. I kept testing and adjusting the numbers, but it wasn’t working. Then I found one YouTube video that explained hitboxes in a really simple way, and it finally made sense to me. That video helped me understand how to scale the hitboxes separately for each object, so I created smaller hitboxes around the Pepsi and the gahwa, and after that, the collisions finally worked perfectly. https://youtu.be/HK_oG_ev8FQ?si=BqtCL3WpHv3UpPQ0

End Of Project Reflection

Overall, I really enjoyed this project I genuinely, genuinely did. I loved developing my idea and adding more to it every single week. It’s crazy to see how much it changed from week 5, when I first thought of it, to how it looks now. It’s such an inspiring project for me because I got to be creative and technical at the same time. I also really enjoyed sharing it with my friends and family; everyone wanted to try it and play.

Even though it was a heavy project that took hours of work and a lot of effort, the result was completely worth it. I felt so accomplished when I finally finished it. It took a lot of trial and error, but that’s honestly what helped me learn the most. This project pushed me to apply everything I learned in class not just follow instructions, but actually take risks, test ideas, and build something real. It also made me go beyond what we learned and look for new solutions from other sources, like YouTube tutorials.

In the end, it was a very in-depth and challenging project, but I truly enjoyed every step of it not just the outcome. I loved the process of testing, debugging, and improving. It was fun, creative, and one of the most rewarding projects I’ve ever done.

There were definitely moments when I found bugs that I just couldn’t fix, and it felt so overwhelming. It was really frustrating because I would go through the code again and again and still couldn’t figure out what was wrong. But I started using the debugging techniques we learned in class, and that really helped me calm down and approach the problem more logically instead of panicking. There were also days when I spent hours trying to fix one thing, and after a while, my brain would just stop functioning. I couldn’t think straight anymore. But whenever I took a break and came back later, it was like my mind was refreshed, I could suddenly see the problem so much more clearly and finally debug it.

At some points, I honestly wanted to delete the whole code and just make a simpler game because I was so frustrated. But I’m really glad I didn’t. Finishing it made me feel so accomplished, and it really boosted my confidence in coding. I kept going even when I wanted to give up, and I pushed myself to find answers and look for external resources when I got stuck. That persistence made me realize that even if something feels impossible at first, I can figure it out if I stay patient and keep trying.

This project definitely required a lot of patience and I think that’s a skill I’m really starting to develop. I realized that when you’re coding, you’re not always going to get it right the first time, and that’s completely okay. There’s nothing wrong with making mistakes or needing multiple tries. Especially when you’re creating a game or something complex, patience is everything. You have to be willing to try again and again, test small changes, and stay calm even when things don’t work right away. This project really taught me that. It helped me understand that patience isn’t just something nice to have it’s one of the most important skills in programming.

Project concept

Last week, when I first thought of my game idea, I had almost the same concept as now, but it was originally a candy-themed game. Then I decided to make it closer to home, more customizable, and more traditional. I was trying to think about what should fall from the sky instead of candy, but I really couldn’t come up with anything at first.

Then one day, I was at my grandpa’s house, and I saw him drinking coffee with my little brother. It made me laugh because in our culture, especially in Arab families, they always tell kids not to drink soft drinks, but somehow Gahwa (Arabic coffee) is always allowed, even though it’s full of caffeine! What’s even funnier is that my grandpa used to give my little brother kahwa when he was literally a baby. He could only drink milk, but my grandpa would secretly give him kahwa without my parents knowing. In his mind, kahwa was totally fine, but soft drinks were bad.

That moment gave me the idea to make the game about Gahwa. So now, in my game, the goal is to catch the Gahwa and avoid the Pepsi , if you catch the Pepsi, the game is over. That twist made the game feel really traditional and personal to me.

I also decided to name the characters with Arab names and base them on my younger brother and sister. I really enjoyed that part because it made the game feel more meaningful and connected to my culture. Even though it’s a simple game and my technical experience isn’t that advanced yet, I really love the creative side of it. It feels fun and personal, and that’s what I enjoyed most.

What I am proud of

For my Week 6 submission, what I’m most proud of is that I made this entire game from scratch it’s my first time ever creating a full game, and that alone makes me really proud of myself. I’m also proud of how resourceful I was throughout the process. Even though the YouTube videos I found weren’t the same as my game at all, I still managed to understand their concepts and figure out how to apply them to my own project. I feel like I found really good sources that helped me learn and improve, and it showed me that I’m capable of teaching myself new things and solving problems independently.

I’m also really proud of my concept because it has a story behind it that makes it personal and meaningful. I feel like I did really well in both the creative and technical parts of the project. On the technical side, I worked hard to understand new concepts and used different sources to make my game function the way I wanted. On the creative side, it all came naturally because I was genuinely passionate about the idea. I really enjoyed bringing my story to life through the game, and that made the whole process even more special for me.

Bug

The only thing that’s bothering me about my game right now is that sometimes you lose even when the Pepsi is kind of far from the character. It doesn’t actually touch or collide with the player, but the game still ends as if it did. I think it’s because the data or hitbox isn’t directed properly to the character, so I’m planning to fix that bug. I also haven’t added any sounds yet, but I really want to, I just need to watch some tutorials first to learn how to do it correctly.

Code Highlight

This part of the code is one of the main things we learned in class, and it really became the foundation for my whole project. It basically controls what shows up on the screen depending on which stage of the game you’re in, like the home screen, instructions, character select, gameplay, or game over. This structure made everything so much easier for me because it helped organize my code and made it clear what each part should do. I started with this as my base and then kept building on it, adding more functions and features as I went along. It really helped me understand how to manage different screens in a game.

function draw() {
  background(0);
//conditions for screens 
  if (currentScreen === 'home')       drawHome();
  else if (currentScreen === 'instructions') drawInstructions();
  else if (currentScreen === 'character')    drawCharacterSelect();
  else if (currentScreen === 'game')         drawGame();
  else if (currentScreen === 'gameover')     drawGameOver();

Some Images I Used

Human vision and computer vision are very different. Humans are born with natural senses that let us see, feel, and understand what’s happening around us without even thinking about it. For example, if I see someone waving at me, I instantly know who they are and what that action means. Computers don’t have this kind of built-in understanding. They need to be given artificial “senses” through cameras and sensors. Instead of just seeing, a computer has to go step by step, detecting pixels, separating the object from the background, and then tracking where it moves. Humans process all of this automatically and with emotion, while computers rely only on data and instructions.

To help computers track what we want, we can use techniques like motion detection, background subtraction, brightness levels, and object tracking. These methods allow the computer to focus on what matters, like spotting movement or identifying a specific shape or color.

Computer vision brings something really exciting to the world of art because it makes art interactive. It allows artists, even those who aren’t very technical, to push their creativity further without as many limits. I find this so beautiful because it opens up new ways to experience and create art.

A great example of this is the Rain Room. In this installation, rain falls inside a dark room, but when someone walks through it, sensors detect their movement and stop the rain wherever they are standing. It feels like you have the power to control the rain. Another example is TeamLab Borderless, where massive digital projections respond to visitors’ movements, creating an ever-changing world of color and light.

What makes this so special is that it gives the audience a role in shaping the art. The original artist creates the setup, but every visitor changes how the piece looks and behaves through their actions. In a way, everyone becomes an artist. The artwork is never exactly the same twice, which makes it even more meaningful. It turns art into a shared, living experience where the line between the creator and the audience disappears.

I speak both Arabic and English, so when I learned that our project had to involve words, I knew I wanted to create something that brought both languages together. My first idea was simple: a program that translates colors typed in English into Arabic and displays them on the screen. At first, I liked it, but I quickly realized it felt too basic. Each time you typed a color, the same thing happened, for the same input you got the same output every single time.

To improve it, I thought to add a quiz that tested you on three random colors each time. This added some variation, but it still didn’t feel interactive enough. I wanted users to not just type answers but to interact with the piece and feel like they were shaping the experience. As I worked on making the program more dynamic, I found a YouTube video that helped me learn how to add randomness and interactivity to my code: https://youtu.be/-6v_AYyn49k?si=Ra0T98ejk4Xkcr-J. From that tutorial, I learned how to make the Arabic words appear in different random positions and sizes and how to create multiple modes so the user can switch between still, bouncing, and floating text. This gave the piece a balance between control and randomness, the user can make choices, but there’s still some sort of randomness. I also used custom fonts from Google Fonts by embedding them directly into my HTML file.

In the final version, I kept my original concept of translating colors, but now the project feels much more alive. The user can explore different modes, play with the experience, and see something new each time. It’s almost as if its art created by the words now. It’s structured enough for the user to have some control, but there’s always randomness, so it’s never exactly the same twice. For me, this connects to Chris Crawford’s ideas about interactivity, where both the user and the program are working together to create something meaningful, rather than the program just showing a static result. It’s no longer just a translation tool, it’s an interactive artwork that bridges both of my languages while letting others engage with it in a fun and personal way.

When I first added Arabic text to my program, it kept printing from left to right, which looked really strange because Arabic is supposed to flow right to left. It took me a couple of tries to figure out why this was happening. Eventually, I realized I needed to set the text direction directly in the code. Once I added a line to force the drawing context to use RTL, the Arabic words finally displayed correctly. It was a small but important fix that made the project look much more natural and readable.

// Draw Arabic word correctly (right to left)
   push();
   drawingContext.direction = 'rtl'; 
   textFont(arabicFont);
   textSize(item.size);
   fill(item.color);
   text(item.word, item.x, item.y);
   pop();
 }