Chapter 9. Music Visualizer

"See the music, hear the dance," said George Balanchine, famed Russian-born choreographer and father of the American ballet.

We won't attempt to raise the level of the art form, but still, maybe it'd be fun to visualize the playlists on our phones. In this project, we will create 3D animated abstract graphics that dance to the beat of your music. You might be familiar with music visualizations in 2D, but what would it look like in VR? To get inspired, try Googling for images using the phrase geometry wars, the classic game for XBox, for example!

A visualizer app takes input from the Android audio system and displays visualizations. In this project, we will take advantage of the Android Visualizer class, which lets an app capture part of the currently playing audio, not the full fidelity music details but a lower quality audio content sufficient for visualizations.

In this project, we will:

  • Set up the new project
  • Build a Java class architecture named VisualizerBox
  • Capture waveform data from the phone's audio player
  • Build a geometric visualization
  • Build a texture-based visualization
  • Capture the FFT data and build an FFT visualization
  • Add a trippy trails mode
  • Support multiple concurrent visualizations

The source code for this project can be found on the Packt Publishing website and on GitHub at https://github.com/cardbookvr/visualizevr (with each topic as a separate commit).

Setting up a new project

To build this project, we're going to use our RenderBox library created in Chapter 5, RenderBox Engine. You can use yours, or grab a copy from the downloadable files provided with this book or our GitHub repo (use the commit tagged after-ch8—https://github.com/cardbookvr/renderboxlib/releases/tag/after-ch8). For a more detailed description of how to import the RenderBox library, refer to the final section, Using RenderBox in future projects, of Chapter 5, RenderBox Engine. To create a new project, perform the following steps:

  1. With Android Studio opened, create a new project. Let's name it VisualizeVR and target Android 4.4 KitKat (API 19) with an Empty Activity.
  2. Create new modules for each of renderbox, common, and core packages, using File | New Module | Import .JAR/.AAR Package.
  3. Set the modules as dependencies for the app, using File | Project Structure.
  4. Edit the build.gradle file as explained in Chapter 2, The Skeleton Cardboard Project, to compile against SDK 22.
  5. Update /res/layout/activity_main.xml and AndroidManifest.xml, as explained in the previous chapters.
  6. Edit MainActivity as class MainActivity extends CardboardActivity implements IRenderBox, and implement the interface method stubs (Ctrl + I).

We can go ahead and define the onCreate method in MainActivity. The class now has the following code:

public class MainActivity extends CardboardActivity implements IRenderBox {
    private static final String TAG = "MainActivity";CardboardView cardboardView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        cardboardView = (CardboardView) findViewById(R.id.cardboard_view);
        cardboardView.setRenderer(new RenderBox(this, this));
        setCardboardView(cardboardView);
    }
    @Override
    public void setup() {
    }
    @Override
    public void preDraw() {
        // code run beginning each frame
    }
    @Override
    public void postDraw() {
        // code run end of each frame
    }
}

You can add a cube to the scene, temporarily, to ensure that everything is set up properly. Add it to the setup method as follows:

    public void setup() {
        new Transform()
            .setLocalPosition(0,0,-7)
            .setLocalRotation(45,60,0)
            .addComponent(new Cube(true));
    }

If you remember, a Cube is a Component that's added to a Transform. The Cube defines its geometry (for example, vertices). The Transform defines its position, rotation, and scale in 3D space.

You should be able to click on Run 'app' with no compile errors, and see the cube and Cardboard split screen view on your Android device.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset