Interactive Media Midterm Documentation 

My Concept: When assigned the midterm project I immediately knew that I wanted to create a game that resonated with Formula 1. My initial focus was on creating a game that was simple and accessible to play. I got some inspiration from familiar computer games such as Tetris and Flappy Bird and I aimed  to incorporate similar functions and elements through straightforward controls, such as the use of arrow keys. This idea initially inspired me to create a game where you avoid hitting any competitor cars and try to achieve a new time highscore each time. However, I later thought that this idea was too generic and decided to correlate to myself more strongly. 

Therefore, I came up with the idea of basing my game off of the Abu Dhabi grand prix in Yas Marina Circuit. The Abu Dhabi GP is famous for starting in the daylight and finishing at night which is a feeling that I wanted to recreate in the game. Therefore the whole race happens as the track slowly transforms from daylight to nightline in the span of 60 seconds. 

Therefore, this inspired me to move away from the idea of only focusing on survival, and instead revolve it around the time span between day and night. Therefore before each race, the player gives a random number of gold tokens to collect between 10 and 20 and the aim is to collect them all before the sun sets. However, if you crash into another car before collecting the needed amount of tokens you immediately lose. This differentiates my game to others as not only is it based in Abu Dhabi, but also challenges the player as they have to decide between going for a token or remaining safe from competitor cars. 

How the game works: 

I decided to split the game into several screens such as the start screen, goal screen, race screen, game over screen, and win screen. In order to keep track of which screen the game is supposed to be on, I created a variable called gameState. Whereas the draw function makes sure to check it in every frame to show the right screen. Using the mousePressed function I was able to create the “start” and “play again” buttons which work by checking if the mouse is clicked within the boundaries of the button’s rectangle (ensuring to only start the game when the player intends to do so). 

One of the most complicated parts of the code was creating the motion of the road whilst ensuring that it was switching from day to night. To do this I used a top-down track image that I drew onto the canvas twice, one on top of the other. The two images therefore slide down every frame allowing one to go off the screen whilst the other enters. This creates an endless effect that allows the road to look like it is continuously moving and changing. To create the transformation from day to night I used a progress value from 0 to 1 based on the timer. This progress value ensures to split the time equally between day to night. I then remembered using the map function in one of my previous weekly assignments and therefore thought that It would be suitable to implement into the game. Therefore the map() turns the progress into a transparency level, so the sunset image fades in over the day image in the first half of the game and the night image fades in over the sunset image in the second half of the game. The tint function is also used to make each of the next images lined up see through, working with the progress function to know when an image should disappear. ُthis all takes place while the images scroll in order to keep the track moving.

// changing sky from daylight to sunset to nightime
let progress = constrain(survivalTime / raceLength, 0, 1);

if (progress < 0.5) {
  drawScene(dayImg);
  tint(255, map(progress, 0, 0.5, 0, 255));
  drawScene(sunsetImg);
} else {
  // sunset to night
  drawScene(sunsetImg);
  tint(255, map(progress, 0.5, 1, 0, 255));
  drawScene(nightImg);
}

The competitor cars and tokens were made using classes called “Obstacle” and “Token”. Each class keeps its own position and speed and has its own move() and show() implemented into the code. They are stored into arrays, allowing the game to add a new obstacle/token over time and as the game proceeds.

 

// Setting up the race and game page 
function startRace() {
  enemies = [];
  tokens = [];
  tokenCount = 0;
  nextCar = 60;

  // Doubling the tokens needed to ensure that its always possible to win 
  tokenGap = (raceLength - 5) / (tokenGoal * 2);
  nextTokenAt = 1;

Code that I am proud of:

The part of the game that I am honestly proudest of is how the game is kept fair. I ensured to keep the game fair through the use of certain elements such as releasing double the amount of tokens needed that are spread evenly across the race rather than being saturated over one area of the track. This therefore allows every goal introduced in the goal page to be achievable. I am also proud of the function that I created called spotIsFree which checks to see that nothing is on the track before adding a new token or competitor car. I also ensured that the competitor cars and tokens drive at the same speed so that they can never drive into each other, therefore ensuring fairness across all ends.

 

// release a new token when it's time
if (survivalTime >= nextTokenAt && survivalTime < raceLength - 5) {
  let x = random(roadX + carW / 2, roadX + roadW - carW / 2);
  if (spotIsFree(x, -40)) {
    tokens.push(new Token(x));
    nextTokenAt = nextTokenAt + tokenGap;
  }
}

 

Problems and areas for improvements:

Overall, I am really satisfied with the final outcome of the game. However, I did run into several issues throughout the process of creating it. Most of the issues included small bugs such as typos like capital letters in variable names, using = instead of ===, or a : instead of a ;. This therefore taught me to go back and read my code carefully, as well as use the console errors to guide my mistakes as I tend to avoid reading these especially when they’re too long. Some of the other issues that I ran into included images failing to load when uploading files, cars overlapping with one another when I tried to implement random speeds, and the game slowing down when I added the tint function and custom font. 

Therefore, if I was given the opportunity to work on this assignment again, I’d make the game run more smoothly on every computer by looking back at the issue that was slowing the game down and creating unsmooth transitions between frames. I would also find a way to randomize the speeds of the cars without facing the troubles of them overlapping on top of one another. It would also be really cool to add more F1 features such as DRS boosts, pit stops, and real team competitors. 

References 

Use of AI:

Throughout the project, whenever I encountered difficulties or was unsure  of what functions are available for use to code a particular element, I used AI to explore potential functions and techniques that could help me achieve my intentions. For example, this helped me learn about the progress reference, which divided the game into equal sections, the tint function, which made images transparent, the floor math function, which rounded the number of tokens down to a whole number, and the constrain function, which helped keep the cars within the track boundaries. This guidance allowed me to investigate these functions further using other resources such as the coding train videos, understand how they worked, and apply them to my code to achieve my intended effects. I also used AI to generate background images for the game and create the sound effect of a car collision.

Other references: 

https://www.dreamstime.com/illustration/formula-top-view.html 

( this is the competitor car image reference used throughout the code)

https://www.youtube.com/watch?v=1Osb_iGDdjk

(This is the coding train video I watched on conditional statements to remind me of them when creating my game)

https://www.youtube.com/watch?v=cnRD9o6odjk

(I also watched this video on while and for loops for a refresher when creating my game)

https://www.youtube.com/watch?v=tA_ZgruFF9k

(This video on removing objects from arrays helped me when trying to get rid of the coins that were touched and/or passed and not collected)

https://www.youtube.com/watch?v=nicMAoW6u1g

(This video taught me more about masking which helped me when trying to transform one image into another using transparency features)

https://fonts.google.com/specimen/Permanent+Marker?categoryFilters=Feeling:%2FExpressive%2FActive&preview.script=Latn

(This is the font I used throughout my game)

Works Cited

Ostroukhova, Alena. “Black Silhouette of a Formula One Car With White Outlines. Racing Car Side View. Wheels, Spoilers and Halo. Form High-Speed Transport. Isolated on White Background. Illustration..” Vecteezy, www.vecteezy.com/free-vector/formula-1-car-isolated. Accessed 14 Oct. 2026.

“Pixabay.” Pixabay.Com, 2024, pixabay.com/sound-effects/search/coin/. Accessed 14 Oct. 2026.

The Coding Train. “2.5: The Map() Function – P5.Js Tutorial.” Www.Youtube.Com, 4 Sept. 2014, www.youtube.com/watch?v=nicMAoW6u1g. Accessed 14 Oct. 2026.

—. 3.1: Introduction to Conditional Statements – P5.Js Tutorial. YouTube, 10 Sept. 2015.

—. 4.1: While and for Loops – P5.Js Tutorial. YouTube, 11 Sept. 2015.

—. 7.5: Removing Objects From Arrays – P5.Js Tutorial. YouTube, 17 Oct. 2017.

After reading and understanding “Computer Vision for Artists and Designers” I found it particularly interesting how computer vision is able to turn an individual’s physical movements and environment into a method of interactive art through digital media. It was definitely enjoyable to be able to see examples of interactive artworks that were shown in the article as they revealed that a camera does not simply have to be used to record someone or something, instead it can be used as a meaningful tool to make an artwork responsive. The LimboTime project also stood out to me because it showed me that even beginner programmers can create an interactive game using simple computer vision techniques. A key topic that was mentioned about the physical environment was also interesting as I was previously unaware of how elements such as lighting, contrast, and background can influence a computer’s ability to detect a person. 

Computer vision differs from human vision as humans are able to naturally understand what they are seeing in front of them, whereas computers can only see an image as a collection of pixels. Therefore, a computer tends to require several specific instructions and codes to recognize peculiar things in images.Computer vision also relies heavily on the conditions of the surrounding environment, whereas humans are generally able to distinguish an object from its surroundings more easily.

There are particular techniques that have been mentioned in the text which are used to help the computer in tracking and seeing what we are interested in. Some examples that are mentioned include frame differencing which compares two video frames in order to detect movement. Background subtraction which is also similar but compares the current image to an image of the empty background in order to identify the difference. Brightness thresholding is another technique which is mentioned which allows the computer to identify objects based on whether they are lighter or darker than the surrounding threshold. Techniques such as finding the lightest or darkest pixel can also be used to identify specific objects. 

I think computer vision’s tracking and surveillance approach can have both a positive and negative effect on interactive art. When looking at the positives, this approach invites artists to create meaningful experiences where their artworks can respond directly to the viewer’s body, movement, or facial expressions. This therefore invites the audience to make their own interpretations of the artwork through personal experience and involvement. However, one of the disadvantages that particularly stood out to me when reading the text is the concerns regarding privacy and surveillance as this technology can be used to monitor individuals without their knowledge or consent. This therefore reveals that computer vision can be both a useful tool for creating interaction and also invites artists to question how technology can observe and collect information about us.

1. “What’s something not mentioned in the reading that drives you crazy and how could it be improved?” 

Something that drives me crazy is the buttons on my hair straightener. Sometimes, while I am primarily using the heat function, the fan function suddenly turns on by itself. I am not sure whether this is a built in safety feature that turns on when the straightener becomes too hot, but I believe this could be improved by applying Norman’s principle of feedback to the design. The straightener could provide a clearer sign of when the fan is activated, rather than having it turn on unexpectedly and without any clear intention of clicking its button from the user.

After reading chapter 1 of “The Design Of Everyday Things” by Don Norman it has become clear to me that when individuals struggle with the design of a product, the issue often lies in poor communication from the designer’s end. Norman therefore introduced the idea of Human-Centered Design which is the ability for a designer to create certain designs around individuals needs, abilities, and behaviors instead of forcing individuals to adapt their capabilities in order to support confusing technologies. 

In order to elucidate his argument, Norman introduced his idea of the fundamental principles of interaction being: discoverability which refers to how easily the user of a technology figures out what they can do. Signifiers are the signals provided to a user in order to broaden their understanding of what to do and where to do it. Affordances which is referenced several times across the chapter and refers to the possible actions that can be done with an object. Mapping refers to the effect of an action or a control that had been designed on an object and how efficient/understandable it is. Feedback should be reciprocated almost immediately and informatively once an action has been taken. And lastly Norman argues that users should be able to develop a clear idea of how systems work through conceptual models. 

Being able to understand these key terms and fundamental principles through Norman’s point of view allowed me to reflect on my previous work in interactive media. I noticed that in some of my previous artworks, I failed to clearly communicate what actions and controls the viewer could take, instead assuming they would automatically understand how to interact with the work. In reality, this assumption could have caused viewers to do nothing, as they may have simply stared at the artwork without interacting with or changing its design as I intended. Therefore, this text brought me to understand that Norman’s principles can be applied to interactive media by allowing interactions to be easily discoverable through clear communications and immediate feedback. For example, if sliding the mouse around the canvas changes the color of the background, this should be communicated in a clear and understandable way through signifying.A clear interaction can also help the viewer understand how their actions and control directly affect and alter the artwork. Understanding these principles will also be meaningful when creating the upcoming video game for our midterm project, as clear instructions and intuitive controls are essential for making the game enjoyable and easy to understand.

My Concept: For this assignment, we were tasked to create a generative text output using P5js and the skills that we acquired from class. When assigned the task I immediately thought of creating an artwork that contained the Arabic language and began to brainstorm how I could incorporate this. I then thought of linking this project to the UAE and came up with the idea of using generative text to form the shape and outline of the UAE map through the use of repeated verses of the national anthem in Arabic. This therefore sheds light on Emirati identity and culture whilst also using code to create a generative text output. 

How this was made: Honestly I started off the assignment being really stuck and confused as I was unaware of how I can get the coordinates of the UAE map and allow it to fit into my p5 canvas. I’ve also not had much experience creating my own shapes so therefore I decided to start by watching the Coding Train’s video on custom shapes. After being stuck for a while I decided to ask ChatGPT what the most convenient way of finding the coordinates would be and it said to upload a reference image of the map to another folder and print the image on the canvas using the loadImage function. I later used the mousePressed function to record the coordinates of each point I clicked on the map, which were then displayed in the console. Once I had collected all the coordinates, I added them to a separate folder to keep my code organized and tidy. I then used a loop to connect the coordinates and create an outline of the map. Once the map outline was successfully drawn, I commented out the code that inserted the original image to help avoid confusion and keep the final code cleaner.

Once the outline of the map was created, I stored the national anthem verses in an array which I called “verses” for simplicity. This allows p5 to then randomly select verses from this array. I also used the p5 createGraphics function to create a new layer that is particularly used for the arabic text to be separated from the rest of the canvas before applying the UAE map shape to it. Later, I ensured that the text sizes of the verses varied between 12 and 18, I ensured randomness of the colors of the UAE flag, and random spacing between the verses. The textWidth function that I used was particularly important as it calculated how wide each verse was before adding the next one in order to avoid overlapping. 

Then, most importantly I created a mask in order to keep the text layer primarily inside the UAE map outline. This allowed for only the parts of the text that fell within the UAE shape to remain visible; creating the formation of the map effect. 

Lastly I decided to add some final touches in order to elevate the artwork. I created a sandy background using a beige color; followed by a for loop to add 15,000 small randomly placed ellipses to imitate the effect of sand particles. Each ellipse has slightly different colors, sizes, and transparency, which creates a textured effect that looks like sand. I also decided to incorporate a font that looked like Arabic calligraphy by using the await and load font function. This was pretty easy to do as it required the same skills that I used to upload the image into the canvas. 

Code that I am particularly proud of: I am particularly proud of the way in which I was able to successfully create an outline that looks like the UAE on a map. Despite this being the biggest struggle that I faced when working on this assignment, I am satisfied with the way that it turned out in the end. Initially, I was going to insert all the coordinates required to draw the outline into the main sketch under the draw function. However, I soon realised how messy this would turn out and used a loop that was able to grab the coordinates from a separate folder and create the same effect and outline that I was looking for. 

  // mapImg = await
  // loadImage('UAE.jpeg');
  //image( mapImg, 0, 39, 600, 522);
}

//function mousePressed() {
//console.log("vertex(" + mouseX + ", " + mouseY + ");");}

  beginShape();
  for (let i = 0; i < uaePoints.length; i++) {
    vertex(uaePoints[i][0], uaePoints[i][1]);
  }
  endShape(CLOSE);
}

 

Reflection and ideas for future work or improvements: Honestly, I am really satisfied with the end result of this project and I do feel as though I was able to successfully display my initial intentions onto the canvas. As for ideas for future work, I felt as though my code could have been organized more efficiently throughout the process as I found myself getting confused with certain functions at some points which forced me to go back and reorganize all of my code from scratch. Therefore I believe that this is a skill that I should carry each time from the start of a project to the end in order to avoid future confusion and uncertainty. As for improvements, I struggled to create the shadow, particularly around the back of the map. Therefore, the shadow appears greyish and white in some areas which I feel creates a sense of visual confusion. In the future, I would like to understand how I can create a more consistent shadow effect to avoid this issue.

After watching Casey Reas’s Eyeo take on chance operations and the idea of randomness in generative code, I was highly drawn to his idea of the co-existence between control and randomness. His talk particularly reminded me of a moment that I experienced when creating my generative artwork as a new coder. At first, I highly intended to create a piece that sparks a sense of realism to the audience. However, my perspective quickly changed when I typed a piece of code wrong and my entire artwork was changed for the better. The artwork now had more life and interactivity to it, which I believed was the better direction as it opened doors for varied interpretations and understandings. Reas’s particular argument that having a balance between order and chaos definitely illustrated the idea that unexpected results can spark interest and curiosity as opposed to a fully ordered and precise piece. 

Moving forward in the Interactive Media course this semester, I was highly inspired by Reas’s approach to randomness and therefore I plan on incorporating random elements into my work by looking at code as a space for experimentation and play, rather than a set of rules that must be strictly followed. This perspective challenges my previous perception of coding as something restrictive and inflexible. I already began incorporating randomness and chance into my pieces through elements such as color, speed, and space. 

After watching the video and understanding Reas’s perspective on control and randomness, I believe that the optimum balance between total randomness and total control lies in the artist’s intentions for their artwork. A big part of art is how the audience perceives it; therefore, by incorporating randomness through interactivity, artists enable the audience to approach the artwork from their own perspective. This creates and illustrates new meanings and understandings, whereas total control can limit the accessibility/opportunity to discover unexpected possibilities within an artwork. I personally believe that the percentage of randomness should be slightly higher than the percentage of control in generative art as this approach allows for more unexpected outcomes and gives the artwork a greater sense of creative meaning.

My concept: For this assignment we were tasked to create a generative artwork which included a variety of elements that we have learned in class throughout the first two weeks. For this artwork I was particularly inspired by two things including webs and the way moving lights create trails across certain images, particularly in the dark. Therefore, I wanted to create this digitally using P5js through the representation of moving stars that are interconnected through the use of lines to create the web effect in which I was inspired by. As the stars move, the moving mouse changes their speed and colors which enhances the artwork’s interactivity. 

Code that I am particularly proud of: Something that I am particularly proud of completing in this artwork is being able to achieve the effect of the speed changing as the mouse moves around the canvas to enhance interactivity. I did this by following the steps of The Coding Train on youtube, particularly his video where he creates the starfield simulation. The skills I learned about speed through this video will definitely be used more throughout the course in the upcoming future. 

speed = map(mouseX, 0, width, 0, 20);

How was this made: This artwork was made by primarily following the tutorial of The Coding Train on youtube as stated above. The video which is titled “Coding Challenge 1: Starfield Simulation” is a high speed tutorial which demonstrates how to achieve movement and perspective in p5js through the scenario of stars in the sky. After following this tutorial, I was able to make my own amendments to the artwork such as adding my web-like lines as stated in my intentions/inspiration, whilst also adding more mouse features such as the color changing lines. I would say that one limitation that I faced using this video is that it is 10 years old and uses the old P5 model, therefore I faced a few moments where I struggled with some of the language used in the video, however I was able to resolve this issue through the use of AI to translate old P5 language into the language in which I am regularly familiar with.  

Reflection and ideas for future work or improvements: I am overall very happy with the final result of this artwork as I was able to complete something different from the previous self portrait assignment, whilst also learning some new pieces of code and functions that can be further used in upcoming projects. For future work, I really want to attempt to create something that has a sense of realism, as this was attempted for this artwork initially through the creation of a realistic flower, but unfortunately didn’t work as I faced some difficulties in understanding dimensions and sizes that could help me translate the flower into my desired artwork. Therefore, for next time I would definitely like to watch more tutorials from various sources to expand my knowledge and understanding on coding and hopefully become more aware of the app.

My concept: As our first assignment in the introduction to interactive media course, we were instructed to create a self portrait using strictly code on the p5js website. It was incredibly interesting to try and develop new skills through the use of lines and shape in order to create a realistic figure. Going into the assignment, I decided that it would be best to replicate my everyday look at university to experiment with the website and learn more about the foundations of coding as a beginner. 

How this was made: I began the process of creating my self portrait by setting the canvas to an ideal size in which I chose to be (600, 600). This guaranteed a large working space that allowed me to comfortably develop different elements of the self portrait. I then began the process of creating the face and eyes using the eclipse function. Because I had previously practiced using the eclipse function in class, this was pretty easy to manage. However, when it came to creating the nose, eyebrows and the mouth, I struggled with what shapes and functions to use in order to do so. To resolve this confusion, I used the help and reference button provided by p5js to review the different functions that are available for use. I also used the help of Chatgpt by asking what possible functions could be best suitable for certain facial features, as well as in moments of uncertainty when dealing with certain dimensions and the meaning of each value within coordinates. Doing this allowed me to learn more about other shapes such as the use of line, arcs, and triangles. 

Once I was done with the primary facial features, I moved on to the hair. Personally, the hair was the feature in which I struggled the most with this assignment as I was unaware of what shapes and functions I could use to create something realistic. This encouraged me to just experiment using the ellipse feature as it was the one I was most comfortable with. Therefore I created several ellipses to form dimension and realism in the hair. I also experimented by using the rect function which I found in the reference section of the p5js website to create a darker layer of hair behind the neck to create a sense of light and shadow. I also managed to create an interactive function in the background as it changes colors when in contact with the mouse. I did this through the use of adding the mouseX and mouseY feature that was learned in class into the fill RGB function. 

Code that I am particularly proud of: After completing this assignment, I am particularly proud of the clothes in which I created. I decided to try and replicate an abaya through the use of different shapes and functions. Once again, I used the curved rect function to create the body, followed by regular rectangles to create both the shaila and tshirt underneath. I also used the triangle function to create a collar to go around the neck. I am particularly proud of this code as I created it without the use of any references, through the use of my skills that I have developed throughout the assignment and the creation of different features in the self portrait.

// Clothes 
 fill(255, 180, 180)
 rect(160, 500, 280, 150, 90);
 fill(255, 200, 200)
 rect(220, 500, 150, 100)
 fill(255, 255, 255)
 rect(240, 500, 105, 100)
 triangle(345, 500, 345, 480, 280, 500);
 triangle(250, 550, 250, 480, 300, 500);
 }

Reflections and ideas for future work or improvements: Overall, I am highly satisfied with the final outcome of this self-portrait, particularly because this was my first time coding. I believe that I have been able to develop certain skills which can be used further throughout my time in this course and that I have developed a fundamental understanding of coding using p5js. As for future improvements, I would like to become more comfortable with understanding what certain functions do such as the curves and arcs, as I found the most difficulty in trying to use these elements and I believe that they could have helped me in creating certain features like the hair and clothing. I would also like to deepen my understanding of what the numbers within certain functions represent in order to more effectively position and adjust the shapes without the struggle of spending too much time trying to figure out their coordinates. I am looking forward to seeing how the skills that have been developed in this assignment can help me when it comes to future coding assignments.