The math behind Heartz

Soundwaves can be visualized by a Fast Fourier Transform (FFT), which decomposes the sound signal into its frequencies (pitch) and respective amplitudes (volume). This results in the “mountains and valleys” that we commonly see in waveform visualizations.

To create the 2D waveform ring, an invisible hand traces once around a reference circle throughout your 5-second audio clip. During this time, 360 sound samples are taken. based on the frequency and amplitude at each timestamp, a dot is plotted at a calculated distance away from the center of the reference circle at the corresponding angle. Each new dot is connected to the previous one by a straight line, and the complete set of dots creates a preliminary circular waveform with mountains and valleys depending on the dots’ varied distances away from the center.

To make the circular waveform less jagged and take on more of a sine/cosine wave appearance, a Catmull-Rom smoothing algorithm is used to approximate curves between the set of dots. This waveform is stored for the next step: transformation to 3D mesh.

Three.js is used to create the mesh using the following logic:

  1. Consider the 2D loop to be set flat on the X-Y plane. A copy of the loop is created, and it is shrunk towards the center on the plane to 25% the size of the original. We now have two concentric loops.
  2. Points in the perimeter of the outer loop are raised or lowered along the Z axis depending on their distance from the center. Points closest to/farthest from the center are lowered/raised by 1 unit respectively. All intermediary points are raised/lowered proportionally along the z axis. The same procedure is performed on the inner 2D loop at a reduced intensity. Then, each point on the perimeters of the two loops are connected to their concentric counterpart. This creates a waved “donut” shape that you see in the final mesh.
  3. Four levels of the Catmull-Clark subdivision surface algorithm is applied to this mesh to give it rounded corners. It is then solidified to ensure proper thickness for 3D printing. Finally, a metallic material and smooth modifier are applied to the whole object to give it its shiny appearance. You may have also noticed the blue and yellow directional lights that it’s reflecting!