For our first visualization, we'll create a basic equalizer wave graphic. It'll be a rectangular block consisting of a series of cubes that are scaled according to the audio waveform data. We'll use the built-in Cube component already in the RenderBox library and its basic vertex color lighting material.

In the visualizations/ folder, create a new Java class named GeometricVisualization and begin as follows:

public class GeometricVisualization extends Visualization {
    static final String TAG = "GeometricVisualization";
    public GeometricVisualization(VisualizerBox visualizerBox) {
        super(visualizerBox);
    }
}

At the top of the class, declare a Transform array of cube transforms and the corresponding array for RenderObjects:

    Transform[] cubes;
    Cube[] cubeRenderers;

Then, initialize them in the setup method. We'll allocate the array of cubes, aligned and scaled as an adjacent set of blocks, creating a 3D representation of a wavy block. The setup method can be implemented as follows:

    public void setup() {
        cubes = new Transform[VisualizerBox.captureSize / 2];
        cubeRenderers = new Cube[VisualizerBox.captureSize / 2];

        float offset = -3f;
        float scaleFactor = (offset * -2) / cubes.length;
        for(int i = 0; i < cubes.length; i++) {
            cubeRenderers[i] = new Cube(true);
            cubes[i] = new Transform()
                    .setLocalPosition(offset, -2, -5)
                    .addComponent(cubeRenderers[i]);
            offset += scaleFactor;
        }
    }

Now on each frame, we just need to modify the height of each cube based on the current waveform data from the audio source (as obtained in VisualizerBox). Implement the preDraw method as follows:

    public void preDraw() {
        if (VisualizerBox.audioBytes != null) {
            float scaleFactor = 3f / cubes.length;
            for(int i = 0; i < cubes.length; i++) {
                cubes[i].setLocalScale(scaleFactor, VisualizerBox.audioBytes[i] * 0.01f, 1);
            }
        }
    }

    public void postDraw() {
    }

We also need to add a stub for the postDraw implementation. Then, instantiate the visualization and make it the active one. In MainActivity, at the end of onCreate, add the following line of code:

        visualizerBox.activeViz = new GeometricVisualization(visualizerBox);

That's all we need for now.

Start playing some music on your phone. Then, run the app. You will see something like this:

As you can see, we kept the unit cube in the scene, as it helps clarify what's going on. Each audio datum is a thin "slice" (or a flattened cube) the height of which varies with the audio value. If you're looking at a colored version of the preceding screen image, you will notice that the colored faces of the visualization cubes are like solitary cubes since they use the same object and material to render.

This visualization is a very basic example of using audio waveform data to dynamically modify 3D geometry. Let your imagination run wild to create your own. The audio bytes can control any transform parameters, including scale, position, and rotation. Remember that we're in a 3D virtual reality space, and you can use all of it—move your stuff all round, up and down, and even behind you. We have a few basic primitive geometric shapes (a cube, sphere, plane, triangle, and so on). But you can also use the audio data to parametrically generate new shapes and models. Plus, you can even integrate the ModelObject class from the previous chapter to load interesting 3D models!

In the next topic, we'll take a look at how to use the audio waveform data in texture-based material shaders.