The Wave: Part 2

Doing the Fourier transform on a bunch of points isn't enough to achieve my destiny.

After the sequence is transformed, a Bezier curve must be rendered to get the smooth curves of the final product. Bezier curves are the defacto method to render anything curvy in computer graphics. People commonly pick between two types: Quadratic and cubic.

The goal is to create a wave shape that closely resembles a sine wave, which has a smooth, periodic curve. A key characteristic of a sine wave is that at the peaks and valleys, the slope is zero. In other words, the curve flattens out momentarily at the high and low points before reversing direction. A Bezier curve with said property must have a control points that share a y value but add a horizontal offset.

These control points "pull" the curve toward them, influencing the curve's curvature.  By shifting these control points slightly to the left and right of the peak/valley, the 'flattening' is created at that point.

After the curve is drawn, an additional rendering step add noise akin to a CRT. First, the line is blurred. Blurring the line creates a gradient of pixels to go from one to zero. In the image below, pixels with values of zero are black. Pixels with values of one are white. In between, there are 0.5, 0.75, 0.1... etc.

Next, the pixels are put through a sigmoid function with a random offset. The core property of the sigmoid function is its 'S' shape. As input values get really big or really small, they approach a 0 and 1 respectively. 

A random horizontal offset allows final image to inherit a desirable noise property. In regions of the image where there are gradual changes in pixel values (gradients), the random offset can cause more noise or variation in the output values. This can lead to a more textured or "noisy" appearance in these areas.

Near the extreme values of 0 and 1 (black and white, respectively), the sigmoid function is less sensitive to the random offset. This means that areas of the image that are very dark or very light will be less affected by the noise introduced by the random offset.

I'm omitting details on performance because they're boring to talk about. There could be another article on the steps required to make this process real-time (20-30ish times per second).

Below is Karen on the left and mine on the right (no sound). They aren't referencing the same audio.

GARBLE, GRABLE, BLAHH...

The net affect of all this... STUFF is a wavy line across the screen. I know, I know. Its out of control. As the robot or person talks, the 'signature' of its speech is reflected inside a noisy wave. It just looks pretty. Important? ABSOLUTELY! 

Universally, I've observed people making a sound, watching the wave change, and then immediately start making more noise. It is a subtle touch that simply draws people into the simple act of talking.