ICM Week #3

For this assignment, I wanted to use several components so I could practice all the different things we've been learning. For the background, I created a gif from a video game that I like. In the video game, there is a disco mini-game. I thought that would be a fun little inspiration to center my project around. The song that plays is from that mini-game. I made two different interactivity features: a color-changing slider and an audio effect button. The slider allows you to change the overlay color of the gif on the RGB scale. The button plays a sound effect when pressed. 

I spent a long time trying to figure out exactly how to do what I was imagining creating. I originally thought about making a slideshow of screenshots that are controlled by a slider so it gives the illusion of animation. This required knowledge of indexing and arrays, which I found to be very confusing, so I altered my idea to work with the knowledge I already had. There were a lot of little things I had to figure out on my own since they're not on the reference pages, like making the RGB overlay semi-transparent so it wouldn't obstruct the image and how to make the sliders smaller or bigger.

Like I said, I couldn't figure out arrays. The only other major issue I had was with audio. If I tried to put a loop condition onto my audio file so it would loop when it finished I just kept getting a message in the console log about the browser preventing auto-play. Additionally, I wanted to use a longer audio file for the button press but when I uploaded anything bigger than what is there now, p5 crashed. Instead of the audio file it would play a crackling noise and created lag. I tried to look it up and all I saw were people saying that p5 doesn't handle processing too much data like that well. If this isn't true, do you know why this was happening? The only other question I had was how to adjust volume per audio file. The main music file is really loud.