If you’ve never seen Bloom, here’s a short video showing the completed Music Box app in play:
As you can see, the way the application works is you click on the screen, which generates a sound, as well as a circle that grows, disappears and then repeats, along with the sound.
The graphics are generated by programming the canvas element. When we get a click on the canvas we draw a circle and then animate the circle by repeatedly drawing the circle at larger sizes until we reach a maximum size.
One of the tricky details in this application is managing the timing of the sounds and the circles. As you’ll see when you do the project, we can handle this using
setInterval and callback functions for both starting the sound and animation, and continuing the animation for a given period of time.
To learn more about WickedlySmart Projects and what to expect, check out our projects page and Project 1, Build the Game of Life.