Click here to view the embedded video.

Click here to view the embedded video.

I have taken some time to get my Yamaha DTXplorer electronic drums to communicate nicely with my Mac, finally it worked out and I can now “harvest” the sweet, sweet MIDI coming from the drums. Im no Moby, so believe me when I say these last one and a half days of frustrations was not to immortalize the sound of my drumming. It was, of course to get the data into Processing. A friend of mine is a DJ and he wanted us to experiment with playing “live” drums along with the turntables. Furthermore, to make some sort of visualization that would be 100% true to the beat. This is very hard I found out, there are a lot of good sound libraries with beat detection out there, but they are never plug n’ play. You need to tweak your code for every single song and even that is no guarantee for a consistent output. I came up with a pretty straight forward solution, if we were to use the electronic drums anyway we could just as well use the MIDI for the beat detection and then have the turntables control the colors.

I found out that I needed a few different applications and a MIDI cable before I got the signal all the way through. First off is the ESI MidiMate cable, I actually had the old model, but I think it was broken and could not handle if the MIDI in was not connected to a ground plane. It was 295 Danish Kroner ( ≈$55 ). Then I needed MidiPipe. This a free application developed by Nico Wald and it is brilliant! Should I ever make any money with this setup I will run to a browser and donate some money to Nico.
The idea with MidiPipe is that it “hijacks” every single MIDI port it can detect on the system, you then drag the one you need to the pipe(ESI MIDIMATE Port 1 turn up in MidiPipe the second I connected it to the drumkit) you can then drag other stuff into the pipe. I dragged in “AList” from the “Modifier” and that gave me just what it says, a list of all midi signals passing through MidiPipe.

MidiPipe is a life-saver

This was a cool way of testing out the drums. Lastly I dragged a “MIDI out” into the Pipe, more about that in a second. Then I went out and finally bought that license for OSCulator. Osculator have been running my Wiimote, iPhone, Arduino and Make controller for the last year and I have been to lazy/cheap to just buy the license. Well Osculator is a $15 minimum, but Camille asks people nicely to pay $39, which I did, of course, having used his software for about a year now. What Osculator can do is just to much to explain here… I needed it to translate my MIDI into OSC (because OSC is the new MIDI ) and then relay the rewritten data to a port on localhost using UDP. This was done so I could have some control over the data, also I now get something along the lines of “snare – on – 0.6″ (thats the pad sending the message, that it was “on”/hit and the strength it was hit with) into Processing instead of some MIDI byte I have to bitwise shift around to get any data from it, it just makes debugging easier and sending something through Osculator opens a world of other possibilities.

It is just crazy how many features there can be in such a simple application

A note here, when I started Osculator, MidiPipe noticed Osculator was listening on port 8000 and stuffed that piece of information into the “MIDI out” I mentioned earlier, now I could just select it there. So now my MIDI came in through MidiPipe, was listed for me to see and then relayed on to Osculator. In Osculator I caught each MIDI event and by selecting the signal and going Osculator – Edit – Demux, I could split the signal into its components and rebroadcast them as OSC messages on the network. For handling OSC Protocol stuff in Processing Andreas Schlegel did a really great library, you can get it here along with some other goodies Andreas made.

I now had 8 different OSC messages, one for each drum pad, cymbal and foot pedal (Im going to do the high hat pedal later on) that I can read out in Processing. I did a small sketch as you see in the video and just started the “play along” feature on my DTXplorer kit, with some “Hard Rock” selected and and the computers microphone recording.

And as always if there is some code or help You need just leave a mail or comment.

A version not completely compressed by the geniuses over at youtube

Example and code here

This was just some “while Im doing nothing, let’s put whatever in the ‘fun’ category” but if anyone would like the code, throw me a comment and I’ll send it off. I is uncommented and messy.

]]> http://www.rickigregersen.com/2009/08/11/sporetree/feed/ 5 http://www.rickigregersen.com/2009/08/09/circle-intersection/ http://www.rickigregersen.com/2009/08/09/circle-intersection/#comments Sun, 09 Aug 2009 21:17:42 +0000 Ricki http://www.rickigregersen.com/?p=190

“What is the point”

was my first thought on this.
I had to do some calculations on the intersections between circles, that was pretty straight forward and I got a class written up in Processing that could do just that.
Then I started playing around and ended up moving 10 circles around the screen using Perlin noise and if any of them intersects, I draw a dot. Pointless? certainly!

Maybe there is someone out there with an idea on how to make this into something other that a cpu hogging math feast. I would love to hear from You:)

Well there is some Perlin movement, some ArrayList looping and of course that class that takes 2 circles and returns their intersection, maybe someone can use that for something useful.

Example and code here:

EDIT: forgot some int/float math that made the tentacles look bulky… better now.
Example and code here:

The Soulwire Tentacles was an experiment in PixelBender speed and usability, so he makes it look as if the tentacles are really growing, i.e. starts out small and each “joint” grows as the tentacles grows. Mine is just a look into the random-organic way they grow. Also I was trying to see what kinds of speed I would get by using the Bitmap approach.

Here are the Soulwire Tentacles

And here are my Tentacles… that came out wrong…

The code:

/**
*
 * @BitmapSpore.as	:	inspired by http://blog.soulwire.co.uk/flash/actionscript-3/pixel-bender-growing-tentacles/
 * @Date  08/06-09
 * @Ricki Gregersen
*/

package
{
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.filters.BlurFilter;
	import flash.geom.ColorTransform;
	import flash.geom.Point;

	[SWF( width="512", height = "512", backgroundColor = "0x222222", frameRate = "30" )]

	public class BitmapSpore extends Sprite
	{
		private static var fading : ColorTransform = new ColorTransform( 1, 1, 1, 0.99999 );
		private static var _blur : BlurFilter = new BlurFilter( 1, 1, 2 );

		private var _bmd:BitmapData;
		private var _bmp:Bitmap;
		private var _container:Sprite;

		public function BitmapSpore()
		{
			_bmd = new BitmapData( 512, 512, true, 0x222222 );
			_bmp = new Bitmap( _bmd );
			addChild( _bmp );
			var s:Spore;
			addChild( _container = new Sprite() );
			for( var i:int = 0; i < 500; i++ )
			{
				s = new Spore( 256, 256, range( 0.01, 0.05 ), range( 2.0, 3.0 ), range( 0.2, 1.0 ));
				s.scaleX = s.scaleY = Math.random() * 2;
				_container.addChild( s );
			}
			addEventListener( Event.ENTER_FRAME, update );
		}

		private function update( event:Event ):void
		{
			var n:int = _container.numChildren;
			var s:Spore;

			for( var i:int = 0; i < n; i++ )
			{
				s = Spore( _container.getChildAt( i ));
				s.move();
				s.x = s.loc.x;
				s.y = s.loc.y;
			}
			_bmp.filters = [  _blur ];
			_bmd.colorTransform( _bmd.rect, fading );
			_bmd.draw( _container );
		}

		private function range(min:Number, max:Number = NaN):Number
		{
			if(isNaN(max)) {max = min; min = 0}
				return min + (Math.random() * (max - min));
		} 

	}
}
	import flash.geom.Point;
	import flash.display.Shape;

	class Spore extends Shape
	{
		public var loc:Point;

		private var angStep:Number;
		private var posStep:Number;
		private var curl:Number;
		private var n:Number = 0;
		private var a:Number = Math.random() * Math.PI * 2;

		function Spore( xPos:Number, yPos:Number, aStep:Number, pStep:Number, c:Number )
		{
			loc = new Point( xPos, yPos );
			angStep = aStep;
			posStep = pStep;
			curl = c;
			graphics.lineStyle( 0, 0x222222, 0.7 );
			graphics.beginFill( 0xFF6600, 0.7 );
			graphics.drawCircle( 0, 0, 5 );
			graphics.endFill();
		}
		public function move():void
		{
			n += Math.random() * (angStep - -angStep) + -angStep;
			n *= 0.9 + curl * 0.1;
			a += n;
			loc.x += Math.cos( a ) * posStep;
			loc.y += Math.sin( a ) * posStep;
			this.scaleX = this.scaleY *= 0.98;
			var s:Number = this.scaleX = this.scaleY;
			if( s < 0.1 )
			{
				loc.x = loc.y = 256;
				this.scaleX = this.scaleY = Math.random() * 2;
			}
		}
	}

The learing curve in Processing is extremely flat and if you have prior programming experience you will go from having an idea to an actual prototype in minutes. So we thought up a small project: A Processing sketch that could detect a wavy black line on a piece of paper and subsequently play a tone according to the lines y position.

The result was anTrack, it uses the Capture Library to read the bitmaps of a web cam and the Minim sound library to produce a sine wave. It works just fine and my friend was hooked on the simplicity of Processing, he actually wrote most of the implementations.

What to use this for? I have no idea, it resembles a 1979 sci-fi horror film sound effect or a Theremin. We thought about building some sort of a rack in lego mindstorm that would continously scroll a piece of paper infront of the camera. A seismographic reading turned into sound, I guess, but the main goal was to have a little fun with processing for a couple of hours and we achieved that just fine.

anTrack.pde

/*
* author: Kenneth Knudsen & Ricki Gregersen
* description: reads a line from a piece of paper using a webcam
*              and outputs a tone between 440 and 880 Hz
*              according to the lines y coordinate
*/
//use the minim sound library, included in processing 1.0
import ddf.minim.signals.*;
import ddf.minim.*;
import ddf.minim.analysis.*;
import ddf.minim.effects.*;

//CamModule instance for grapping a frame from the webcam
CamModule cam;
//SoundModule instance for outputting a sine wave at a specific frequence
SoundModule sound;
//TrackModule instance for translating a y coordinate to a frequency
TrackModule track;

void setup()
{
  size(640, 480);
  frameRate(30);
  //CamModule constructor takes an input of (PApplet, width to grap, height to grap and offset)
  //this means: we will grap 30x480 pixels from the webcam starting at 320 in the x direction
  cam = new CamModule(this, 30, height, 320);
  sound = new SoundModule(this);
  track = new TrackModule();
}

void draw()
{
  //get the bitmap from the webcam
  PImage frame = cam.bitmap();
  //process it and return the position of the line as a frequency
  float freq = track.processBitmap(frame);
  //feed the frequency to the soundModule
  sound.freq(freq);
  //present the frame grabbed from the webcam to the screen
  image(frame, 320, 0);
}
//remember to close the connection made to the soundcard
void stop()
{
  super.stop();
  sound.stop();
}

The CamModule:

import processing.video.*;

class CamModule
{

  private Capture cam;
  private PImage frame;
  private int w, h, offSet;

  CamModule(PApplet applet, int _w, int _h, int _o)
  {
    w = _w;
    h = _h;
    offSet = _o;
    String[] devices = Capture.list();
    //println(devices);
    //comment in the above line if you don't know which port your webcam is plugged into
    cam = new Capture(applet, width, height, devices[1]);
    frame = createImage(w, h, RGB);
  }

  public PImage bitmap()
  {
    //read the full image from the webcam and copy out the pixels needed
    if (cam.available()) {
        cam.read();
        frame.copy(cam, offSet, 0, w, h, 0, 0, w, h);
    }
    return frame;
  }
}

The SoundModule.pde

class SoundModule
{
  Minim m;
  AudioOutput dac;
  SineWave sine;

  SoundModule(PApplet a)
  {
    m = new Minim(a);
    dac = m.getLineOut(Minim.STEREO);
    sine = new SineWave(0, 0.5, dac.sampleRate());
    //it is all in the minim documentation which is quite good, but portamento means that there
    //will be no pause when changing from one frequency to another, instead there is a 200 ms slide from
    //the original tone to the new one.
    sine.portamento(200);
    dac.addSignal(sine);
  }

  void freq(float f)
  {
    //if a frequency is present, map it to a sine with Hz between 440 and 880 (an octave)
    if(f > 0)
    {
      f = map(f, 0.1, height, 440, 880);
    }
    else{
      f = 0;
    }
    sine.setFreq(f);
  }
  //again remenber to close the connection to the soundcard
  void stop()
  {
    m.stop();
    dac.close();
  }
}

The TrackModule.pde

class TrackModule
{

  private float th = 80; //brightness 0-255
  private int hh = 80; //percent 0-100

    TrackModule()
  {

  }

  float processBitmap(PImage bm)
  {
    int index;
    int hits;
    int successive_hits = bm.width * (hh / 100);

    /*  this is a sort of filter.
     we run through the pixels one horizontal line at the time
     if we find a pixel with a brightness below the threshold (th)
     we add a hit. So if 80 percent of a line is dark enought to
     trigger the filter we count that as a dark line spotted and we retun the
     y value were it was spotted.
     */

    for(int y = 0; y < bm.height; y++)
    {
      hits = 0;
      index = y * bm.width;
      for(int x = 0; x < bm.width; x++)
      {
        color c = bm.pixels[index + x];
        if( brightness(c) < th)
        {
          hits++;
          if(hits > successive_hits)
          {
            return y;
          }
        }
      }
    }
    return 0.0;
  }
}

There is an Applet here, I haven’t gone through the steps to make it work in a browser so the visitor
can use their own web cam, it’s mostly done so you can get the source code.