For this week in Computational Media, I created an educational guide about animal sound facts. To develop the guide, I created a large number of functions. Throughout the assignment, I encountered some very challenging coding issues.

Link to the correct p5.js sketch:
Link to the correct p5.js sketch on Github:
Link to the p5.ks sketch sketch with a bug:
Link to the p5.js sketch with a bug on Github:
The beginning

When I code, I got into the habit of first focusing on the structure and then filling in the details. I created several functions, each leading to another path. I initially created eight variables, each representing an animal. My function setup contains the function beginScreen. The beginScreen consists of four buttons, which are separated into birds, reptiles, insects, and aquatics. The function beginScreen contains the function allSounds, which plays every audio all at once. The audios are in the function preLoad.

removeElements() fixed my issue

Each time a button is pressed, a new function is called. My four categories each contain two choices for the animals. The functions for each animal consist of an image, audio file, text, and a reset button that returns the user to beginScreen. The previous options in each function are eliminated with the function removeElements. Eventually, I removed my reset button because I encountered peculiar audio behavior. I discuss the issue later in my blog post.

I customized the buttons with CSS elements. I used RapidTables for the hex color codes. The audio is from SoundBible and the images are from Unsplash. My goal in the sketch was to create a fun educational tool. I desired the user to follow animal noises, which would lead them to interesting facts. In the first screen, all of the audio files are played. Then, in the second screen only two audio files are played. For example, in the aquatics page, the whale and dolphin noises occur. Finally, in the last choice only one animal noise is played.

I found stopping music as the user navigates my sketch to be very difficult. My sketch this week is unusual because I actually found a bug in p5.js. I spoke to two residents who confirmed my suspicions.

endMusic() works in the second level
endMusic() does not work in the third level

I created the function endMusic, which ends all of my audio files with .stop(). In my initial sketch, there are four categories. When a category is activated, endMusic() stops the noises and then I activate my desired tracks. For example, birdsFacts() successfully consists of endMusic(), pigeonsSound.loop(), and batsSound.loop(). If the user clicks another option however, such as bats or pigeons, this method does not work. The function endMusic() works in the second level of my sketch, but not the third. I believe that endMusic() should work again because my functions between the second and third levels are practically identical. The Human in Residence Cassie told me to report the issue.

Boolean statement

To overcome the technical issue, I first experimented with boolean statements. I would set my audio to false, which temporarily solved the issue. I noticed, however, that the audio files would not stop immediately. If I reached the pigeon page, I would have to wait for the bat loop to end for a long period of time.

Reset button

In order to stop the music, I manually set the volume to 0 for the audio file that needs to stop. Another issue I encountered is with creating a reset button. My reset button returns the user to the function beginScreen. While I am able to remove audio in my correct version, once I restart the sketch a lot of unusual behavior occurs. For example, if I viewed the fun fact about bats and reset my sketch, the audio for my pigeon fun fact would be silent. Additionally, if I viewed a fun fact from a different category other than birds, the bats audio would play along with the new animal audio. I am unsure as to why some audio is carried over while others are completely silenced. I do not believe this is a bug and may be solved with boolean statements. In my correct version I decided to only include one reset button for the bat, which I hope to test more in the future.

The user navigating my sketch