Here Comes the Boom
Learn how to incorporate external libraries by walking through a ready-made example
Goal: Explain Javascript events and different external libraries, walk you through the makeup of Boom, how it was built, and the lessons learned.
Requirements: A basic understanding of HTML and Javascript.
Events: The Big Picture
Before we get started, we must speak about Javascript events. According to MDN, “events are actions or occurrences that happen in the system you are programming, which the system tells you about so you can respond to them in some way if desired. For example, if the user selects a button on a webpage, you might want to respond to that action by displaying an information box.” When writing Javascript, you use these actions and write code that does something in response.
You can accomplish almost everything in Javascript, using just a few events. To illustrate how important they are I’ve created Boom! Let’s get started!
Boom! 💥
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!
During my time at Flatiron, I had never incorporated any external libraries into my projects. To get more experience with foreign code and documentation, I challenged myself: I began by incorporating two different Javascript libraries.
This web application was built with HTML, Javascript, Paper.js, Howler.js, and Neuronal-Synchrony. Paper.js is an open-sourced Javascript library for vector graphics that runs on top of the HTML5 canvas. It’s an easy way to get started using vector graphics as a beginner. Howler.js is an Audio library for the modern web, and Neuronal-Synchrony will provide us with the sounds for this project.
Before we start to code any Javascript you’re going to need to import all of the external libraries and sounds to your HTML file, as shown above. Also, to ensure Paper.js can create vector images, create a canvas element within the body of the HTML file. Including the canvas element with an ID of 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 maxPoint so that the circles will not be bigger than the frame of the page by using the DOMs built-in methods. Once that point is created we use the Javascript 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 keyData, sound.play() and 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 ouronKeyDown() 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!
Together, we have successfully implemented new Javascript libraries into our project and used them to display an array of different sounds to the screen. How exciting!
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!
Lessons Learned
In retrospect, I learned many different lessons with this project. It was the first project that I created that allowed me to practice the programming theories I was learning but also, take it a step further and include completely new Javascript code that I never encountered before, manipulate it and make it my own.
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.
