Link to project: https://editor.p5js.org/allenscai/full/L_IQYv0wJ
For this assignment, I chose to create an interactive narrative based around the song “White Ferrari” by Frank Ocean from his 2016 album Blonde. It’s one of my favorite songs of all time and perfectly captures the feelings of nostalgia and bittersweet love and childhood innocence.
I knew I wanted to emphasize these themes and elements in my assignment but struggled to find the best way to illustrate them through text-based and visual-based means. The original idea was to have all of the lyrics showing on the page when the user starts the program, and then the user could click on each line and read a story that was related to the lyric. I envisioned it as similar to the lyric annotation site Genius, where each lyric would have an annotation explaining the lyric, except instead of an explanation it would be a short story or exchange of dialogue. However, after discussing the idea with others and getting feedback in class, I realized I’d need to adjust the idea to be more interactive.

As I continued thinking about the idea, I started to consider the context behind why the user would be clicking through the lyrics and getting story information. I finally decided upon the idea of someone (played by the user) going on a drive and turning on the radio, hearing the song, and being reminded of certain memories.


The main user interaction in the game is clicking on the song lyrics, then typing certain keys to reveal and then elaborate on the memories, gradually revealing the story in the process. The main page includes a countdown timer–in the context of the game it is the ETA to drive to a destination–which adds a sense of intentionality to the user’s decisions, as they may not be able to read through all of the memories. Additionally, there is a “score” element, which is affected by the choices the user makes throughout the narrative. The more the user chooses the “sadder” memories or responses, the lower the score, and the more the user chooses “happier” memories, the higher the score. This was inspired by the fact that nostalgia can inspire both happiness and sadness, and sometimes a happy memory can actually turn melancholy and sad depending on how long one thinks about it. This gives users another reason to be intentional when unraveling the memories with the letter keys, as a happy memory can transform into a sad one in the next line.
The score will affect the gradient of blue and orange that makes up the background of the game; also, it will affect how many sad vs. happy answer options are present in the last question that the user is asked in the game. Ultimately, the purpose of the narrative is to explore how nostalgia affects our perspective on events and how it can be both beneficial and restricting.
There were quite a few problems I ran into, both in the conceptual phase and in the implementation phase. It did take me a while to realize what exactly I wanted to be the final product to be, and as a result it gave me less time to actually work on the code. Implementation-wise, there were a few features I wanted to do that I just was not able to figure out. One was having the user hold down keys rather than just press them to unravel memories, as I thought that would make more sense thematically in terms of making an effort to think deeply about a memory, but I was not able to get more than four keys held down at the same time. I also wanted the ending to involve the user erasing the frame or at least the text, but my attempts to implement this were not successful. I also may have set the scope of the project too wide, as I had wanted to include all four verses from the song in the narrative, but due to limited time I chose to just focus on the first two verses.



Leave a Reply