Code an Audio Visualizer in p5js (from scratch) | Coding Project #17

[Music] in this video we will make this music visualizer the visualizer can be divided into three components the waveform in the middle the particles around it and the responsive background so make sure to watch till the end if you want to be able to create all these components yourself as always the source code from this tutorial is free to download for my patrons you can read more about this in the description below let's get started [Music] before you start coding you need to include the p5.js sound library in your project and reference it in your html file if you don't do this some of the functions we are going to use will not work i will leave a link to the p5.js website in the description where you can get it if you don't have it already i've got a very basic setup here with a canvas and a black background first step is to load the music that we want the visualizer to respond to the best way to do this is with the preload function the setup and draw function will not run until this function has run this ensures that the sound file has been loaded properly before anything else happens we can now make a global variable to store the song in in order to actually load the song into the variable we can use the load sound function all we need to do is specify a path to the song i will use this song from the youtube audio library most browsers don't allow audio to start automatically so we need to write a function that allow us to start and pause the song we can use the mouse click function to do this depending on if the song is already playing we want the song to either start or pause [Music] that is working so far so good in order for p5js to be able to generate the waveform we need to use the fft object make a global variable and store the fft object in this fft is short for fast fourier transform every frame the fft object will analyze the sound at that exact point of time and return an array of values in the draw function create a variable to store the waveform data to actually get the waveform data we need to call the waveform method on the fft object to see what this waveform data looks like we can open up the browser's console in chrome on mac you can do that by pressing command option i if you call the waveform method you can see that it returns an array with 1024 elements all right let's close the console and get back to the code by looping through the waveform data we can draw the wave across the canvas create a for loop that iterates from zero to the width of the canvas this allows us to put a point from the wave on each x-coordinate across the whole screen as we saw before there are 1024 elements in the waveform data but our screen isn't that exact width so we need to create an index that maps the for loop variable to the index of the wave that we want the value of this index must be an integer so make sure to floor it now we can create an x and y coordinate the x coordinate should just be equal to the for loop variable the y-coordinate should be equal to the waveform value that is placed at the current index this waveform value is between negative one and one so we need to scale it up to actually see it by default the stroke color is black so we also need to change this in order to see the wave we also need to offset the wave starting point down the y axis to see the whole wave now it is working and we can see the wave but it would look a bit cleaner if all the points was connected by a line we can do that by using the begin shape and end shape functions i have some other videos covering that so i won't go in detail with it in this video you can remove the fill color with the no fill function if you want to take a closer look at the wave you can add the loop and no loop functions to the mouse click function so when the song pauses the canvas freezes [Music] okay so now we have managed to display the waveform across the canvas but we actually want it to be displayed in a circle like you saw in the beginning of this video to do that we can use polar coordinates actually the circle we want create consists of two waveforms where one of them is mirrored so first we will just create a half circle the four loop should therefore iterate from 0 to 180 since that is the number of degrees and a half circle that means the index variable also needs a small change we can use the index to map the radius of the circle to the waveform the last two arguments in the map function will be the minimum and maximum radius of the circle now we can change the x and y coordinates we still need to change a couple of things in order to place the circle in the center of the canvas we need to translate there the other thing we need to do is to change the angle mode from radians to degrees now we have created the first half of the circle the other half is of course very similar just copy the first half and add a minus in front of the sine function in the x coordinate to mirror the waveform if you want to change some parameters of the circle it would be useful to be able to just change the parameter once a solution for this could be to create a for loop that runs twice where the for loop variable is negative one the first time and positive one the second time let's do that now you can multiply the x coordinate with the t variable and we have the exact same code as before you can make the waveform a bit more complex by incrementing the for loop by 0.5 instead of 1. now that we have created the waveform let's create the particles around it so we need to create a particle object our particles should have a position this can be defined as a vector when a particle is created we want it to be placed randomly at the perimeter of the waveform we can do that by using the p5 vector random 2d method this vector has a length of 1 so we need to multiply it by the radius of the waveform to place it at the perimeter remember this is the average of the minimum and maximum radius of the waveform in my case that is 250. let's create a method in the particle that will show the particle on the canvas in the draw function we can now create a new particle every frame in order to keep track of all the particles we also need to create an empty array push the particle to that array to actually see the particles on the canvas we need to call the show method on all the particles let's also comment out the waveform so we can see them better so that works we want the particles to move so they should have a velocity and an acceleration the velocity will just be zero when the particles are first created then the acceleration will slowly increase their velocity over time the acceleration vector should have the same direction as the position vector this can be done by copying the position vector the acceleration vector should of course be way smaller than the position vector so you should multiply it with a low value if you add some randomness to this value the particles will seem more organic another thing you could randomize is the width of the particle create a property to store this value and then change the width in the show method now we can create a method that will update the position of the particles in order for the vectors to affect each other properly the acceleration must be added to the velocity and then the velocity must be added to the position you can add the waveform again now there is one more thing we need to add to the particle object right now the particles array just keeps growing and growing so we need to remove the particles from the array when they are no longer on the canvas let's write a third method to control this if the position exceeds the boundaries of the canvas the method will return true otherwise it will return false we can use that method to control which particles to show and which to remove if you look closely you can see that the particles flicker a bit every time a particle somewhere is removed from the array the easiest solution for that is just to iterate through the particles array backwards if you want you can add some randomness to the colors by adding a color property to the particle so the particles are working the way we want but they are not responding to the song not yet at least to make them respond we can do some beat detection we can make them respond to low frequencies by calling the get energy method on the fft object and specifying a frequency range in order for that to work we need to call the analyze method first store the output of the get energy function in a variable this output will be between 0 and 255. when we call the update method on the particle we can now pass in a condition as an argument when the amp variable is greater than 230 this condition is true 230 is a good value for my song but yours might be different depending on your song in the update function we can now add the argument and check if the condition is true if that is the case we will add the velocity to the position a couple more times now the particles should respond to the music [Music] finally let's add the responsive background if you use an image as background make sure to load it in the preload function like the song draw the image in the draw function set the image mode to center in order to place the image at the center of the canvas you can blur the image by applying a filter to it in the setup function to give the beats a greater impact we can randomly rotate the background image slightly when the amp variable is greater than 230 use the push and pop function so the rotation only affects the image the amp variable should of course be above the image [Music] if you don't want to be able to see the corners of the background when the image rotates you can just make the image a bit larger the last thing we need to add is an alpha layer this is just a black rectangle with a transparency that will change depending on the size of the amp variable you also need to set the rect mode to center in order to display the rectangle in the center so [Music] as i mentioned at the beginning of this video the fft object takes in some optional arguments one of them is a smoothing factor that goes from zero to one the smoothing means that the values in the fft objects are smoothed with the previous values the higher this value is the more smoothing this value is 0.8 by default if you set it to a lower value the alpha layer will fade out faster [Music] now we have created the exact music visualizer you saw at the beginning of this video i hope you were able to follow along this far feel free to leave a comment if there was something you didn't understand or if you have suggestions for future tutorials if you would like to support my channel you can become a patron and at the same time get access to the source code from all my tutorials and projects [Music] you

Channel: Colorful Coding

Views: 10,705

Keywords: Audio, visualizer, tutorial, p5js

Id: uk96O7N1Yo0

Length: 19min 37sec (1177 seconds)

Published: Sun Feb 28 2021