And my processing version…

During the recent stint I did making audio reactive visuals for the recent Peter Gabriel tour we had to create a track for Apres Moi. For part of the track Marc Bessant suggested creating a 3d Battlezone style landscape from the audio loosely based on the Unknown Pleasures album artwork created by Peter Saville for Joy Division. This is something we’d seen flight404 doing before and it seemed to fit with the pace and tone of the track.

I figured it would only be a short step away to use a variation of the code to recreate the cover itself as an audio reactive piece. Turns out I’m not the first to have thought this but hey, originality is overrated.

The song used is the first track from the album, Disorder.

For reference here is a fan shot video of the version created for Apres Moi…

An expansive video screen that spanned about two-thirds of the Bowl’s stage, enough to obscure the orchestra behind it, displayed a sequence of horizontal lines moving up as the screen itself raised. Soon a batch of vertical white lines joined, moving gracefully in tempo with the music, only Gabriel’s voice indicating his presence on stage until the screen was high enough to reveal the humans — all wearing black — behind it.

Reed’s “The Power of the Heart” nodded to “Ol’ Man River” as he sang “You and me we sweat and strain” in that wonderfully gritty, soulful voice of his. The accompanying imagery on an additional triptych video screen on the wall behind the orchestra was at its core supremely simple: two columns of swirling white dots resembling active molecules, each with a red dot, presumably the nuclei, at the center. As the song progressed, the nuclei moved from their respective outer screens toward one another in the center screen, an extraordinarily moving image in conjunction with Gabriel’s song about the difficulty of two hearts finding, and staying, together. It’s going to make for one killer concert DVD.

Read it in full here.

And the visor screen from “Mirrorball”

At about the same time that article was published I started a transition from a maker to a manager that is still ongoing and surprisingly hard to navigate. The usual expected problems of being promoted from within a team were minimized by virtue of the fact I was primarily the designer and front end guy working with a team of pure developers and so was always slightly apart from the crowd anyway. That and the startup I work for is small and has a pretty flat hierarchy.

Surprisingly my main problem has been the redefinition what I expect of myself. My expectation used to be that at the end of the day there would be a small pile of code or images that are production ready and in the git repo. And suddenly my output is my thoughts, opinion or influence sometimes in wireframe form and sometimes verbal so how can I as an employee measure my own performance when I have nothing to show for it? We are a tiny company so of course I still cut code and I still photoshop production images from time to time but that only appears to confuse my poor addled maker brain and skew the teams agile velocity.

Part of navigating this transition will affect this journal as well. Not sure how as yet, it may increase the frequency of code and imagery as I’m no longer getting my ‘maker’ fix at work but the more text based output may well increase as I practice the art of expressing an opinion with words rather than through a medium such as music or design.

import rwmidi.*;

MidiInput input;
MidiOutput output;

int sx, sy;
float density = 0.5;
int[][][] world;
int note;

void setup()
{
  size(8, 8, P2D);
  frameRate(5);
  sx = width;
  sy = height;
  world = new int[sx][sy][2]; 

  input = RWMidi.getInputDevices()[2].createInput(this);
  output = RWMidi.getOutputDevices()[2].createOutput();

  // Set random cells to 'on'
  for (int i = 0; i < sx * sy * density; i++) {
    world[(int)random(sx)][(int)random(sy)][1] = 1;
  }
} 

void draw()
{
  background(0); 

  // Drawing and update cycle
  for (int x = 0; x < sx; x=x+1) {
    for (int y = 0; y < sy; y=y+1) {
      note = y * 16 + x;
      //if (world[x][y][1] == 1)
      if ((world[x][y][1] == 1) || (world[x][y][1] == 0 &amp;&amp; world[x][y][0] == 1))
      {
        world[x][y][0] = 1;
        set(x, y, #FFFFFF);
        output.sendNoteOn(0, note, 127);
      } else {
        output.sendNoteOn(0, note, 0);
      }
      if (world[x][y][1] == -1)
      {
        world[x][y][0] = 0;
      }
      world[x][y][1] = 0;
    }
  }
  // Birth and death cycle
  for (int x = 0; x < sx; x=x+1) {
    for (int y = 0; y < sy; y=y+1) {
      int count = neighbors(x, y);
      if (count == 3 &amp;&amp; world[x][y][0] == 0)
      {
        world[x][y][1] = 1;
      }
      if ((count < 2 || count > 3) &amp;&amp; world[x][y][0] == 1)
     {
        world[x][y][1] = -1;
      }
    }
  }
} 

void noteOnReceived(Note note) {
  println("note on " + note.getPitch() + ":"  + note.getVelocity());
  if (note.getVelocity() > 0) {
    int nx = note.getPitch() % 16;
    int ny = (note.getPitch() - nx) / 16;
    output.sendNoteOn(0, note.getPitch(), 100);
    println(nx);
    println(ny);
    world[nx][ny][1] = 1;
  }
}

// Count the number of adjacent cells 'on'
int neighbors(int x, int y)
{
  return world[(x + 1) % sx][y][0] +
         world[x][(y + 1) % sy][0] +
         world[(x + sx - 1) % sx][y][0] +
         world[x][(y + sy - 1) % sy][0] +
         world[(x + 1) % sx][(y + 1) % sy][0] +
         world[(x + sx - 1) % sx][(y + 1) % sy][0] +
         world[(x + sx - 1) % sx][(y + sy - 1) % sy][0] +
         world[(x + 1) % sx][(y + sy - 1) % sy][0];
}

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.

But there’s one bit missing to get it working if you’re getting the 403 errors.

You need to run the following command to tell Plesk to use your spanking new vhost.conf

/usr/local/psa/admin/sbin/websrvmng -u --vhost-name=<domain>

From davidhorvitz.tumblr.com/

Simply put the following code at the bottom of your environment.rb and SASS will munch away happily.

Sass::Plugin.options[:template_location] = {
   RAILS_ROOT + '/your/base/directory' => RAILS_ROOT + '/public/stylesheets',
   RAILS_ROOT + '/you/theme/directory' => RAILS_ROOT + '/public/stylesheets'
}

Looking around there are an amazing amount of “Getting Started” tutorials but not much more really. There is a huge chasm between these (usually very simple) tutorials and the documentation for Gems such as Clearance. There are a few excellent screencasts that have helped from Peepcode but somehow I always feel like they are aimed too low or too high for someone who learns like I do.

So how does one bridge that gap? I’ve looked at books - and there are loads of great RoR tomes - but my brain just doesn’t absorb information in that way, I have to actually be doing something - for real - for it to sink in for some reason. Personally I’ve taken to wandering around GitHub and downloading templates and other project templates and piecing together how it all fits together myself but given how many coding styles exist even in the tightly controlled world of RoR it can create more confusion sometimes.

(((https?|ftp):\/\/[^\.]|www\.)[^\s]*[^\s\.,])

Researchers in Japan setup two ATMs, ?identical in function, the number of buttons, and how they worked.? The only difference was that one machine?s buttons and screens were arranged more attractively than the other. In both Japan and Israel (where this study was repeated) researchers observed that subjects encountered fewer difficulties with the more attractive machine. The attractive machine actually worked better.

So now we?re left with this question: why did the more attractive but otherwise identical ATM perform better?

A List Apart

My obsession with the Monome and the Tenori-On continues unabated but I can get my virtual fix now thanks to Andre Michelle and his Tone Matrix

New set of experiments from Flight 404 are surfacing on Vimeo. As always they are stunning. Reminds me that I really need to look into GLSL shaders in Processing

1. Despite all the music on here being electronic wonkiness I used to play guitar in an awful instrumental band inspired in equal parts by Ozric Tentacles and Pantera called ‘Little Silver Goodchild’. Thankfully there are no surviving recordings of us ‘performing’ that I know of.We arrived at that clumsy name because the band we were in before was called Mortimer’s Cross (equally awful) and as Mortimer was the drummer’s surname the rest of us thought we should have a go the second time round. We used to do a stonking cover of the Starsy & Hutch theme tune however.
2. I am rarely able to burp audibly. Which made making friends difficult at scout camp.
3. When I was 15 I fell ten feet from a platform above a stage and landed on my head. When I came round about two minutes later all my ‘friends’ were still up on the platform I fell off laughing.I then proceeded to spend three days in hospital having my blood pressure taken every fifteen minutes. The concussion and lack of sleep combined contributed to one of the strangest three days I’ve ever spent.
4. When all around me had Spectrum 48ks and the like my parents decided to take a different route and bought me an Oric Atmos. I have never met anyone else who had one, or in fact even heard of it. It was shit.
5. I used to be a DJ as part of the fledgling Breakbeat scene. When I released my (only) album my publishers somehow managed to swing it to be the first DJ on the Dance Tent at Glastonbury on the Friday morning. I was expecting to play to a few hundred folk who for some reason decided to chill out in the tent but due to a freak rain shower I ended up playing to about 5000 people. It was fucking amazing and petrifying in equal measure.
6. A few years back I was deep into work and on my own in the office. I let out a sneeze and was nearly scared out of my skin by someone saying “Guzuntite” just behind me. I leapt out my chair with my usual highly offensive exclamation of fear and span round to see who it was. I was then even more startled to discover the wisher of good health was none other than Led Zepplin front man Robert Plant. I have a feeling that one encounter knocked about 3 years off my lifespan. I would say it left me Dazed and Confused but that would be too easy.
7. Despite my average stature (5’9” and a bit) I became part of the High Jump event at my final years school sports day. I hadn’t trained, it was simply the only event that was under subscribed and the teacher made me do it under threat of physical violence. I’m not sure which of us was more surprised when I equaled the school record that day.

As part of the meme I have to tag some friends with blogs to get them to do the same… Soo.. I’m going to tag…

• Helen
• Liam
• Reebs
• Neil C
• Claire L
• Chrissy G

Was pointed at this UK advert for Helvetica by a post on Daring Fireball and wanted it for my wall. Spent an evening kerning to match the original poster and pushed the images a bit to counter the lowish res scan then added in some red to honour the swiss origins of the infamous typeface.

You can download a zip file containing an A4 and a Letter sized PDF from here.

Things which are different in order simply to be different are seldom better, but that which is made to be better is almost always different.

Dieter Rams, 1993

My goal is to omit everything superfluous so that the essential is shown to best possible advantage.

Dieter Rams, 1980

via Monoscope

Amazing realtime volumetric video done in openframeworks by Moka. I love lighting effects more than anything and this just strips it down to the pure volumetric lighting goodness using GLSL shaders.

Utterly gorgeous.

One word.

Want.

Spent some of the weekend fine tuning this trace of a famous image of Delia Derbyshire. Now I need to find some way of getting it onto a T-Shirt.

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();
  }
}

Absolutely loving the latest work from Frederik that popped up on my Flickr Processing Group feed. The neon colour scheme is almost 80’s in feel but it really works for me.

…to my mate Marc for letting him down royally and not doing his website for him when I said I probably could I thought I’d at least let you know that his site is up and full of yummy graphic design that he’s done.

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.