Have fun hacking our Audio Visualizer

Outside of the class definition, we’ll need to instantiate ‘const’ and ‘let’ variables….let ctx, center_x, center_y, radius, x_end, y_end, bar_height;const width = window.innerWidth;const height = window.innerHeight;const bars = 555;const bar_width = 1;const radius = 0;const center_x = width / 2;const center_y = height / 2;…

Inside Canvas class component lets define the following definition.animationLooper(canvas) {canvas.width = width;canvas.height height; ctx = canvas.getContext(“2d”);}

We’re instantiating our canvas context at a given iteration. At a later point, I’ll explain where animationLoop is passed the parameter ‘this.canvas’ and where we call this function.

If you’re not there already, time to get mathematical and crack the code from within this animation loop.

Each time animationLooper is called we want to for-loop each bar that exists, in our case 555, and pass our mathemagical new values to be drawn on the canvas.

Line 12 defines bar_height by taking the integer at the ‘i’ index and multiplying by two. On lines 14–17, we’re using trigonometry’s cos and sin to confine a bars start point to wrap circumference and direction to maintain its visual circular symmetry.

At the end of each loop we call drawBar() which will house the function calls to canvas’ draw api (defined above as ctx).

Define drawBar() as a class method within Canvas component:

A path is a vector, and we want to create, clear, move vectors values, then draw. Line 10 clears all subpaths, then line 11 movesTo() creates subPath, line 12 is a new set of vector points, lastly line 13 will draw the vector path.Step 4: Render Our Animation

We are now ready to render our animation. The window global requestAnimationFrame provides us a way to pass a callback that will trigger on the browser’s next repaint. To animate the canvas you’ll need to use recursion.

Define an arrow function tick as a class method within Canvas component:

These five lines will create our audio visualizer. One last step…Step 5: Start, Stop, Freeze Animation

To start the animation the following line of code needs to be called from somewhere:this.rafId = requestAnimationFrame(this.tick);

To stop:cancelAnimationFrame(this.rafId);

Where would be a good place for the above functional calls.Hmmmmm…

Lets place the calls in togglePlay:

Well done my friend! Have fun hacking our Audio Visualizer. Below is a video of what we created.

A working version of this tutorial can be found here: https://github.com/mrLucianoii/audio-visualizer-tutorial/tree/master/src

As for Part 3…

The canvas belongs to you now, Part 3 is yours to define.

Contect us : Vector Magic crack

Leave a Reply

Your email address will not be published. Required fields are marked *