Interactive Storytelling — Eggy & Cube

Eggy and Cube 

Link to the Project

Description & Concept

        This project is based on Eggy and Cube, a story I wrote. I want to introduce the setting of my story and the main character’s personality through interactive storytelling. The project contains 5 scenes and users will follow the instructions and hints to interact with each scene and enter the next scene. Through effectively utilizing Object-Oriented Programming, p5 libraries as well as other software, I developed diverse interactions (through the keyboard, sounds, and mouse) and composed the graphic following a unified aesthetic. I still need to simplify and organize the diverse interactive ways, so that users can follow the narrative more easily.

Demo

 

Conceptual Development

Inspirations:

        I was inspired by scrolling interactive story: The Boat as well as Judgement Interactions: Digital Deadly Sins. I decided to embed sound interactions into my project and form different scenes.

Initial Design:

        At first, I want to develop 3 scenes that will showcase where Eggy lives. Users will first enter the forest where the invisible world lies and interact with the visual elements by clicking their mouse:

        When they click the special physalis hidden behind some grass, they will be navigated to the invisible world scene. They will then interact with the physalis through making sounds:

        When users click on the door (the circle in the middle of the physalis) of the middle physalis where Eggy lives, they will go inside the Physalis and see Eggy’s living room:

        And when they click on the ellipse on the floor, they will enter Eggy’s bedroom.

        However, when I started to create the forest scene, I found that constructing 12 classes and arranging them properly in one scene is too overwhelming. I may sacrifice the quality of visuals as well as the interaction design due to the limited time. Therefore, I chose to use only one class (Dandelion developed in week6 recitation) in the forest scene and focus on creating diverse interaction experiences in multiple scenes.

Character Design:

 

List of techniques and equipment

1. Main technique: Object-oriented programming
2. Programming: p5.js; p5 sound libraries; ml5 pitch detection model
3. Drawing the storyboard and scenes’ background: Procreate 
4. Music and sound effects: Garageband

Fabrication

Animating dandelion seeds’ transparency:

        I utilized the dandelions created in week6 recitation and tried to animate the transparency of the seeds:

        It took some experiments to make the seeds fade at the right speed:

 

        The animation didn’t work after I rearranged the codes and finalized the scene, which might be caused by using for loop to generate the dandelions. I felt that it was not a necessary effect, so I didn’t animate the transparency in the final version.

Generating random positions of the dandelions using for loop and array:

        In the week6 recitation, I manually defined the parameters of the seeds and dandelions:

        This was very redundant when I had to create more dandelions, and it was frustrating to scale the dandelions with the scale function:

                         .       

        I found that the x, y positions of the stem and the seeds are the same. So I decided to use two arrays to store the x, y positions of the dandelions and generate the positions through the random function. 

        But the seeds and stems parted and the circle at the end of each seed disappeared, and there was no error message:

        After a long time of debugging, I found that I missed the parameter “dirty”.

        Another problem was, the dandelions appeared randomly across the canvas, and Eggy couldn’t appear at the position where the dandelion crowd is the densest. I struggled a lot the associate the Eggy’s position with the density of the dandelions. After researching online, I found p5 had a “randomGaussion” function which corresponds to the knowledge of Gaussian distribution. By experimenting with the standard deviations and means, I found the most satisfying visual effect while making sure that Eggy was hidden well behind the dandelions:

Playing the background music when Eggy is clicked:

        At first, I tried to assign each lantern elf a specific note so that when I clicked on one elf, it would sing his note. I tried to achieve this by adding a “checkMouse” method in the class “Eggy”, using this.x and this .y as the first two parameters of the “dist” function. However, I could only trigger the sound when clicked on the left upper corner of the window. I tried to replace “this.x” and “this.y” with “width / 2” and “height / 2”. And it successfully located the clicking region to the elf in the middle (which is very weird because I’ve already translated the elf to the middle position).

        I failed to solve this problem. So I tried an alternative: using the keyboard to trigger the individual notes. 

        To make the physalis’s door glow its associated note is detected, I used an array to store the scale and utilize the ml5 pitch detection model to detect the pitch. Different from the music visualization in my Project One, I only used the notes in C major scale because I created the lantern elf’s song in C major:

        Here is a test of the lantern elf’s song and the vocal parts:

Play audio files using mouse interaction:

        I imported several pieces of music from YouTube as well as my compositions and used “.play()” & “.loop()” to play the audio file. At first, I just put the play method in the draw function, and the music is started and repeated by every frame which caused a horrible sound. I solved this problem by using mouseIsPressed as a signal of starting the sound:

        This works well in the first two scenes where only one mouse click interaction is needed (It might still run into trouble if users happen to press twice or press the button for a long time). But in the last two scenes, users have to press Eggy for a long time to read the message. And Eggy’s sound effect is played every frame during the press, which sounded as if Eggy was screaming. So I used “.isPlaying” to avoid the sound being played too many times:

Background of the living room and bedroom scenes:

        At first, I used the sketch I drew when designing the scene and I used a testing ellipse to determine the mouse interaction region:
The full window mode for presentation:

        I created this project with preview mode in p5 Web editor, so the size of the window differed greatly from that in the presentation mode:

        I had to rearrange the size and positions of visual elements in the scenes to make sure that they fit the window size. Next time I may open the presentation mode before creating the project to save time.

 

Attributes

1. Music Credit:
   1. Forest bgm (Forest Music Instrumental – Raindrop Woods)
   2. Storyboard bgm (Edward Scissorhands – Ice Dance Music Box)
   3. Living room bgm (crossing field_LiSA [Music Box])
   4. Eggy’s Sound Effect
   5. The lantern elf’s song and vocals in the 3rd scene, as well as the bedroom bgm is generated by me using Garageband
2. Font Credit: Indie Flower