Interactive Game Poster - Legend of Zelda

Walkthrough of Features

    The main focal point is the playable ocarina. You can play the same notes as in Ocarina of Time/Majora’s Mask by clicking on the glowing buttons (labelled ^ < > v and A). There’s also a volume slider, and a dropdown menu that allows you to pick different songs from the aforementioned games. When you change songs using this dropdown menu the ocarina will demonstrate the song, playing the notes and highlighting which ones are played with a green circle. If you play any of these songs yourself a jingle will play and the ocarina will play the song itself in a similar fashion (sort of like how the full songs are played after you play them in the games). The title on the poster will switch depending on which game the song you’ve chosen first appeared in (e.g. playing Song of Healing will display Majora’s Mask, while Song of Time will display Ocarina of Time).

Design Goals

    In a similar vein to my game poster, I wanted to make something that focused on the musical aspect of Ocarina of Time and Majora’s Mask. I ended up making a playable ocarina to allow users to interact directly with the game’s songs in a similar way to how they would in-game. I went for a chalkboard art style, partially to make the poster seem playful, but mostly because I can’t draw. The bright colors are also intended to portray this playfulness I was aiming for.

    The internal structure centers around parsing a long set of arrays that contain all of the playable songs from the games. There’s an array that keeps track of all the notes you press in order, and every time you play a new note it compares the last 5-8 notes with every possible song to see if any match. This part took me the longest to set up properly.

    The visuals mainly rely on iteratively drawing shapes to the canvas while using time variables to make these shapes appear for a specified amount of time. I also use the time variables to do linear interpolation on the opacity of the glow over the ocarina buttons (in a funky parabolic shape!). These are concepts that I was mostly familiar with from using Unity and webgl.