And the visor screen from “Mirrorball”

One thing I noticed straight off the bat is the note numbers are not incremental. Each row starts 16 higher than the last - I assume to allow for the same firmware to work in a 16 x 16 layout model - and there is a very simple way that reminds me of the technique of bitshifting I used back in the bad old days of DVD authoring to convert from one to the other.

// To go from XY to the note number
noteNumber = y * 16 + x;

// To go from the note number to the XY
x = noteNumber % 16;
y = (noteNumber - x) / 16;

Hopefully that will save someone ten minutes of head scratching.

I started messing around with sin/cosin based grid manipulation a few days ago and posted the results on Flickr along with an abstract of the code and equation I used to generate the images.

This prompted Andy Best to amend the code to create two animations. Inspired by his efforts I decided to do my own animation in response.

The music is a quick edit I did of a Sir Drew bootleg 12” I’ve had for years and always loved.

Was experimenting with creating text with particles and a friend who runs the Sound of Habib record label said that he wishes he had time to mess around with stars so this is a little christmas gift for him.

Code after the jump.

import processing.opengl.*;
import oscP5.*;

OscP5 oscP5;

float xrot = 0;
float zrot = 0;

float xrot_targ = 0;
float zrot_targ = 0;
float orientation = 0;

float dampSpeed = 5;

void setup() {
  size(400,400, OPENGL);
  oscP5 = new OscP5(this,8000);
  smooth();
}

void draw() {
  camera(  0, 0, 300,
         0, 0, 0,
         0.0, 1.0, 0.0
     );
  background(0); 

  // Basic value smoothing

  if (xrot_targ > xrot) {
    xrot = xrot + ((xrot_targ - xrot) / dampSpeed);
  } else {
    xrot = xrot - ((xrot - xrot_targ) / dampSpeed);
  }

  if (zrot_targ > zrot) {
    zrot = zrot + ((zrot_targ - zrot) / dampSpeed);
  } else {
    zrot = zrot - ((zrot - zrot_targ) / dampSpeed);
  }

 // Detection for if the iPhone is upsidedown or not

  if (orientation < 0) {
    fill(255,0,0);
    rotateX(radians(xrot));
    rotateZ(radians(zrot));
  } else {
    fill(255,255,0);
    rotateX(radians(xrot*-1));
    rotateZ(radians(zrot*-1));
  }
  box(130,10,60);

}

void oscEvent(OscMessage theOscMessage) {
  if(theOscMessage.checkAddrPattern("/accxyz")==true) {
      xrot_targ = (theOscMessage.get(0).floatValue()*90);
      zrot_targ = (theOscMessage.get(1).floatValue()*90)*-1;
      orientation = theOscMessage.get(2).floatValue();
  }
}

To make this work you’ll need a few bits from around the internets. First up is the FFTOctaveAnalyser class from Dave Bollinger which you need to put in the root of your sketch directory, then you’ll need to download the Ess library.

Finally you’ll need something like Audacity to split an audio file into it’s left and right channels.  Save them as two mono wav files (for some reason AIFF seems to upset it) called <audiofile>.L and <audiofile>.R and pop them in the sketch data directory.

Assuming all this has gone to plan all you need to do is edit the source code on line 4 so the audioFilename variable is the same as the <audiofile> referenced above and click the play button. Give it a second or two (depending on the length of the audio file) and you should see the Audio DNA displayed and find a TIFF version sitting in a folder called ‘out’ in your sketch folder.

Onto the source.  The key to this is it’s not real time.  It scans the audio file chunk by chunk so in this instance it’s faster than real-time.  With some tweaks a similar technique can be used to render out audio reactive Processing sketches that run slower than real-time if that’s your bag.

import krister.Ess.*;

String audioFilename = "md";
String audioFilenameL = audioFilename+".L";
String audioFilenameR = audioFilename+".R";

int imgSize = 500;

// SinCos Lookup tables from Toxi (i think via flight404...) He's a clever chap, look him up.
public static final float sinLUT[];
public static final float cosLUT[];
public static final float SINCOS_PRECISION=1f;
public static final int SINCOS_LENGTH= (int) (360f/SINCOS_PRECISION);
static {
  sinLUT=new float[SINCOS_LENGTH];
  cosLUT=new float[SINCOS_LENGTH];
  for (int i=0; i<SINCOS_LENGTH; i++) {
    sinLUT[i]= (float)Math.sin(i*DEG_TO_RAD*SINCOS_PRECISION);
    cosLUT[i]= (float)Math.cos(i*DEG_TO_RAD*SINCOS_PRECISION);
  }
}

AudioChannel chnL;
AudioChannel chnR;
FFT fftL;
FFT fftR;
FFTOctaveAnalyzer octL;
FFTOctaveAnalyzer octR;
int bufferSize = 1024;
int samplingRate = 44100;

int frameL = 0;
int frameR = 360; 

int samplesPerDegree;
int section;

float[] limits = new float[9];
float[] radii = new float[9];
float[] linethick = new float[9];

float radStep;

void setup() {
  size(imgSize, imgSize, P3D);
  noStroke();
  Ess.start(this);
  chnL = new AudioChannel(dataPath(audioFilenameL));
  chnR = new AudioChannel(dataPath(audioFilenameR));
  samplesPerDegree = chnL.size/181;
  fftL = new FFT(bufferSize*2);
  fftR = new FFT(bufferSize*2);
  fftL.limits();
  fftR.limits();
  fftL.damp(.5);
  fftR.damp(.5);
  octL = new FFTOctaveAnalyzer(fftL, samplingRate, 1);
  octR = new FFTOctaveAnalyzer(fftR, samplingRate, 1);
  octL.peakHoldTime = 10; // hold longer
  octL.peakDecayRate = 3; // decay slower
  octL.linearEQIntercept = 0.7; // reduced gain at lowest frequency
  octL.linearEQSlope = 0.02; // increasing gain at higher frequencies
  octR.peakHoldTime = 10; // hold longer
  octR.peakDecayRate = 3; // decay slower
  octR.linearEQIntercept = 0.7; // reduced gain at lowest frequency
  octR.linearEQSlope = 0.02; // increasing gain at higher frequencies
  background(255);
  fill(0);
  noLoop();
}

void draw() {
    limits[0] = 0.3;
    limits[1] = 0.6;
    limits[2] = 0.5;
    limits[3] = 0.4;
    limits[4] = 0.4;
    limits[5] = 0.4;
    limits[6] = 0.3;
    limits[7] = 0.3;
    limits[8] = 0.3;

    float radStart = imgSize/10;
    float radEnd = imgSize*0.9;
    radStep = (radEnd-radStart)/9;
    float radCurrent = radStart;

    for (int r = 0; r < 9; r++) {
      radii[r] = radCurrent/2;
      radCurrent = radCurrent+radStep;
    }

  for (int frm = 0; frm < 181; frm++) {
    analyze();
    render();
    advance();
  }
  saveFrame("out/"+audioFilename+".tif");
} 

void analyze() {
  section = (int)(frameL * samplesPerDegree);
  fftL.getSpectrum(chnL.samples, section);
  fftR.getSpectrum(chnR.samples, section);
  octL.calculate();
  octR.calculate();
} 

void render() {
  for (int i = 0; i < 9; i++) {
    if (octL.averages[i]>limits[i]) myArc(width/2,height/2,frameL,frameL+2,radii[i],radStep/2.5,.5);
    if (octR.averages[i]>limits[i]) myArc(width/2,height/2,frameR,frameR+2,radii[i],radStep/2.5,.5);
  }
}

void advance() {
    frameL ++;
    frameR --;
} 

public void stop() {
  Ess.stop();
  super.stop();
}

void arc(float x,float y,float degS,float degE,float rad,float w) {
  int start=(int)min (degS/SINCOS_PRECISION,SINCOS_LENGTH-1);
  int end=(int)min (degE/SINCOS_PRECISION,SINCOS_LENGTH-1);
  beginShape(QUAD_STRIP);
  for(int i=start; i<end; i++) {
    vertex(cosLUT[i]*(rad)+x,sinLUT[i]*(rad)+y);
    vertex(cosLUT[i]*(rad+w)+x,sinLUT[i]*(rad+w)+y);
  }
  endShape();
}

void myArc(float x,float y,float degS,float degE,float rad,float w, float step) {
  beginShape(QUAD_STRIP);
  noStroke();
  for (float i = degS; i < degE; i=i+step) {
    vertex(rad*cos(radians(i))+x,rad*sin(radians(i))+y);
    vertex((rad+w)*cos(radians(i))+x,(rad+w)*sin(radians(i))+y);
  }
  endShape();
}

I’ve been tinkering with audio visualisations in Processing for a few years now. The three animated ones I was happy enough with to show I have been adding to Vimeo but the still versions had never seen the light of day apart from glimpses as part of the audio player on this site.

I finally signed up to Flickr and added a few higher res artifacts of the experiments over there as Marc Bessant had posted about them on his blog recently so thought I should out the rest myself. There are two kinds that I’ve done. The ‘Fingerprint’ and the ‘DNA’ styles are very closely linked in terms of back end code but produce very different results.

‘Fingerprint’ was the first one chronologically I wanted to get something organic feeling and at higher resolutions and with the right colour palette they can look almost watercolour like. ‘DNA’ was the offshoot. The result of a conversation with the aforementioned Marc Bessent about creating something to etch onto the empty side of a 12” single release. The release happened, but the band in question didn’t go for the designs. Not sure what was used in it’s place.

You can see a simplified applet and get the source code here.

If you have any feedback or suggestions to how to improve them please get in touch.

Resonate is taking over the Masonic Hall in Frome on Wednesday 9th of July as part of the 2008 Frome Festival. This promises to be the biggest and best Resonate so far this year.

My second ever performance of my wonky downtempo live show with added spicy visuals… If you are in the area it would be great to see you there.

More Info Here