Month: February 2026

Concept

I have been looking at the portfolio websites for quite a while. All looked same to me box of texts heather and theather. I had this idea long before to create a a 3D version of it. Like a human figure represented in form a hollogram. It is 3D figure, rotating. The interaction is done basically by scrolling. if the mouse is over the body and we scroll up. It will zoom in the body. and the attributes will be start appearing on the periphery like neon signs.  This might not be a professional portfolio, but that was the idea I had.  The assumption about the experiance is to be tech savy, and futuristic. I would want to add more mini interactions into it.

Design

For the figure,  I wanted to replicate the self portrait. But the without any hardcoded values other than the scaling ones. Initially, I want to be able to put custom coridinates, so that I am able to draw it anywhere. But to make it rotate, I later used rotate(). By it I didn’t had ot worry about the overall mangment of the coridnates.

the sketch

 

The hardest part till this moment was cerating the curve of the the neck collar, It is not visible right now in the sketch as I made whole neck black. I wil extend from it when I will be adding more attributes towards the final product.

The part I am most proud of is the making it rotate while everything remains intact. Initialy I wanted the neck to stay connected but it during some hit and trial. I noticed it seems more lively if its a bit apart and kept it like that. To  my undrestanding the next challenging part will be the navigation form the whole sektch to the indvidual partsor it along with their attributes.

For the usage of AI, I used it draw the curve of the neck colar. I couldn’t understand the how control points work in the curve() function. It was hard from me to do all the calculation, when already don’t understand the parameters of the funcion. So I gave it to gpt to wrtie it form line by line and put comments for each.

    let collarY = neckY + neckLength;  // directly under neck

    curve(
        neckX - 20, collarY - 70,  // control point
        neckX+2, collarY-10,            // start
        neckX + neckWidth-2, collarY-10,// end
        neckX + neckWidth + 20, collarY - 70 // control point
    );
}

 

Concept:

For my midterm project, I knew I wanted to create an interactive game, something creative, original, and fun, while also incorporating everything required for this project. I came across multiple ideas but ended up choosing a 3D Maze Capturing game, where players walk around a maze holding a camera and must find objects placed within and capture them within a set duration. Each captured object increases their score, and the earlier they capture it, the higher the points.

While developing and improving my idea, I wanted a specific theme to add a personal touch. I was inspired by an escape room I visited this year at Qasr Al Hosn, which reminded me of a maze, as well as the new Sheikh Zayed Museum, with its many Emirati historical artworks and objects. I decided to go with a Historical Emirati Theme, where players first choose their character, either an Emirati girl or boy, and the maze will feature modern walls and decorations, while the objects the player needs to capture are Emirati cultural items, such as traditional clothing, historical artworks, and objects used in the past.

I used AI to generate sample images to illustrate my idea and show what I want my game to look like, not exactly, but to convey the concept:

Design:

My initial plan is to have an introductory page displaying the game title, Maze of History, along with instructions on how to play. For interactivity, the player will click a start button, then select their preferred character, and the game will begin with a camera lens displayed on the screen, as if held in their hands.

Players navigate the maze using the arrow keys, moving through hallways and spaces. When they spot an object, they center it in the camera lens and press the Enter key to capture it, accompanied by sound effects of the camera. Each captured object increases the player’s score, with higher points awarded for capturing objects earlier. When the 40-second timer ends, the game stops, the score is displayed in the center of the screen, and players can press the Space bar to return to the main menu and start a new session.

I planned out the structure of my code to ensure it would be manageable and easy to work with. My game will use Object-Oriented Programming, with classes for the characters to track their positions and movements, classes for the objects placed around the maze that can be captured by the characters to manage their placement and display captured state, and a class for the maze structure itself, including walls and decorations. I will also include functions for the game to handle the start screen, gameplay interactions such as clicking and key pressing, and the score screen after the game ends.

For the visual design, I would like to create a modern museum aesthetic, with clean white walls and subtle decorations, along with objects such as traditional Emirati clothing, historical artworks, and artifacts placed throughout the maze. From the first-person perspective, the camera lens simulates the player holding a camera, adding immersion to the exploration experience. Sound effects for capturing objects and potentially background music will further enhance interactivity.

Frightening Parts and Plan to Reduce Risks:

In this project, I’m going with a more advanced idea compared to what I already did, and I have identified some parts that could be challenging while working on this project to make it work. I am concerned about the whole “3D” aspect, since everything I have done so far is 2D, and I’ll need a 3D setting with hands and a camera. To reduce this risk, I have already started going through different tutorials on YouTube by The Coding Train about how to create and work with 3D objects in p5.js, and I have started experimenting by creating some simple shapes.

Another risk I am considering is ensuring that the players can move smoothly within the maze without walking through walls or objects. To reduce this risk, I plan to start by testing a small maze prototype with a few walls and one character, while also watching tutorials before expanding the maze.

Moreover, I am also concerned about implementing the score system, where points increase based on how quickly the player captures objects. Calculating and updating the score dynamically while the timer counts down could be tricky to get right. To reduce this risk, I plan to prototype the timer and score separately first, testing that the points update correctly for each capture before integrating it into the full maze.

Computer visions differn from human vision in several ways. The human vision does not need pre-programed information about visual contexs to understand it directly. However computer vision is unable to do so without pre-programmed assumption about the context, or else it fails to understand. Human vision is also better at image level understanding instead of understanding or counting pixels, while computer vision is the exact opposite.

Some techniques to help computers see and track would be background subtraction: to help isolate moving object; brightness thresholding:  to detect change in picel brightness to infer change in the whole image; high contrast: so that the subject would stand out; simple backgrounds: to make background aubtraction and brightness thresholding easier.

Computer vision’s special capacity make it useful for bringing in a new perspective in interactive art. A computer vision will get differnt information or emphasis from the same image as a human, and the comparison or cooperation between the two would be a great lead for interaction. The computer vison is also objective and can pick up details, giving it the potential to learn its interactive audience better than a human would.

Concept

I had a tough time thinking of how to make something original and interactive with my limited skills. Then I remembered an interactive exercise I did when I was in middle school. It was an interactive investigation story of the famous haunted Queen Mary cruise, where the reader made choices and flipped to the corresponding pages and eventually reach different endings. I thought I wanted to do something similar that would have an original story and scenes that I make myself, and allow great interactivity by letting the player make their choices. I thought of the film “Night at The Museum” and decided to write a spooky story based on the museum setting. I enabled the player to make choices at multiple points in the stories, leading to different endings accordingly. I am not attching the whole storyline because I dont want it to be a spoiler.

Design

the design would be simple pictures that show the museum scene, with animation when it is neccesary. Sound effect and text would be key to the design. An example would be like this

This is in p5 because the image upload doesn’t work, it is just to show the image and not interactive, but when it is put together in p5js there would be interactivity.

Frightening Aspects

The difficult part if to keep track of what scene the player is in and what interaction the player makes. Every secen need to be activated only when having both conditions of being in the precious scene and clicking the correct interaction. This gets more complex when different choices can lead to the same scene. I am planning to do this with stacking of if else statements.

What I plan to do to prevent this is attaching conditions to the buttons not the images which serve as the scene. Because background and animation is loaded after the scene change, they cannot be the trigger. So I likely have a scene array where each scene has its own index and the index will be used to identify which scen it should change to when interaction takes place.

This week’s reading truly improved and clarified my understanding of computer vision and how interactions between humans and computers actually work. Initially, I knew computer vision differed from human vision, but I did not expect the difference to be that significant, as I assumed it still “sees” scenes in a similar way to us. I realized that computer vision operates in fundamentally different ways. Human vision naturally interprets what is in front of us and allows us to focus on what we want to see almost effortlessly. In contrast, computer vision relies on specific algorithms and processes images as numerical data including pixels, brightness, color values, distance, and other measurable characteristics. Rather than simply recognizing an object, the computer analyzes patterns within many pixels and numbers. While human vision can adapt easily to complex environments, computer vision often struggles unless it is carefully programmed and assigned clear, straightforward tasks. This made me think of everyday examples such as social media face filters and games like Just Dance, where tracking our movements seems simple but actually depends on structured computational processes behind the scenes.

I found the reading especially beneficial as a beginner in interactive media because it clearly explained techniques that help computers “see” or track what we are interested in. For example, the background subtraction technique allows the computer to detect people or objects within a frame by analyzing differences in pixels, color, and brightness, while the frame differencing technique helps detect motion by comparing changes between frames and locations of objects. These techniques along with many more show that computer vision depends on controlled conditions and specific goals. While the author explains the technical and creative potential of computer vision clearly, I feel that the perspective leans more toward its artistic possibilities than fully addressing its broader social risks. At the same time, thinking about computer vision’s capacity for tracking and surveillance made me question how far its use should go, or be allowed. Although it can enhance interactive art by increasing engagement and allowing systems to respond to users’ movements in real time, it can also raise privacy concerns and create discomfort, as users may feel constantly watched. Overall, the reading helped me better understand both the technical complexity and the ethical implications of computer vision, and it encouraged me to think more about how I might apply it responsibly in my own interactive media work.

Concept

For my midterm project I am creating an interactive experience called The Talli Maker. As I worked on the project, I realized that building three full mini games was too ambitious for a midterm since i was originally thinking of creating a storyline experience, so I refined my idea into something more focused, cultural, and achievable. Instead of multiple levels, the entire experience now centers around one meaningful interaction inspired by traditional Emirati talli. When the user opens the game, they meet Yedo on the home screen. She explains that she is working on a piece of talli and needs help choosing the correct colored threads. The player taps to begin. The setting takes place inside a traditional Emirati house, creating a warm and familiar atmosphere. Colorful talli beads and threads float or move gently around the screen, each one representing a different part of the pattern Yedo is trying to complete. I plan on incorporating randomness since that’s a code I enjoyed implementing.

Generative ai helped me clear up the rough sketch this is a idea of how the game will look like but of course when actually played you will be able to see the randomness affect.

Design and User Interaction:

To make the interaction original and reaction based, Yedo occasionally calls out a color she needs, such as “Find thered thread” and the player must react quickly and tap the correct bead before it disappears or moves away. Each round becomes slightly more challenging as the beads move faster or the colors change more frequently. This creates a playful rhythm that feels like a grandmother guiding a child through a traditional craft.

The experience is simple but meaningful. The user listens, observes, and reacts, helping Yedo complete her talli pattern one bead at a time. When enough correct beads are collected, Yedo thanks the player and shows the finished talli piece. The player can then restart the experience.

The user interaction design is clean and friendly. The game begins with a clear instruction screen where Yedo speaks directly to the player. The main interaction happens on a single screen, which keeps the experience focused and easy to follow. The player taps the correct bead based on Yedo’s instructions, and the game responds with animations, color changes, or small feedback effects. This structure allows the experience to feel complete without overwhelming the user.

My code design started with building the title screen and making sure the start button worked. I added a reset button so the user can restart the experience at any time. I loaded my fonts and images where Yedo speaks directly to the player. The main interaction happens on a single screen, which keeps the experience focused and easy to follow. The player taps the correct bead based on Yedo’s instructions, and the game responds with animations, color changes, or small feedback effects. This structure allows the experience to feel complete without overwhelming the user.

My next steps involve creating the bead objects, adding random movement, and implementing the color calling mechanic I will also add simple animations when the player taps the correct or incorrect bead. Using Object Oriented Programming will help keep the bead logic organized and easy to manage.

Most Challenging Part:

The most frightening part of my project was realizing that my original idea was too large for the time l had. worried about building multiple scenes, transitions, and mini games. So I decided to saty more focused on one cultural aspect: talli. For the talli code it would be the randomness and game like responsiveness affect.

Risk Reduction:

To reduce this fear, simplified the concept and focused on one strong interaction instead of three weaker ones. This made the project feel more manageable and allowed me to put more attention into polish, responsiveness, and cultural detail.

My next steps are to build the talli bead interaction, add the reaction-time color prompts, and create the final screen where Yedo shows the completed talli to avoid being overwhelmed by this at the end. Once the interaction works smoothly, I will add traditional Emirati music to make the experience feel warm and atmospheric. My goal is to create a small but meaningful interactive moment that feels personal, cultural, and complete.

Concept

My midterm project is an interactive drink‑building experience called Boba Builder. The idea is simple, the user moves through different screens to create their own custom boba drink. It is an interactive and customizable experience and  where they choose a tea flavor, add toppings, decide on ice, pick a straw or umbrella, and then see the final drink displayed at the end.

Design

For my design I want my game/ interactive experience to have a playful theme with mostly colors being pastel, I want the theme to be a cute and fun experience. I want my game to be understood easily and for the player to be guided through each screen knowing what to do and everything is easy to follow.

The flow of the experience is straightforward: it starts on the main screen, then moves to the tea selection, followed by the pouring stage. After that, the player chooses their toppings, decides whether they want to add ice, and then decorates the drink. The final screen shows the completed boba based on all the choices the user made.

For the final outcome of the boba, I’m hoping the completed drink will look similar to the boba on my start page, with the ice, fruit, umbrella or straw, boba, and the different tea flavors all coming together after the user picks how they want their customizable boba to look like.

Challenging Part

Since I want to draw my own visuals for almost everything, the most challenging part for me is handling all the visual assets while keeping everything aligned in fullscreen mode. I need to make sure they load correctly and stay positioned properly on different screen sizes. I’m also a bit unsure about the pouring animation, since it requires timing and frame control.

Reducing Risk

To reduce the risk I will probably load everything as soon as possible so that it would be easier for me to experience how everything will align together and I will look on p5’s reference to see if there is anything that would help with ensuring all assets will be fit to the full screen and will be positioned properly on different screen sizes. For the pouring animation, I’m going to start by testing a very basic version of it, just simple shapes or rough drawings, to make sure the timing works and the animation actually plays smoothly. Once I know the animation works, I can replace those rough shapes with the final artwork I will have draw. This way, I’m not wasting time creating detailed visuals before confirming the animation system is working.

Concept:

For my midterm project, I decided to create something inspired by one of my passions, Formula 1. I have been a huge Formula 1 fan for years, so I wanted to create something for my midterm project that I will enjoy working on.

I knew I wanted to create something related to Formula 1, but it took me some time to come up with my final idea. In the end, I decided to create a pit stop simulator game.

A pit stop in Formula 1 is the process of drivers coming into the garage to change their tyres mid-race. The entire process needs to take about 2-3 seconds to avoid the driver dropping out of places in the race. Below is a video demo of what a pit stop looks like.

The game would consist of 3 rounds. In each round, the car slides into the screen from the side, and you are given the order in which you need to change the tyres. You must click on the tyres in the correct order to change them as quickly as possible. If you click the wrong tyre, you get a 2.0s penalty added to your time. Your goal is to score the lowest time possible

Design:

I started constructing samples of what I would like the visuals to look like. Below is a sample introduction screen, instructions page, and gameplay screen.

My original idea for the actual gameplay was to have an image of the pit stop view from the top. Something like this:

However, I am struggling to find the exact image I am looking for, which is just a cartoon-ish pit stop area image, clear of the car and pit stop crew. Therefore, I designed the game differently for now. If I do find the background image I am looking for, I will change the design.

For sounds, I plan to incorporate a sound for the car pulling into and out of the “garage”, and the sound of the wheel gun when the player selects the right tyre.

Most Challenging Part:

Something I am a bit stressed about is tracking everything. When I think of how to implement each feature individually, it seems simple in my head; however, connecting everything, such as displaying the next tyre to be changed after the user completes it, and detecting if the user has clicked the right tyre or not, sounds a little bit overwhelming.

Another challenging part is ensuring all the elements on the screen move accordingly when they are in full-screen mode

Risk Reduction:

To reduce the risk, I need to properly plan which classes I am going to create and what elements need to be linked together before I begin coding. I think this would help me a lot with the full implementation and organization of the code. It would also give me a better understanding of how to translate my vision for the game into reality.

 

Concept

Every time I walk into Madame Tussauds, I feel this strange mix of excitement and also superficiality from the figures I am encountering. Because you’re standing next to someone you’ve only ever seen on a screen, except they’re not really there, and yet it still feels like you “met” them. It’s staged and curated, but somehow still memorable in a way. That exact feeling is what I want to recreate for my midterm, but in a digital format.

I don’t want to build another game where you’re trying to score points or beat something. I want to build an experience you move through. My idea is to create a wax-museum inspired digital space where you browse through celebrities, pick one and take a photo with them in a photo booth setup.

The whole concept revolves around that illusion of artificial closeness. You’re not actually meeting anyone, but you still walk away with a cute memory. I want users to feel like they stepped into a staged exhibit for a few minutes and left with a souvenir!

Design

Visually, I don’t want this to look like a bright and cartoonish app. I want it to feel sort of dramatic in a way, with a dark background and clean and polished looking framed celebrity cards.

I actually like that wax museums feel a little staged and exaggerated. I want the digital version to embrace that instead of hiding it.

The experience will start with a dramatic opening screen with soft background music. Nothing moves until the user presses start. That intentional pause kind of mimics standing outside an exhibit before stepping in.

After that, there will be a short instruction screen, and then the gallery. The gallery will show multiple celebrity cards. When you click it, you’ll move into the photo booth scene.

In the photo booth, your webcam will appear next to the celebrity you chose. There will be a snap button with a camera shutter sound, and then a final screen showing your “souvenir.” From there, you’ll be able to restart without refreshing everything, because I don’t want the experience to feel like it just cuts off.

Sound is also very important for my interactive experience. The gallery will have background music, and I might let it shift slightly depending on the celebrity chosen. Small things like that will make it feel less flat and boring and more alive.

Frightening Part

The webcam honestly scares me the most. The whole idea depends on that photo moment. If the camera doesn’t work, the entire concept kind of collapses. Browsers can be weird about permission sometimes, and I don’t want to build this whole dramatic museum and then realize the main interaction fails.

Reducing Risk

Instead of leaving the webcam for later, I’m going to test it early. I want to make sure the camera actually works and shows up inside the canvas and that I can capture a image from it before I build everything else around it.

Testing the technical parts like the camera webcam early will make the rest feel less stressful, because once I know the main interaction works, I can focus on the atmosphere of my experience, which is honestly the part i care about the most.

The reading mentioned that computer vision works best when the artist helps the computer by controlling things like lighting, background, and contrast. Before reading this, I mostly thought of computer vision as a coding problem, but the reading made it feel more like a design problem too, which I liked because it connects the technical side to the creative side of interactive art. It also made me think about my own project, because even simple interactions can fail if the setup is not clear enough for the user or the system.

The reading also made me think more critically about how easily tracking can become part of an experience without users really thinking about it. In interactive art, tracking can make the work feel more immersive, but it can also feel invasive depending on how it is used. I do not necessarily think computer vision is automatically bad in art, but I do think it raises questions about consent and comfort. It made me wonder how artists can make interactive work engaging while still being clear and respectful about what is being tracked.