Drum Waves
When you hit a drum with your hand, the drum's membrane vibrates, which then causes the air around it to vibrate, and it is this vibrating air that we perceive as the sound of the drum. In the visualization above, you can see some of the different ways that a drum can vibrate.
Each bit of the drum's surface pulls on the bits around it. What this means mathematically, is that the surface of the drum satisfies the wave equation:
\[\frac{\partial^2 u}{\partial t^2} = c^2 \left( \frac{\partial ^2 u}{\partial x^2} + \frac{\partial^2 u}{\partial y ^2} \right)\]
Here, \(u\) represents the height of the drum's surface above its resting height, and \(c\) determines the speed that waves propogate along the drum's surface, and depends on its membrane material and tension.
The fact that the drum is attached to the frame at the surface means that solutions have to satisfy \(u=0\) at the edge of the drum.
To solve this equation for a circular drum as depicted above, we use much the same techniques that were used when determining the spherical harmonics. First, we convert the equation into a coordinate system that match the symmetry of our system, namely polar coordinates. Next we apply separation of variables, which means that we assume that the solution is a product of functions that depend only on time, radius and angle respectively. Then we solve the equations that result and determine that the possible vibrations can have the following form:
\[\cos (c \lambda_{mn} t) J_m(\lambda_{mn}r) \sin(m\theta),\]
where the cosine can be replaced with sine and the sine with a cosine (independently). Here \(J_m, m=0,1,2...\) is the infinite family of Bessel functions, and \(\lambda_{mn} = z_{mn} / a\), where \(z_{mn}\) is the \(n\)th zero of \(J_m\) and \(a\) is the radius of the drum. Each Bessel function has infinitely many zeros.
Because the wave function is a linear differential equation, sums of multiples of solutions are also solutions. The solutions above form a basis, and so any initial displacement and motion of the drum can be closely approximated by a combination of these basic solutions.
Notice that each basic function has a different vibrational frequency in time, \(t\). These frequencies correspond to the different notes that the drum is capable of producing. The notes that a drum produces change depending on how it is struck. Now, we see that this is because different ways of striking the drum activate different basis functions.
When we look at single basis functions, the situation is pretty simple. As \(m\) increases, the number of waves increases by one as you go around the disk. As \(n\) increases, the number of waves increases by one as you go from the center to the edge of the disk. Overall, the basis function waves are very symmetric and easy to understand.
Things become richer and more complicated as we combine multiple basis functions together. In the second visualization, below, we see the combination of two basis functions. The balance parameter indicates how much the combination leans toward one basis function versus the other. A balance parameter of 0.5 indicates an even balance between the two.
When creating this visualization I wasn't sure if there were any Javascript packages available to compute the required Bessel functions. I was very fortunate to find this open source implementation of the Bessel functions. It was easy to use, fast, and allowed for a smooth high-resolution rendering of the drum vibrations.
I also needed to determine several zeros of the Bessel functions to create the visualizations. I got the zeros offline using SciPy and then hard-coded them into the Typescript code.