Generative Music Box Project

You've learned the basics about canvas, so now it's time to write some code. Watch the video for this lesson first. Then, create a new file, "View.js" and get the code added to the file.

Unfortunately, there's no handy built-in drawCircle function in JavaScript that will draw a circle on a canvas. So we're going to write that function ourselves. Watch the video for this lesson to follow along as we write the drawCircle function.

You know how to draw a circle on the canvas, so now, we’ll add a click handler function on the canvas, so we can draw a circle every time you click.

Let's test the click handler. Now we should be able to click on the canvas and see a message in the console that we've added a circle, although remember, we won't actually see the circle just yet.

Watch the video...

Something's wrong! We're not seeing the message to add a circle, and you are probably seeing an error message like this:

Uncaught TypeError: Cannot read property 'push' of undefined

So what went wrong?

It's a quick and easy fix to make sure that this is set to the view object in handleClick. All we have to do is use bind to create a new function with this set to view, like we do in the bugfix code.

Make this change in "View.js", and reload the "musicbox.html" page in your browser. Now you should be able to click on the canvas and see the correct console message.

We know how to handle clicks on the View to create circles at a specific location on the canvas; now we need to actually draw the circles on the canvas each time we update the view.

Watch the video to get an introduction to this module, and then dive right in to the design.

Let's test the code. If it all works, you should see a new circle added to the canvas each time you click. Follow along in the video and test your own code.

We have the code in place to draw the circles, and now we're going to work on getting them to animate. Watch the video, and follow along as we add some code to do the animation.

We set up the code to call updateDisplay 33 times per second (specified by the frameRate property in the View), so we can animate the size of the circle by changing the circle's radius each time we draw it so it looks a little bigger each time.

When the circle gets to a certain size, we'll fade it by modifying the opacity of the circle. We can do that by changing the alpha value of the circle when we draw it with drawCircle.

Finally, when the circle reaches its maximum allowed size, we'll stop drawing it when updateDisplay is called---that is, we'll skip over the circle, so it will disappear. Of course, we'll need to make it reappear at some point, so we'll take care of that too.

Follow along with the video as we test the code.

The circles are animating---that is, they are growing from 0 to their maximum size, and then disappearing, and you can see that towards the end of the growth, they change in opacity. So our code is working great.

But right now, the circles are only animating once. So our next step is to repeat the animation so the circles reappear and grow again, over and over.

To make the circle animations repeat, we need to reset each circle's radius back to 0 at some point after it reaches the maximum radius. There are a few options for how to do this; the way we're going to do it is to set a timer when we first create a circle. This timer will call a function to reset the circle's radius back to 0 after a certain period of time has passed.

Follow along with the video as we write this code.

After watching the video, get the new code added and then we'll test it, and hopefully we'll see our circles repeating the animation, growing to a maximum size, disappearing, and then repeating.

Here's our test; how is yours looking? Is it working like you expected?

Try playing around with the loopRate. If you make it too short, the circles won't animate correctly. Too long and it won't feel right. See what timing works for you. Remember that loopRate is milliseconds so just multiply the number of seconds you want by 1000.

We have our circles animating beautifully, so the next step is to add the sound. Move on to the next lesson!

The circles for our Music Box project are working great and the View is done, so now it's time to add the audio and give the application a final test. Watch the video to get introduced to this module.

Hopefully your music box is working, and you're hearing sounds as you click to add circles. Have fun, play around with the music box. It can be quite addicting!

In this video, you'll see how you can update your Generative Music Box app with ECMAScript features, including classes, modules, let, const and arrow functions. If you need to learn about those features, check out our series on youtube: Learn JavaScript's Newest Features. Then head back here to update your code.