- 1 hour on-demand video
- 30 articles
- 2 downloadable resources
- Full lifetime access
- Access on mobile and TV
- Certificate of Completion
Get your team access to 4,000+ top Udemy courses anytime, anywhere.Try Udemy for Business
- Beginner to intermediate web developers
Watch the Guide to the Project video to get an overview about the project and how to navigate through the project and what to expect.
After watching the video, go to the next lesson, where we’ll make sure you have all the prerequisites for the project.
Before we dig in, have a look at the video for this lesson.
Notice some of the interesting things about how this app works:
Wherever you click on the canvas, a dot slowly expands into an increasingly large circle and then fades.
The animated circle replays, over and over, with a short period of time between each replay.
When you click, a sound is generated.
Every time the animated circle reappears the sound is replayed.
Given this behavior, how would you implement such an app? How would you write code to generate the circles? How would you write code to replay the circles and sounds over and over?
If you haven’t worked with the canvas before, we need to cover the basics before you go any further. If you’ve read Chapter 7 of Head First HTML5 Programming, or you’ve had prior experience working with the <canvas> element, feel free to skip over this section and move on to the next one. But if you’re new to canvas, we recommend watching the video in this lesson before the next coding step, so you know what's going on.
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 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!