GuruBlog

I have been asked to share the code of the sound visualizer I wrote in processing about a year ago, so I decided to write a blogpost explaining what I did

The program has two main parts - the autocorrelation function that creates the wiggly line and a glsl filter for the lens-distortion effect.

In the setup method of the procesing part I initialize minim - the sound library I use to access the sample data, load the glsl filter and initialize the sample playback

import ddf.minim.*;
PShader shift;
Minim minim;
AudioPlayer sample;
void setup() {
  size(960, 540, P3D);
  shift = loadShader("shift.glsl");
  background(0);
  frameRate(50);
  smooth();
  minim = new Minim(this);
  sample = minim.loadFile("music.mp3", 1024);
  sample.play();
}

in the draw method I simply create some curve vertices by looping throu the last 1024 samples of the sample and use the current value as the x-coordinate and the value of the sample after a slight delay as the y-coordinate of the sample. This technique ist sometimes used to evaluate the quality of a random number generator.

void draw() {
  background(0);
  stroke(128);
  strokeWeight(1);
  for ( int i=0; i<height/60; i++) {
    line(0, i*60, width, i*60);
  }
  for ( int i=0; i<width/60; i++) {
    line(i*60, 0, i*60, height);
  }
  translate(width/2, height/2);
  scale(1, 2);
  rotate(-PI/4);
  strokeWeight(2);
  stroke(255, 120);
  noFill();
  beginShape();
  float f = 400;
  float left[] = sample.left.toArray();

  for ( int i =0; i<sample.bufferSize() -10; i++) {
        float x1 = left[i];
    float x2 = left[i+10];
    curveVertex( (x1)*f, (x2)*f);
  }
  endShape();

  filter(shift);
}

the glsl filter takes the color of a pixel and shifts it slightly dependend on the distance to the midpoint and the color.

uniform sampler2D texture;
uniform vec2 texOffset;

varying vec4 vertColor;
varying vec4 vertTexCoord;

void main(void) {
    vec2 mid = vec2(0.5,0.5);
    vec2 coord = (vertTexCoord.st - mid) * 0.9  + mid;
    float d = pow(distance(coord, mid),2)*.1;
    vec2 dir= normalize(coord - mid);
    vec4 col1 = texture2D(texture, coord + dir*d);
    float d2 = pow(distance(coord, mid),2)*.115;
    vec4 col2 = texture2D(texture, coord + dir*d2);

    vec4 c = vec4( col1.r, col2.g, col2.b, 1.0);

    gl_FragColor = c;
}