We just launched our second project, A Generative Music Box. If you’ve ever played with the Bloom app on your iOS device, then you’ll have an idea of what you’re going to build: a graphic interface you can click on to generate sounds and graphics that combine to make a beautiful piece of ambient music.
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.