Category: F2026 – Aya

Concept:

For this project, I couldn’t really think of anything in particular that satisfied the requirements, so I took another approach where I thought of elements I wanted to have in my work and I slowly expanded from there to satisfy the requirements. Whenever I feel stuck or uninspired, I’d turn to cats because I just love cats, and thus I started brainstorming this project with cats. After many considerations on the user interactivity and my artistic preference, I ended up with the idea of ‘Choose’ your destiny but as a cat. The work revolves around a day in the life of a cat in a cafe where it’s cozy, calm, and full of ‘ambiance’, something I personally enjoy as well. I wanted the work to have as many ‘senses’ as possible, and to me that would mean sound, so throughout the work, I intend to create a cozy, natural world through constant sounds that’s not abrupt and well designed. To make the ‘choose your destiny’ design intentional and purposeful, I plan on weighting the choices so there will be a result (cat name/ nick name) displayed at the end of the game that reflects on the choices users made. However, one fun twist of this is that while the result is reflective of the user’s choices, it’s not really a destiny that they ‘chose’, but rather the opposite: an ‘already-decided’ destiny that you got to know about in the end. The result explains the user’s choices through the cat name. This feature is just a concept I personally find interesting.

sketch:

 

Design:

For the visual design, I plan to just play into the cozy vibe as much as possible so that might mean warm tones, winter/rain, plants, and really anything that seems like an ‘ideal cafe’ for me. For the user interaction aspect, users will mainly interact with the work through choices/options to ‘choose your destiny’, but I plan to add other elements into the cafe where the user can interact with in different ways to discover sounds, images, etc. just to make the ‘cafe’ more ‘alive’.

I plan to make the scenes into a class to make the code more concise and efficient, and also to explore the specific built-in function/ interactivity design as I work on the project just to experiment and see which is better for the result, which is pretty subjective to my artistic decision.

Most frightening part:

To me, the most frustrating part would be the sound design, because really, the main way the story is delivered is through sound and to make sound “prevalent” without making it noisy and overwhelming is something I’d need to spend time to refine, especially given the specific mood I want to achieve. Another part would probably be the scene transitions but I think I’ll have a better idea once I start experimenting.

Actions to minimize risk:

For the sound engineering part, I plan to limit the variations of sound and manipulate the volumes to make sure it’s not overwhelming and noisy while appropriately cultivating the ‘cafe world’ and achieving the feeling and tone I want. I also will research and experiment with the different transitions i can utilize to make the work more coherent and ultimately the user experience more smooth and enjoyable.

Concept:

For my midterm project, I came up with the game called Star Catcher. This idea came to mind from this Nyota figurine that I own (see image on the right), which sparked the idea of making a game that catches stars. I started brainstorming the story and came up with the idea that this girl was stuck on the moon after a failed round-trip and the only way to go back to her planet is to regain her power using the stars. It will ask the user to help her by moving left and right on the arrow keys to “catch” the falling stars from space. With every caught star, the star power increases by 1 and a sparkle sound plays.

Design:

I traced the figurine on my iPad because I wanted a drawing rather than an image. I think it looks better and more game-friendly. It was also a fun, creative process that I think adds a more personal touch to this project.

I drew the girl for the ending screen where she will be holding the star to show the user that they have won but I have yet to use it because I did not work on the screens yet.

I also drew the stars to keep the style consistent.

I initially also drew the background but after loading it in, I did not like how it looked like just because I drew it as a square almost, so it stretched out. I also felt like the quality would be better if I just coded the gradient background and the moon part is quite easy with just a bunch of ellipses. I am happy I made that decision and it definitely helped me learn something new, as I found a p5js example for the gradient. I had a different code for the gradient at first—like the one I used in my Bubbles project—but it caused the stars and girl to infinitely draw, creating a trail for some reason. I figured it was because I put it in setup but putting it in draw caused the same problem so I just searched for a new reference instead (P5js example gradient background in Resources section).

This is the structure I have in mind:

1. Starting screen (title/intro) + play button
2. Story / Instruction (explains the game + how to play) + play button
3. Game
4. Ending screen (win/lose) + play again button

Uncertainties:

I think the most uncertain part as of right now is the rest of the concept, which is the goal of the game. I am not sure how to go about this game, as I have multiple ideas. One idea is to have rocks falling from space as well and if the user hits it, the Star Power decreases, and it needs to reach a certain number in a limited time in order for the user to win. Another idea was having the stars continuously falling with no drawbacks, but if a star falls without being caught, then the game ends and to make it easier I would have a special star fall to temporarily speed up the girl’s movement.

While coding, the part I was unsure about was the collision detection part—when the game knows that girl “caught” the star—just because it kept confusing me as to which numbers would work best. At first, it was very sensitive and rather kind because it was pretty easy to catch the star from afar or after it had passed the girl’s reaching hands, which looked wrong. I had to keep changing the numbers to make sure it is fair and actually within the girl’s parameter.

In the beginning, the girl was also able to go beyond the canvas but that was because I did not restrict thekeyIsDown if statement. I added if (girlX > -20) and     if (girlX < width – 120) to fix that.

For now, I want to work on figuring out the goal of the game. After that, I want to do all the different screens. In the end, I want to finalize with background sounds or effects.

Resources:

Sparkle sound: https://pixabay.com/sound-effects/film-special-effects-sparkle-355937/

Font (Gemini helped me pick this font): https://fonts.google.com/specimen/Twinkle+Star?preview.script=Latn

P5js example gradient background: https://editor.p5js.org/adriennecassel3/sketches/b7FTa6sF_

Class: https://editor.p5js.org/Aya_Riad/sketches/Wky6-ythQ

Key movement: https://editor.p5js.org/Aya_Riad/sketches/XtHkp-A7N

Before this reading, I thought that computer vision was complicated and I was not sure how it worked at all. After reading, I was surprised to learn the techniques used to help the computer see and track what we are interested in have a simple explanation. The reading mentioned multiple techniques like frame differencing, background subtraction, and object tracking. The one I found most intriguing though was the brightness thresholding, which can differentiate things based on how dark or light it is. LimboTime was an example of that, where two people extend their arms towards each other and the computer makes a line. The third person then tries to limbo under that line and if they go over it the computer rings the alarm. At first glance, the photo examples of the game looked complicated but after learning it was because they placed a white background, which allowed the computer to detect any darker pixels as players, it sounded much simpler. It reminded me of the way green screen works and how the computer uses that to easily separate the person or object from the background.

Thus, computer vision differs completely from human vision because computers just see pixels and because of that cannot always differentiate between things. We can easily see something even if the background is messy, but a computer would struggle because it needs its techniques like brightness thresholding and contrast. This explains why the remove background feature in the editing website I use sometimes is not always accurate to how I want it. One thing though, is the computer can be more precise with movement and detection if the technique is perfected. For example, in the dark we cannot see, but the computer could with infrared lighting, which is why security cameras are so common with their ability to detect movement like the Ring camera.

To answer the final question, I think computer vision’s capacity for tracking and surveillance is quite interesting and interactive but also uncomfortable. The example of Videoplace looked really fun and interactive to have the participant BE the art with their silhouette and movement. It funnily reminded me of Just Dance. The reason why I say uncomfortable is because of the multiple examples shared in the reading, but especially the Cheese installation. Because the participant knows they are being tracked, they feel more self-conscious. It does not feel like they are participating in the art like Videoplace, but being controlled to act a certain way or in this specific example, to keep smiling. Overall, this reading taught me that computers are able of making art with the help of human interaction, pixel movement and detection, and lighting.

Concept

A while ago, I was really into blind boxes with figures. Each time a new collection dropped, I would run from store to store trying to find the exact figure I wanted. But here is the beauty of blind boxes: you never know what you will get. Still, as a teenager with a tight budget but a lot of patience, I found ways to identify the exact figures I needed. The most useful method was simply holding the box and shaking it. Since each figure has its own weight, the feeling in hand and the sound would differ from figure to figure. For my midterm project, I want to replicate this exact concept, but in a virtual dimension.

A player clicks on the vending machine, also known as the robo-shop, and is then given a choice between six or more boxes that look identical from the outside but contain different figures inside. At the top, there is a button that gives an overview of each figure in the series along with its weight. The player’s mission is to shake each box and identify their desired figure by the sound it makes.

Challenging parts

1. A blind box game needs a whole series of figures and designing all of that from scratch would take far too much time and a level of drawing skill I do not have.

So I am considering two solutions. The first is to use Hirono figures from Popmart, since Hirono is one of my most collected figures and it is also very popular so it would very accurately convey my and most blind box lovers’ experiences. The second is to generate a completely new series of figures with AI, which gives me original designs and full creative control.

 

2. Making an individual, accurate shaking sound for every single figure with marginal weight differences would be too complicated and difficult to pull off realistically.

Because of this, I am probably going to make one sound per weight range instead. But this means it becomes impossible for the player to perfectly identify the exact figure they want just from the sound alone. They know the possible figures and their weights, but do not know which box contains which figure. However, I think this exact element of luck adds more challenge to the game and keeps the player more engaged and determined to get their desired figure. It also reflects how it actually was in real life for me, where I would spend hours just shaking and weighing boxes in my hand, trying to figure out which exact box had the figure I wanted. Only to find out, that after all that effort neither box actually had the figure I was looking for, sending me off to another store to continue the hunt.

 

3. Also, I am still yet to find a way to make smooth animations for the box shake and openings. Since shake and listen is the main mechanic of the game, I would like animations to look smooth enough that the game feels pleasant to play. That said, I am not aiming for anything too fancy. I want to keep the animations simple and just make sure they feel good enough to support the game.

Concept:

I wanted to make a strategy game inspired by Mancala. In Mancala you pick up the stones from one pit and drop them one by one into the pits that follow, so a single move spreads across the board. I liked that feeling of one action rippling outward and I wanted to build a game around it that is easier to pick up than the full Mancala rules. The game is called ‘Critical Mass’ (might change it). Players take turns adding a grain to a cell on a shared grid. You can only add a grain to an empty cell or a cell you already own. Once a cell reaches 4 grains it topples and sends one grain to each of its neighbors, and those grains turn the neighboring cells into the color of the player who caused the topple. If a neighbor also reaches 4, it topples too, so a single move can start a chain reaction that flips a big part of the board.

To win, you have to take over the board. If one player ends up with no cells left, the other player wins right away. To keep games from dragging on there is also a turn limit. If nobody has been wiped out when the turns run out, whoever owns more cells wins.

I am hoping on doing a two player mode where two people share one mouse and a one player mode against a simple computer opponent so it still works without a second person.

Progress so far:

So far I have only made the intro screen. It shows the title and a short version of the rules and a “click/press to start” prompt. I kept the instructions to four short lines because I want someone to understand the game in a few seconds without reading a wall of text.

Next I want to build the game and the game screen and add sounds and the mode select and the game over screen (which are going to be the most difficult parts). Also add more details and design to make it better.

The concept I was going for was a potions game. The idea was, that the user enters the witches room and will have to make a potion according to what ingredients they are assigned. They will be given a list of ingredients but the catches that they only see it for a few seconds and then it disappears. The game is, they have to see if they memorise the ingredients and created the correct potion in order to pass the game. If they collected the correct ingredients, then they made the potion correctly, however, if they accidentally use the wrong ingredient or put it in the wrong order, then the potion explodes and they have to start all over again. So the user interaction is basically creating the potion and memorizing the ingredients. I made a vision board in order to see how the aesthetics will look like together.

The most frightening part of my project was initially the sound. The reason is because every time I try to add it, it usually goes through an errors first. That is why I wanted to test it and get it over with from the beginning. At first I did struggle, every time I wanted to add the audio it just wouldn’t work.

I was using the wrong approach. I tried doing async and await first but then remembered that we used loadSound in class. It then later worked out but I still struggle to make the bgm a loop. Whenever I try to apply the code, it just cuts out the music, so that’s one thing I’ll focus on this week.

I was also panicking over how I’ll let the cards disappear after a certain amount of time, but I quickly reduced that risk by learning about millis(). It “Returns the number of milliseconds since a sketch started running.” and I got that from the reference p5 page.

Things to add: this is all just a rough draft and me experimenting so I haven’t finished the final project yet. I want to make the witches room using the shapes that we are used to, but also add images as the ingredients inside of the jars. For the ingredients cards, I will be using the skills that we learned last week about displaying texts and having them put into a words csv.

I will also continue to use classes for the ingredients, as well as OOP. I also will add more sound effects for the pouring and the boom if they got it wrong. I want to make some push effect when we click the start button too.

The reading changed how I think about the difference between computer vision and human vision. Humans can recognize a person or object even when the lighting, angle, or background changes, because we understand context. A computer sees pixels and must follow programmed rules, so it can easily become confused. I think I can say that I have experienced this when my phone’s face recognition failed when in poor lighting even though another person could recognize me immediately. We can help computers track what interests us by using stable lighting, a plain background, strong contrast, colored markers, brightness thresholding, frame differencing, or background subtraction. I agree with the author that improving the physical environment can sometimes be easier than writing more complicated code. This made me realize that designing a computer-vision project involves arranging the camera, lighting, and space as well as the programming itself.

I also think the author is slightly biased toward the positive and creative possibilities of computer vision because he is an artist and practitioner in this field. Although surveillance concerns are mentioned, I feel the reading could discuss privacy and consent more strongly. Tracking can make interactive art exciting because people can use their bodies instead of a mouse or keyboard, but the same technology can record people who did not agree to participate. This could make an artwork feel uncomfortable instead of interactive. If I used computer vision, I would clearly tell participants what the camera tracks and avoid saving their video.

INTERACTIVE BASS

I have completed the main part of the project. I am missing the introduction screen and some other details that I would like to add.
I’ve had an extremely difficult time with this (hopefully I will explain in class why). I am TERRIFIED as to why it takes so long to load and whether it can be fixed somehow. However, I have been working on this much longer one would probably think (I didn’t eat all day). The loading issue sure troubles me, but my hunger is far stronger now. I am hopeful I can fix this to be how I want it to be.

Concept and Initial Idea

For my midterm project, I wanted to create a game based on music. My initial idea was more of a DJ style game where the player would first choose between different music genres, such as 2000s pop, childhood nostalgia, and house music. After choosing a genre, they would enter a DJ setup where they could interact with the music. I also wanted to include a tutorial that would explain how the game works and what the different controls do.

The first sketch of my game idea

Developing My Idea

After thinking about the project more, I decided that I wanted there to be more of an actual game element rather than only having the player interact with a DJ setup. I kept the idea of choosing between different music genres, but developed the main part into a music based runner game. The player will choose a genre and then control a character that runs through the game while avoiding different obstacles. Each genre will have different music, and I also want the background and obstacles to change depending on the genre. I am also considering having some elements of the game change when the song changes.

The second sketch of my game

User Interaction

The game will begin with a starting screen called Rhythm Rush. From here, the player can choose either Start or Tutorial. If the player chooses Tutorial, they will be taken through a few screens explaining how the game works and what the controls do. If they choose Start, they will be taken to the genre selection screen, where they can choose the type of music they want to play with. Once they select a genre, the game will begin. The player will use the keyboard to control their character, using the space bar to jump and C to crouch to avoid different obstacles while the selected music plays. After the game ends, I want to include an option to restart so the player can play again or choose a different genre.

Code Progress

I have started working on the code for my project. So far, I created the starting screen for Rhythm Rush, added a background image and custom font, and started experimenting with adding sound to the game. For now, I wanted to complete the starting screen and make sure it was working before moving on to building the runner portion of the game and the different interactions.

 

Most Uncertain Part

The part I am most uncertain about is working with the music in the game. Since I want to include different songs, I want to make sure that the transitions between them are smooth rather than having one song suddenly stop and another one start. I am also still figuring out how to work with sound in my code. For example, I tried adding a song to my starting screen, but right now the audio is not playing even though I have added it to the code. I have been testing it and trying to figure out what is causing the problem. I want to get the audio working properly first before moving on to adding multiple songs and creating smooth transitions between them.

 

Before reading this, I thought computer vision was similar to human vision because both are able to see and recognize things, however, I realized that they are actually very different. Human vision is much more flexible and intelligent because we can easily recognize people, objects, movement, and understand what is happening around us without having to think about it. A computer, on the other hand, mainly sees pixels, colors, and brightness values. It does not automatically understand what these pixels mean, so it needs specific algorithms and conditions to be able to recognize things. Computers can also be affected by things such as lighting, colors, and the background, meaning that the environment needs to sometimes be designed in a certain way to help the computer see better.

There are different techniques that can be used to help computer vision detect and track things. One example is frame differencing, which compares different frames to detect movement. Another is background subtraction, where the computer compares the current image to a background and can identify what has changed or what has been added. Brightness thresholding can also be used to separate objects based on how light or dark they are. There is also object tracking, which allows the computer to follow the position of a specific object. I found it interesting that the physical environment can also be changed to make these techniques work better. For example, having a strong contrast between a person and the background can make it much easier for the computer to detect them. This shows that computer vision is not only about the code but also about how the environment is set up.

I think computer vision’s ability to track and use surveillance creates a lot of different possibilities for interactive media. It allows the artwork to respond to the person interacting with it, such as tracking their face, body, movement, or position. This can make the artwork feel more interactive because the person is not just looking at the artwork but is actually becoming part of it. I think this could make an experience more interesting and personal because the artwork can change depending on what the person does. However, I also think there is an important issue with privacy because the same technology that makes interactive media possible can also be used to watch and track people. This made me think about how there needs to be a balance between making an artwork interactive and making sure people are comfortable with being tracked. If people do not know that they are being recorded or tracked, it could make the artwork feel more like surveillance than interaction.

Overall, this reading showed me that computer vision is not the same as human vision and that computers need specific techniques and conditions to understand what they are seeing.  I think the use of computer vision in interactive media  depends on how the user chooses to use it and whether the technology is being used to create an interaction that is unique.