Here Comes the Boom
Learn how to incorporate external libraries by walking through a ready-made example
Events: The Big Picture
So what is Boom? Boom is a web application where each letter on your keyboard corresponds to an animated audio circle that will be displayed on the screen. To make things more interactive, I created a way for users to record their own audio and play it back!
myCanvas will tell the Paper.js script what ID to look for when creating its graphics.
Let’s Start Building
Still with me? The first thing we’re going to want to do is to figure out the functionality needed to add a circle to the page. Paper.js has a built-in function
onKeyDown() that takes in the user's event, we will then manipulate that event data to add a random circle to the page. Check out the code below.
What the function does is first create a variable called
random() method to set it to any random spot within the frame. Lastly, we create a variable called
newCirclethat will use the Paper.js
Circle() method to pass in the variable
pointand size for that circle. The new circle will then use information based on the key data to match it to a certain sound and color.
You might be looking at the previous code snippet thinking, “where did these
fillColorcome from?” Don’t fret! In this next section, we will go over how to use Howler.js and Neuronal-Synchrony to add sounds and colors to our circles.
Note: If you haven’t done so already, make sure to download the sounds you want to play from Neuronal-Synchrony and drop it into your project directory. For this project, I used the sounds from assets A within the Neuronal-Synchrony repository.
Now let’s make our first howl! We are going to initialize a new
Howl(). We will then feed the
Howl()function a list of URLs that contain the sounds and fill colors for the keys. The below code will create a variable called sound that will store a new howl with the
['sounds/bubbles.mp3']. Because Howler.js was built prior to it, we will be using ES5 syntax.
With Paper.js, it’s extremely easy to tell our project what key the user is pressing. Remember the event we passed into our
onKeyDown() function? We can take that event and using dot notation to receive the key value. We will then take that key and tell Howler.js to run it into the built-in
play()function, to play the sound.
To keep all the key data organized, I created an object called
keyData that stores all the letters of the alphabet, their sound, and color.
Now that we have the circles and sounds ready, let’s more functionality. This is so that the circle scales down in size as the sound is being played. For this function, we created an empty array called
circlesthat we use in our
onKeyDown()function. When the user presses a key the
onKeyDown() function will push that key into our
circlesarray. The newly created function will then take that
circles array, iterate through it, add a bit of hue to the color and scale it at a certain size. And that’s it!
We covered a lot, but all we really did was take some code that we found to make a circle, animate it, use user events to combine that circle with sounds, animations, and display it to the screen. I would highly recommend looking over the code a few times to fully digest how it works. If you want more of a challenge try creating a record and play button, that will allow the user to record and playback their key snippets!
Here are some of the lessons I learned:
- Read before taking action.
- Experiment with the new code.
- Have fun!
I know as a student you are very eager to start building projects but my biggest lesson learned from this project was to read before rushing into the project. There is so much valuable information within any documentation that can help save you from wasting time trying to figure out where the bug is within your code. In my opinion, being comfortable with unfamiliar code is vital to becoming a great software engineer and something you will encounter a lot, so slow down and take some time to understand the meaning behind the code.
Once you have read the documentation, experiment with the code! Take those code snippets and play around with them in your code editor. Add code in, remove code, log to the console different variables; it’ll only help set you up for success.
Lastly, do not forget to have fun when you are building projects. Coding is very challenging especially when you are working with new technology remember to go easy on yourself and have fun along the way. I guarantee it will be reflected in your project. I hope you enjoyed building this project as much as I did! Feel free to reach out to me and share your new projects in the comments below.