How to Make an Audio Visualizer by Coding with Javascript

1. Introduction: Welcome back to this section. We will make an amazing audio visualizer that is responsive to any audio input. As you can see, the balls are jumping when I talk, when I clip or when I play music. And then you're still good. When you are ready to do this. Head over to the next video to start. 2. Setting Up: As always, we will start from command line. So let me bring mine. I'm currently in desktop. Let's go into projects folder where I will save and store my projects. So if I type ls here, you can see our old projects. So let's create a new folder here. And let's call it audio visualizer. Go into that folder. Let's just great files. So as usual, we need an HTML file. This time. Since we're getting the microphone data, I want to create a new file called microphone JS. And finally, we need a new file for visualization. Let's call it Visualizer dot js. Okay, we are good to go. If you remember the command or opening this folder in width code. If you are using inside this version like me, you can type a command like this. Or if you're using normal version of risk code, you can just command called spacetime. When we type that command, it opens the folder in West code so that we are good to go. 3. HTML Template: Let's start the project by importing HTML5 template. As always. So here, this time we will use JavaScript files. First of all, let's change the title. So we want to import these two JavaScript files, HTML boilerplate. So I will create a new script and do a swash microphone JS, and also visualizer JS. So remember, we will use microphone class in visualizer. So the order is important here. Microphone script should be a bow of visualizer script. Okay, So to start, please. Let's go into microphone JS file and we'll save it. 4. Complete the HTML: These scripts tags shouldn't be on hat, but they should be in body. Just after we have countless, right? I will call id of Michael was countless. Though one more thing we should add here is the CSS file. We almost forgot it, but it's there is another way of adding files. So you can do it inside with God. So we can click this new file icon and you can just type the name. Okay, and let's also link that CSS file like this. Okay, so we don't have to create new files from command line. Maybe this is an easier way. So now we have CSS or JavaScript files, and our code was created in HTML. So we can start writing code. Microphone, Jess. 5. Microphone.js: Instead of writing the whole microphone JS file, I will just copy and paste the code here. So I found this on web to get microphone data. This is a boilerplate that you can use all of your audio visualizers. So we don't need to know the details exactly here. It will just gets the microphone data, the audio input. You don't actually need to change anything here. Or maybe you want to change. You may want to change FFT size if you want some variety in the output. So let me just explain quickly what we have here. This is just a casual class called microphone. Here we have the constructor. So the first property is identifies whether the microphone is initialized or not because we want to wait for it if it is not initialized yet, okay? And at the end of everything, it will become true. And then we just get user media function. And keep in mind that still there, all when religious. So we don't have any third party libraries here. And apparently, this method returns a promise because it uses then after get user media function, which basically will wait for this line. And we will run after it returns something. So if it returns successfully, these lines will be called. Or if there's an error, it just alert the error on the browser. Okay? And when it is ready, these lines will be called. So we have analyzer here. And these lines will decide FFT size, buffer length, and so on. And finally, change the initialized property to true after connecting to the microphone. And otherwise, it will just alert the error on the browser. Alright, so we also have two methods here. First one gets the samples. So it is the outcome that we will use. Returning object will be an array and its length will be half of the FFT size. So we declared a 50 size 512. Here are samples. Array length will be 256, okay? So it's always half of the FFT size. And we will use that sample survey during visualization of the audio. Okay, so think about like this. We can have 256 balls that each ball will respond to an element in this array. Okay? You will understand better when we actually do, do it and put it into practice. And finally, we have the volume function that will get womb methods. And I believe it is pretty self-explanatory. This method will return the volume of the audio inputs. 6. Get Microphone Data: Now that our microphone is ready, we can start writing the code in visualization. Open this file. The first thing I want to do here is to show you the data we get from microphone. To do that, I will create a new variable, microphone. From microphone class. We didn't have any parameters in constructor. We can create a new microphone or object like this. Let's also create that animate function. Because we want to get the microphone data in real time continuously. And as you know, we need to request animation frame to animate this function. And also we need to call it somewhere in the code. So between these two lines, whatever we write will be called in every frame continuously. So I just want to log the microphone data into the console so that we can see what it is exactly. But first, I want to check if microphone is already initialized. So remember, we have a property and it is true when Eris had things are done in microphone. So if microphone is initialized, let's just get samples using the samples function. And this here. For now let's just logged into the console. So I save this and I will just go into index.HTML. Right-click open with live server. If you don't have this option, you can always download Live Server extension from extensions in VSCode. We did this before in this course. So I will not explain the steps right now. But if you installed Live Server extension, you can just open it like this. And let me just bring it to this screen. And I will also the white my screen like this. Alright, so our code is running on this port. Let's just look at the console. We are getting microphone data continuously. And there are lots of, lots of samples. And it's just going continuously because I am speaking, right? And this also uses my microphone browser. In the first step. When you open Live Server, it may ask for for you to allow using microphone, okay? And once you accept it, can use the audio input. Okay, so let's look at the one log here. So it is an array. As we discussed. It's length is 256, and the values are just some small values. These values are, each of them represents something. I'm not really a sound expert. And I don't, I don't actually know what are these values. But you can imagine it like they are frequencies or some signals that explains the sound at that exact point. We can use these values to visualize the sound. And these values are really small values. There are like between minus four and plus four. And they usually is less than one. So they can be negative values as well, or positive values as well. And I believe as the values are increasing. Now we're getting some interesting sounds. Alright? So if I don't talk, values will be 0. For example, at this point, there's no audio input. Alright? So now that we know what our samples data looks like, we will use this data. We can pre-process it, of course. But eventually we will use this data to create some visuals. Okay, So let's start using our commerce to create some visuals. 7. Create the Ball Class: Let's start drawing our visuals with creating Karl Marx. As usual, we will get element by ID from HTML template. Let me check the ID of my colors. Let's copy and paste it here just to be sure the names mats. Let's also create CTX, that context methods. And we want 2D. And finally, we can adjust weight to window width and window height. Alright. Now why adjustments are ready? We can start creating the first class. So at the end, what we want in countless an array of bolts, right? Or shortcuts. I will just call them balls because they will jump. In this project. That's why I'm create a class named ball. And as usual, we will have a constructor of that class. It will get two parameters, x and y. And these values will be the initial x and y positions of the ball that there'll be spawn. So let's just assign this dot x dot y. So why does we want here is, so we're going to create a bowl and which is a complete circle. And if you remember, we are doing this using CTX augmented. Here, what we need to do is radius value. That's why we also need a radius. But I don't want to get it from parameters because we were just want to make all the radiuses of the balls are saying. So I will just use a default value of eight. Then let's also decide its color. You can change whatever you want. You can use blue, red, gray. And I think also I will explain this later, but I just want to let's, let's just skip this part. Let's add that property. And so what I need here is jump for SSH and also false. Okay, because balls will fall and they will jump according to the audio in Detroit. But in the initial phase, at the very first beginning of the project, the balls will fall. So they will start from top and they will fall before everything. That's why I don't want to make the fall force 0, but instead, I will just make it 0.1. Alright? Where I've done with the constructor, we'll just add one more property, but I will add it when the time is correct. So as usual, we also need to draw methods. It is it includes she takes fillStyle. I will assign this to this color because when we want to change the color, the ball will also be in that color. So we should say begin Pat should also say CTX bar to draw a circle. So this dot x bar, x value, I'm sorry, this dot y for y value. This they'll try and use for radius. Start angle will be 0 and angle will be pi times two because we will always draw a complete circle which will look like a bowl. Finally, we can say CTX pill. Okay, so you should already be familiar with these lines. We made many practices on this before. So what we need, what else we need is two more methods. So we just want a formatted and a jump. That's it for the ball class. And we will write the context of fall and jump methods later. 8. Generate Balls: Alright, we have the ball class. Let's go ahead and generate the ball so that we can see them on columns. To do that, what we need is an array. It will be empty at the beginning. And we will need a function that will generate the balls. I will use arrow function here. Okay? So in this function, first of all, let me just delete this log so we don't see. So let's clean. Close the console. Okay. So in January false, this time we will make something different. I don't want to statically defined the length of the balls array. So I don't want to just create a 100 boss. Let's say. What I want instead is to create the balls, which will be responsive for Carlos foot. So what I mean is, if coal was why do you know that I should be less balls to ante, for example, right? Now, if we have a larger commonwealths, we can have a 100 bonds. Okay? So eventually the land of the balls array will be dynamic. To do that, let's just assign. Let's just create a new variable, distance. This will clarify the distance between each ball grid. So I just want to make a party or the beginning. And we will just calculate how many balls that I should be using. Carlos width divided by distance. Okay? Which makes sense, right? Because B has a width of 1 thousand on we want I'm tired t distance. So we should have something around. I'm tired tea bowls, right? Because there will be instances and the ball's weight as well. But I will just say minus two here because we want distance from the beginning and at the end as well. Amount of balls will be calculated like this. Okay, so now it is responsive to the Kawasaki. When we change the width of the browser, the amount of balls will change. And what we need is a for loop. And let's just say I for iterator. And we want to loop this. We want to identify amount of Bosch saw that this will be running amount of moles times. And in the fall loop, I will just say balls push r1 to create a new ball and push it into the bowls, right? So let's just call new ball. And we just need to give x and y values here. For x and y values. For y rarely, it is really simple. We can just give a static value. For example, 500. Okay? But what x value? We need to use the distance again. So the first ball should be distance, right? So when I say a tardy, it's x should be tardy. The second ball should be plus one more distance, right? So 2R2 plus Turkey, the second ball's exposition should be 60. So if I say distance plus I times distance, I believe there will be a boss just next to each other among the cosmos. So there will be both throughout the Cold War's, there will be gaps at the beginning and also between each of the balls. That's what we want. And when I save this, nothing happens because we didn't call generic balls function yet. When I call it as say, the balls are generated but we can not see them yet because our color is what? Actually, I just want to change background to black, but let's check it first. By changing balls color. Do we have the ball song, Carlos? I'm not exactly. That's because we didn't draw the balls yet. So we just generate the boss, but we didn't call the draw function. So what we need to do is say ball for each ball, I'm just basically iterating on every ball in that array. And I will call bold a draw function. So now we have the balls on the Canvas. Alright? So our function is working. We don't need to draw the walls here. I will just delete it. And I will also make the color white again. And let's go into style.css, very real lead, just background color. So here I want to select everything by using asterix. Lets just match margin and padding 0, box-sizing, border-box. So these are just default. We are almost doing this array in every project. And also. So right now, if you notice, we have bars on the right. So this is just, this makes these lines makes buddy scrollable. We don't want this. That's why I will just say overflow. Let's see. So the bars go. Finally, let's just change. The column was bare ground, ground, black or out. 9. Falling Balls: All right guys, let's draw the balls and make them fall. So first of all, animate function. If microphone is initialized, I want to draw the balls. So to do that called balls array. And use for each method. Here, let's just pass a ball that iterates of the balls. And I just wanted to say ball drawn. When we do that, you can see the balls in comas. And notice if we change the column size, the amount of balls, chains, so that we have both trial to cows. And since we are going to do an animation here, I just want to clear the cones in a reframe. I will do this by using clear rect function. Will pass x and y starting from 0 all the way up to Carl Woese, width and height. So you can see we have nice bonds. If we also make them fall. Just before draw. We can see the balls falling. But first we should also look for function. So to do that, I will lose fall forms and change the balls. Why? Actually, I will say this dot y plus equals this dot full force, which will update the y value of the ball in every frame and adds full force. So when I save this, you can see balls are just pulling slowly. Let's make this look more natural. In real life, when something is falling, it's full force is increasing, right? Because of the gravity. That's why I will also increase all force in every frame, 0.05. So now you can see a more natural effect. But at some point the ball should stop. So here I will just add the constraint. We just want the walls to fall if only they are. Y is less than Coleman's height divided by two. So if only the boss or a bowl, half of the colors, they will fall. Otherwise, they will stop. Just like this. Let me just refresh it again. So they started from position bifans it. And they started falling because we are calling fall function in every frame. And we only have one constraint, which is both y position should be higher than Carlos height divided by two. That's why there's, there's top. When they reach that point. 10. Jumping Balls: When the balls for each at this point, so that there are striking, striking to the ground. We want to make them jump, right? To do that, what we need is another if statement here. We need to check if ball is falling. Because if they're not falling, we want to make them jump. And to check that value, you just need another property. Let's add. A property is falling. And it will be true in the beginning because the boss will falling at the initial state. So if the balls are not falling, which means balls is falling property is false. In that case, we want it to jump. All right, Let's go up and here declared a jump method. So I will, first of all, what we want to do is to make full force to 0, because we had a full force before. And it will affect our y position in every frame. So when the fall and when holding property is false, first thing we want to do is to make all fours 0. Then we can now affect our y. We jump force. So this time I will use minus equals because in coordinate system of commerce, when the ball is going up, it's why ReLu is decreasing. So in commonwealths, 0 is here at top and it is increasing when the balls are going down. So if you want a ball to jump, we should decrease its y value. So I want to decrease why ReLU would jump force. And to make it more natural, I will again do the same logic. I will decrease jump force as well. Okay? So we also have jumped methods now. But one thing we shouldn't forget when jumping ends. When it goes back to falling state. We should also reset. Jump force to 0, just like we did fall force here. Okay, So now they look identical. They're just symmetric to the other one. Alright, let's give it a try. Didn't work. And this is because, this is because our jump force is 0. Let's change this. So we have a jump force. Ball. Okay, So maybe we should also change ball is falling property because we never make it false, right? It's always true. So I will add here an else statement. And make ball is falling to false. And let's try. It. Just jumps for awhile. You see that? Let me run it again. And then continuous falling. Okay? So this is because this if statement runs one, although it's falling property is false. So we should also give a constraint here. The check if it is falling and falling state, right? So if the ball, so we were calling for function, if only the ball is in falling state and its y position is less than coma site. So let's save this. And also, maybe we should. Maybe we should just change ours to else-if. And let's just add a constraint. If balls y position is bigger than cause height divided by two. This looks better, right? Because we just want to jump if only, if only its y value is bigger than Carlos height divided by two. So in other words, at the middle of the columns. Alright, so we will change both jumped force here later on and here when the ball. So basically we're just decreasing jump force, right? When the ball, Let's comment this line. Then not going down. When I uncommented goes down. So we are also decreasing jump force, and it starts from 0.1, which will be a negative value. So instead of making a jump, we just, you know, make them fall again. So let's just make this value ten, let's say 400. Nothing change. Let's just comment this line. This has just, did I make a typo here? So we should change its y position in every frame. So let's go into console. I'm missing something. So if the ball is falling, so we should, this log should drown in our frame right now. And it is indeed we can see in the console, right? So the jump method is being called now reframe and why it is called. Let's also log here. The jump force. Let's delete this. So the jump force is 0. Why is that happening? It's because when we are falling, we just make jump force 0, right? So in the beginning we made it ten. But every time it just made it fall, down, force becomes 0, so they're not jumping. So actually, we shouldn't assign it here. We should assign it ran the polling state ends, which is here, right? When the ball is pulling stayed false. We should also declare a jump force. I will just do Tanh here. Now, you can see our balls are just jumping. But maybe ten is too much. Let's make it too. Okay, great. But we have another problem right now. The, they never come back. Alright? So to prevent that, I will just add another constraint here and if statement. So when the ball is jumping, at some point, we should turn on the appalling state, right, so that they will come back. And I just want to do it. When jumped force becomes 0. Okay, So it's in real life. Though. When we jump. In real life, we hear a jump force in the initial phase. And gravity is decreasing the jump force in every second trait. And at some point, or jump force becomes 0 and we start falling. Right? So let's do the same logic. Logic here. When the jump force becomes 0 or less than 0, make the balls fall again. But to do this, we should turn on uncomment, this line that will decrease, jump force, reframe. And when it's less than 0 or equals to 0, we should again turn on the falling state to true. So let's try this. Okay. Now we can see our balls are jumping in any jump, in every jump, or jump force and fall force are just increasing and decreasing like natural. And at some point, at the peak point, jump force becomes 0. When that happens, they start falling again. Okay? So this is how you can do a gravity logic without using any game engine and anything else. With pure Vanilla JS. One more team we want to add here, that will be the real connection between audio and our balls to change the jump force with the audio inputs. And we will do that in the next video. 11. Get Audio Input: Alright guys, are bolts are jumping. And it's time for the most exciting part, which is Jim, make them jump responsive to the audio input. So we should change this line, obviously, because we want to just jump force with the microphone. Okay, So we already get microphone data. And remember, samples array Is samples area includes 256 elements. And we have some balls as well, though, but our amount of balls is not specific. It depends on Canvas. So we could have more than 256 or we could have less. So I will not match them exactly. But we could, if we could get indexed somehow, involves array, right? We could assign every sample to a ball. So like first sample. So the first element in sample survey can be the jump force for the first ball. And the second element in sample survey can be the jump force for second ball and so on. I believe it will be great. And to do that, we should track the index of balls in this for each. And if you just Google for ETL script, you can see the parameters of that function. And the second parameter is index. So the first one that we just used is the value of the current element. We just call it ball. If you pass second, this is optional. But you can pass. And it's, it is returning the index of the current element, but we just are looking. So let's go ahead and use it. So to use that, I will just add a parenthesis next to ball. I will say indexed. Now in this forage, I can lock. Next. Let me just delete the other logs lines. So we have only this one. Let's save this and check the console. So you see that it starts from zero and increases in every iteration. Alright, so we can use this index value. And in here I want to call sample, sorry. Let's just try samples index. Let's just try use samples for jump force. But again, remember samples are just really, really small values. So let's also log console, log to the console samples to see. So they look like they're not jumping. But if you look closely, you can see some small movements. And this is because our samples are really small numbers. So we should, and there are also negative values. So we don't want any jump force negative. So we can use mat abs function to get the abstract of the value. Okay? When we do that, we don't have any negative values anymore. And also what we want to do is to multiply this value with ten, maybe because they are too small. Let's make them positive and multiply it on with ten and see what happens. When I close Console. We don't need locks anymore. Let's say this. So right now you can see you and I speak, the balls are just jumping and it looks like multiplying with ten is enough. You could of course, increase this value if you want more jumped Fox. Or if you want to go crazy, you can go crazy as well. But remember, if they jumped too much, they will go outside of the canvas. So I'll keep it ten. And I believe it's done. So let's try a different solution. They're just moving again. And at this point, you could actually, it's really up to you from now. So you could change the colors, or you could also add a method here will change colors. And you can maybe do a parameter here, like a value. And you could change colors according to the samples index. So the balls can change colors with audio. And here you can use RGB, RGBA values and pass parameters. You can do everything. You can change, jump force if you want faster balls. Or what you can do. Else. If you want higher or bigger balls, you could just change radius like this. But remember to change the distance as well. Just to be sure they're not colliding. It's make them smaller again. Or you could make them really smaller like this. It's up to you. Go ahead and play with the values and add some new features for all. 12. Audio Visualizer 2 : In this section, we are going to make another audio visualizer that you can see on the screen. Let me play music so you can see the effect better. Job. If you like the effect. I don't work to the next video where we will start doing this project. 13. Setup: I have created the project and everything is same with the previous audio visualizer. This time just change the title with audio visualizer to. So we also linked style CSS. Again, we have a commerce with the id Mike homeless. We have microphone JS and visualizer and generous. And apo. This HTML file with live show over by just right-clicking and selecting this option. And then you can just use the same template for microphone JS. Because again, we don't need any differences and this is what we need in this project. Also style CSS is same with the previous one. Just use asterix for selecting everything to adjust margin and padding. Just make hidden overflow property of the body and make the background black. So we didn't yet defined commerce width and height. That's why our Cola's comes with these width and height by default. So we will change it in visualizer JS. If you are ready with these two files, we can start to visualize a JS. 14. Create the Figures: As always, let's start creating colors. Let's use our commerce ID here. Let's also create CTX. Let's adjust what to Window. And also height, which we know in our heights. So our commerce now is fully adjusted and covers all the browsers in their screen. And what we want to do next is to assign the microphone to new microphone. And remember we call this class from microphone js. And we can do it like this. We're not importing anything because microphone JS is just a bowl of visualizer JS. And in the end, all of the JavaScript is will be transformed into this HTML file. So we do have actually microphone class in visualizer JS. And let's check if everything works by just creating animate function. Request animation frame animate. And remember, this blogs are providing us an animation by calling this animate function in every frame. So here we want to check if the microphone is initialized already. This property. So if microphone initialized, I want to get the samples. Samples. Microphone that samples. Let's just log it to see if everything works. I will open the console by using f 12th. We don't have any samples. So let me just open. That lives over again. Maybe there are some box. We don't have still. It's because we didn't call the animate function My bad. Okay. Now we can see the samples when I talk. It will get the audio input right. Now we can get rid off this console log. We can now start creating our class. This time. I want to call figure no parentheses here because it will have different methods. So it will be adjustable. It will highway, it will teleport and chain sizing methods, some things like that. So it's just not that simple ball. That's why I decided to call it figure. But as always, we need a constructor. So this time, let's start with X and Y again, but we will increase the number of parameters later on. So this delta x equals to x, this dot y equals to y size. I will use eight and then four initial size. But remember we will change this value with the microphone input. Okay? So this is enough for now. Let's just draw this figure. And this is all. There is nothing new for us. So this does, this dot fillStyle is this dark color. Dx also begin Pat dx arc because again, we want to draw shortcuts. So I will pass X4 charcoals x. Why? And size. I didn't call radius this time. You could also say size, the same thing. So zero for starting angle. And math.pi times 24 and angle, which is exactly the same thing with 260 in-degrees, but we should give some radians here. So we use this expression. And finally, we should feel what we just draw. Alright, let me save this. And down below, we should credit fingers error, right? To do that, I need a for-loop. Let's change its index to i. I want to create ten figures. So I will say figures push near figure. So you should all be familiar with this syntax, right? We did all of this many times. So new figure, but this time, instead of doing a specific x and y, I want to spawn these figures randomly. Okay, that's why I will call Math.random function. And I will multiply it with color suite so that the x value will be between zero and column sweet. It can be anywhere in the Congress and do the same tank for y-value as well. And this time we will say comas height. Alright? So let's just try to draw the figures at this point. So first of all, I want to clear direct because we will do some animations in the future. So let's clear the calmness, the whole commas in airframe. And now we can, let's try to draw figures. For that. I want to iterate over figures array, right? And I will use for each, I'll say figure. And for all figure, you want to call the draw method. Okay? So we haven't given any color. Let's just do a light color so that we have the figures on the columns. And every time I refresh this browser, it will do us a randomly generated positioned figure straight because our x and y values are random. But they should be in the countless. So we should, in every frame they should have ten fingers, exactly. 1 234-567-8910. 15. Circular Movement: Next thing I want to do with this figures is to give them some circular movement. Like circular movements because it makes objects to look like a live. Alright, so let's implement circular movements for our speaker. In Figure class, I will create a new method called circular movement. So here I'm actually we can use cosine and sine functions. So we should change the x-value and the y-value of the figures with some values so that it will draw a circular path. Right? So if we only change the x value, let's say not cosine. So we also need a counter here that will loop to loop 0-360. So it will be the whole degrees starts from zero and goes all the way to 360. So to do that, I will implement counter in this figure. So it will start from zero. And then I will, I will increase it. Every circular movement at the end. Actually. Let's this contour plus, plus and run it bigger than or equals to 260, I will make it zero again. Right? So that contour will increase recall of circular movement. And when it reaches those 260 degrees, it will go back to zero and start from there. Again. That's what we need actually. Now, I will call this counter here. But remember, cosine function is not looking for degrees. Instead, it is looking for reading. If you remember, radians to degrees formula x divided by 180 times mud pie. Okay? So let's do this for our counter divided by 180 times pi so that we ensure that it draws a complete circle. Let me just save it like this and call circular moment in every frame. Let's see what happens. So our balls are moving, right? Which is great. So cosmic, that cost function returns a value between minus one and plus one. And it is just switching between these values. And we are updating x with that values so that our balls are going right and left continuously. Let's do the same thing for Y as well. But this time let's use, um, actually let use cosine again to see what happens. I can just copy and paste it here and save this. So you can see when we give the same function to why it will draw some path like this, like diagonal, because we're increasing to x and y at the same time, at the same value, with the same value. But if you change this to sign and save it, you can see they are drawing a circle a moment. This is the key to make some circular movement like this. 16. Change Size with Mic Input: Alright guys, let's keep calling. Next step is to add the microphone input to the movement of the circles. Actually, not the moment, but the size of the circuits we want. Make them bigger. When there's an input of a high wars. And their size will depend on the voice input. They will get bigger and smaller according to the microphone input. So to do that, I will add a new method in the figure class. Right here. Let's add a new method and you're a name of change size. So this mattered needs a parameter. I will call it value. And this parameter will comes from the samples array, which is connected with the microphone in portrait. So we will use a parameter from the input bars and change the size of each arc. So to do that, let's first check if value is bigger than the size. So we will adjust the value just a bowl. But first let's check if the value is bigger than size. So if it is, we will make the size equals to value. In other case, we want to change the size. So this else means we don't have any voice input or we have one, but it's really, really low so that we can not hear it, so that computer can not hear it. In that case, we want to change the size and we want to decrease its size. Let's say, I don't know 0.1. So this will be called in every frame. So it's size decrease. I'm Tom per cent in airframe. Right? So let's just call this method in animate function. Right here. The dirt, that chain size. But in order to give it a parameter which will comes from sample separately, we need to get samples index rate. So we don't have an index right now. But if you remember, we can get the index by just passing a second parameter in for each function. So if you do it like this, the first one will be the figure itself that we are iterating over. And second parameter will be the index of that. So in that way, we can get that index in the samples array and we can change its size. I'm using the voice input. Alright? So let me save this and see the outcome. Alright, so we can not see anything. Actually, we saw something in the beginning, but they just disappears instantly. So why does it happen? Because maybe our value of decreasing is too much. Let's change this to 1% and save it again. So this is better right now. They're disappearing slowly. But at the end, we can not see anything again. So it looks like the value is too small, right? So apparently are rarely is not enough to make the size bigger. Let's, we can also check it. I login it. Let's see. So our value is zero. Um, this is not what I expected. Okay, so let's try to multiply this value. Let's say I want to create a new variable called silent. And it will be the outcome of value times 200. And let's use the sound here and here, Ezra. Let me say this again. We don't have any output again. So I will just open this in a new tab. This was a bug for Google Chrome. So when we open it in a new tab, there's no problem. So you can see they are getting bigger when I speak higher or smaller when I speak load. But let's also see value and the sound in the console. Let's first check the value. So you can see it's something really small. That's why we just want to multiply it with 200. Alright? Is this something I find by trying, okay, There's no formula for this. But I tried some values. And 200 seems nice because I want figures to get them bigger, to make them bigger. And 200 is fine for me. You can try different values and you can decide on another random. But the main point here is we, right now, we have circles and there's size are changing depending on the voice input. 17. Play Music: At this point, the size of the figures should change with the wife's input. So let me play a song to say it. Obviously. 18. Add Teleport: Finally, I want to show you some customization examples. Because I want you to customize your own effect with any way you want. Okay? So for an example, let's add a new method in Figure class. So I want to add a teleport method. Because when the figures theropods, it's, the fact looks much better. Let's add teleport effect and you can see the outcome. So I will say teleport there. We should change its x and also y value of the failures. And I want them to teleport randomly. So let's just say much random times column loss width, which means it will be teleported somewhere inside of the Carlos. Okay? And do the same thing for y, but this time, type here Hunt. So we have our teleport method. Let's call it moon animation. So for every figure, if we call teleport function, they are location changed in every frame. This looks like a cos. Okay, we don't want cows. So we shouldn't call teleport in every frame. Or this is a true care approach. Again, we could add a constraint here. So when something happens than teleport, not in every frame. So you can add any constraint. It's up to you. For simplicity. I will just add a constraint of random. So this can be random as well. I blew it is perfect if you randomize a routine. So when I add here a constraint like this, math random returns some number 0-1. And if it is bigger than 0.99, which is approximate be a one-person, right? Then teleport to figure. Let me say this. You can see, it's more rare right now. We see some teleports, but it's not continuously. We could decrease its frequency by just increasing this value here. So they are almost, are not supporting anymore. Or you can increase its frequency by decreasing the constraint value. 50% is still too much. Maybe 90% will be 95. Okay? But my opinion, 99 looks really nice. Okay, So the reason I wanted to show this is to show you that this figure, this effect is customizable. You can add any method you want, play with it. You can see different outcomes. And finally, at the end, I want to show you one more thing, which is increasing the animation speed. Okay? So right now our circular movement is too slow. In my opinion. I want to increase it. So you could also do it with calling. But what if you want to change the frame rate? If you want to change the FPS, you could also add different libraries and so on to do that. But there's another tricky approach for that. I want to show you. So we are calling animate function here and it calls itself again and again, right? What if we call enumerate function now for me? So let's change this to ten or five, maybe. Just call animating a fall. So this will increase animation speed five x because we are calling animate function five times. Let me save this. So you can see the circles are moving faster. Alright? So this is basically increasing the frame rate in a second.