Infocow connects young people with useful stuff to help take control of life - sites, stories, information and inspiration.

Worked on the front end code and UI design with Nicolas Alpi and Ed Davey developing the back end on this project for Futurelab. Was a great experience with lots of brilliant feedback and user testing done by Futurelab feeding into the Agile development methodology we use here at Jiva.

Was pleased to be able to do a design based on Conway’s Game of Life. The pixel shapes in the logo are two examples of patterns that are either static (survive) or create exponential growth (thrive) using the standard rules of the game.

The private beta is now live and we are looking for students and tutors to start testing.

The visor screen from “Boy In The Bubble” (Fan shot video)

The visor screen from “Mirrorball” (Fan shot video)

The rear vertical screens on “Apres Moi” (Fan shot video).

The rear vertical screens on “My Body Is A Cage” (Fan shot video).

And some stills from the original renders..

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.

Nothing really new up front as yet in terms of features but - like Real World Records - the site has been designed to be extended easily over the coming months with plenty of scope for custom areas.

Standards based, with proper separation and where possible semantic markup this is the final Real World site to move to PHP from Lasso and the final missing site after the theft.

www.womad.org

This is a temporary site and as such there are some rough edges but I think for only a few days work on the UI and design it holds up pretty well with a simple and clean design, free from Web 2.0 clichés, a full search, clean URLs and sound samples for every track in the Realworld catalogue so in many ways is a vast improvement on the original site.

www.realworldrecords.com

Amazing piece of HTML/CSS/jQuery hackery by Cameron Adams that just begs to be played with. It looks like my future will mainly involve creating nostalgic Q-Bert landscapes.

Cubescape

Stolen.

So a note to all you admins out there in charge of sites. Have a think about what your strategy is in case on not just hardware failure, but total loss. Not something you think about too often.

We are mainly back after 4 days of frantic work, but have made some harsh decisions about the very old sites based on some archaic tech that we have just cut free and plan to remake. The only main one missing as of now is Real World Records which we are planning to get online in a new form this week.

Alongside the restore we moved hosts, and switched to a hosted system rather than a co-located server so had to get elbow deep to reconfigure most of the sites to get them working on the new server so this wasn’t just a simple backup restore.

The only missing thing are the video assets. We will be re-encoding and re-uploading those over time to take advantage of the new flash based video player we switched to earlier this year.

As ever having Peter’s name attached gives it legs in the blog world and here is some of the reporting.

Techcrunch | Wall Street Journal | Slashdot | The Register

Always interesting to read the comments (apart from the endless Sledgehammer jokes) and see what people on the outside think our setup is like. Most appear to assume a large enterprise type setup with a team of devs, designers and editors. The reality is much more modest.

 bigblueball.realworldrecords.com

Front and back end rebuilt from the ground up to enable products to be grouped in dynamic ways so digital downloads can be incorporated in the next phase with lots of work done to make the front end as simple as possible to create a higher conversion rate despite the relatively high amount of information required on-screen.

www.womadshop.com

After months of faffing I’ve finally got round to prepping, testing and uploading my first efx pack. 8 .bgrp files for Plogue Bidule users everywhere check out.

[sg_efx] Buffer Scratch

An LFO based audio buffer effect. Audio goes in, weird scratchy and odd sounds come out. The LFO speed is tempo locked with presets for a few different tempo divisions. Needs to be synced for it to work.

[sg_efx] BuffScatter

As above but weirder and less controllable. Needs to be synced for it to work.

[sg_efx] Stereo Triple LFO Buffer

An extension of Buffer Scratch. This time three non synced LFOs get busy with your buffer. Needs to be synced for it to work.

[sg_efx] S&H Filter+Comb

2 tempo locked sample and hold LFOs mess with a low pass filter and a delay unit to create filtered comb filter type effects. Needs to be synced for it to work.

[sg_efx] Stereo 6-12db Filter

Boring and bog standard, but pretty handy none the less.

[sg_mod] Log Slider

This isn’t an effect just a handy group. The slider value displayed is converted into a Log shape curve on output. Handy for filters and the like.

[sg_mod] Sync LFO

Another module, this time the Synced LFO used in the effects above. Needs to be synced for it to work.

[sg_mod] Sync S&H

A synced Sample and Hold LFO, as used in the S&H Filter+Comb group and handy to have stand alone. Needs to be synced for it to work.

How To Install

[sg_efx] Pack One

Download the .zip file linked above and expand. Drag the ‘[sg_bidule] Pack One’ folder to the Bidule groups folder. Start Bidule and with any luck it will tell you that there are 8 new groups.

There will be a new folder in your palette at the bottom called [sg]. All the new groups are in there.

Feel free to open them up and improve / hack them as they are the result of late night noodling rather than concerted clean coding so they may be a bit unpredictable, but I like that when it comes to music.

If you use them in a track please let me know.. I’d love to hear what you’ve done.

Obviously these are provided as is, no warranty etc. If you break something, lose work, blow your speakers, whatever it really isn’t my problem OK?