Fire Music Visualizer

In order to hit the volumetric fire-y look that I wanted, I faked a volume by ray marching. In my vertex shader I displaced the original sphere with two levels of noise (one low frequency high amplitude pass to make the overall shape less sphere like, and one high frequency low amplitude pass to give the surface more detailed distortion). Both of these displacements are animated over time by moving the input position based on time so the fire appears to be moving up.

Then in my fragment shader I mimicked ray marching an SDF. For my "SDF" (in quotes because it’s deliberately not fully accurate, more on that later), I added distance from the sphere with amount of displacement for the noise. I determine color based the distance this "SDF" returns, giving the fire a layer multicolored look. So as I raymarch through the fire volume, these different colored colors “accumulate,” creating the volumetric look. 

However, I wanted a way to make the fire look smaller and less dense so it could fade out at the top and pulse with the music. To do this, I actually use a fake radius (not the actual radius of the original sphere) in my "SDF". When this is lower it has the effect of looking like a smaller, thinner volume. I use an easing function to mix between values for this fake radius from the bottom to the top of the fire to give the illusion that the fire fades into smoke at the top. I also use another easing function to change the color and transparency of the smoke from bottom to top.

The other main feature I focused on was having my fire change based on audio input. I made it so a button in the website plays a song (I chose Burn lol I thought it was funny at first but around time 100 of hearing it I kind of regretted not picking a song I liked more). 

The amplitude of the lower frequency sounds in the song affects the fake radius, making the fire appear to pulse with the lower beats. The amplitude of the higher frequency sounds affect the color, so the fire seems to glow bright red at higher pitched percussion and vocals. Specifically, this value is plugged into a bias for the value that affects the transition between bottom and top colors of the fire.

I really want to integrate the visualizer with Spotify so you can play any song.