Prototyping – First iteration of audio visualizer

Over the previous months I have learned to use Processing to visualize data, using techniques such as for loops, conditionals, and integers to create visual output. I have also learned to use Minim at a basic level, Processing’s included library for using audio.

Building on my analysis and what I have learned of Processing thus far, I have created the first iteration of what I intend to be my final project – an audio visualizer built with Processing’s Minim Library.

import ddf.minim.*;

Minim minim;
AudioPlayer player;

int col1 = 100;
int col2 = 100;
int x ;
int y ;

void setup()
  size(1280, 620, P3D);
  background(0) ;
  smooth ();
  float x = 6;
  minim = new Minim(this);
  player = minim.loadFile("time.mp3");

void draw()

  for (int i = 0; i < player.bufferSize () - 1; i++) {

    if (col1 < 255) {
    col1 = 75+int(player.right.get(i)*255) ;
    } else {
    col1 = 0;

    if (col2 < 255) {
      col2 = 75+int(player.left.get(i)*255) ;
    } else {
      col2 = 0;

  int y1 = (int(player.left.get(i)*305));
  int y2 = 620-(int(player.right.get(i)*305));

    if (i == 0) {




  if (x < width) {
    x = x + 6;
  } else {
    x = 6;


void mousePressed (){
  background (0);

My final project will be interactive as the audio values will be based on user input, however for now I am using the audio player function of Minim to get input from a preset audio track rather than a microphone. This will allow me to develop iterations without requiring microphone testing each time.

first iteration
The height and colors of the lines are determined by sound.

My main goal with this iteration was to get the visual elements created by Processing successfully responding to the audio input, creating integers y1, y2, col1 and col2 to be determined by the player.left.get and player.right.get functions of the Minim library. These two functions return values for amplitude of whatever audio input has been provided, be it an audio track or ongoing input, and respond to Stereo audio – left and right.

The visual elements are a series of lines created across the screen using a for loop (see lines 26, 43-47, and 58-62), to display the audio input’s values chronologically like a wave going across the screen – the top half of the screen draws lines based on the left audio, and the bottom is based on the right audio. This results in an aesthetic similar to a spectrogram, however displaying amplitude over time compared to by frequency. As the lines repeat from the start, I also put in a fade effect (lines 54-56) to gradually fade out previously drawn lines, which is also a visually pleasing effect. I also lowered the frame rate to 30fps, as the sketch felt a bit too fast paced at full 60fps not giving much time to see how the graph reacts to the sound input.

My next iterations will need to examine in greater detail how my code responds to the audio’s input, as curiously quieter audio values still display full length lines drawn on the screen (though colors remain dull), and refine the visualizer to react more accurately with what the audience will perceive from the audio. The values drawn from player.left.get and player.right.get may not reflect the actual sound.


Minim documentation –


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s