5. Plotting, Sound, Interaction


Visual Structures from Music

Sound library

All the functions of p5 that deal with sound are kept in their own library. So the first step is to load the sound library in HTML file of our sketch:

< script src="P5/addons/p5.sound.min.js">< /script>
   


Playing mp3

Load and play mp3 - files:

var song;

function setup() {
          song = loadSound('yourFile.mp3');
  song.loop();
  createCanvas(640, 100);
  background(200);
}

function draw(){
          speed = map(mouseY, 0.1, height, 0, 2);
  speed = constrain(speed, 0.01, 4);
  song.rate(speed);
}

function mousePressed() {
  if (song.isPlaying()) {
          song.stop();
  } else {
          song.play();
  }
}
  

Interacting with sound. Speed and volume:

var song;
      var speed;
      var amp;

function preload(){
  song = loadSound('material/lutos.mp3');
}

function setup() {
  song.loop();
  createCanvas(640, 200);
  background(100);
  stroke(150);
}

function draw(){
  background(100);
  speed = map(mouseY, 0.1, height, 0, 2);
  speed = constrain(speed, 0.01, 4);
  song.rate(speed);
  amp = map(mouseX, 0.1, width, 0, 1);
  amp = constrain(amp, 0.01, 1);
  song.setVolume(amp);
  line(mouseX, 0, mouseX, height);
  line(0, mouseY, width, mouseY);
}

function mousePressed() {
  if (song.isPlaying()) {
          song.stop();
  } else {
          song.play();
  }
}
  


2. Analyzing mic-input: Amplitude

var mic;
    var isOn = false;

function setup() {
        createCanvas(690, 400);
  mic = new p5.AudioIn();
}


function draw() {
        noStroke();
  fill(235, 30);
  rect(0, 0, width, height);
  fill(0);
  text("Press mouse to start tracking mic.", 10, 10)
  var vol = mic.getLevel();
  fill(127);
  stroke(0);

  // Draw an ellipse with height based on volume
  //if(vol > 0.02){
  var r = map(vol, 0, 1, 0, width * 30);
  ellipse(width / 2, height / 2, r + 40, r + 40);
  //}
}

function mousePressed() {

  if (isOn) {
        mic.stop();
    isOn = false;
  } else {
        mic.start();
    isOn = true;
  }
}


3. FFT

Time-based representation (top) and frequency-based representation (bottom) of the same signal, the lower representation being obtained from the upper one by Fourier transformation. (Wikipedia Commons)

Voices and Piano (Peter Ablinger, seit 1998) (Website)
"Actually the piano part is the temporal and spectral scan of the respective voice, something like a coarse gridded photograph. Actually the piano part is the analysis of the voice. Music analyses reality."

Magnetosphere (flight404/Robert Hodgin, 2007)

Yarn Audio Netlabelday 2016

var song;

function preload(){
  song = loadSound('oreo.mp3');
  fft = new p5.FFT();
}

function setup() {
  song.rate(1);
  createCanvas(690, 400);
  background(100);
  stroke(150);
}

function draw(){
  background(230);
  fill(0);
  text("Press mouse to start/stop track.",10,10);
  var spectrum = fft.analyze();
  noStroke();
  fill(200,0,0,100);

  for (var i = 0; i< spectrum.length; {
    var aktuellerWert = spectrum[i];
    //var x = map(i, 0, spectrum.length, 0, width*3);
    //var h = -height + map(aktuellerWert, 0, 255, height, 0);
    var x = i*4;
    var h = aktuellerWert;
    rect(x, height, 1, -h );
  }
}

function mousePressed() {
  if (song.isPlaying()) {
            song.stop();
  } else {
            song.play();
  }
}



TouchDesigner is a popular node based tool for real time audio visualizations.


Exporting PDFs for plotting

To export data as PDF we have to rely on an external library again:

Library: https://github.com/zenozeng/p5.js-pdf
Examples: http://zenozeng.github.io/p5.js-pdf/examples/#basic





Example: Plotter drawings by Anders Hoff


Using InkScape with AxiDraw

InkScape is a free vector drawing software: https://inkscape.org/de/
It has a dedicated plugin to use with the AxiDraw pen plotter. Get the plugin here: https://github.com/evil-mad/axidraw


Talking to a pen plotter

Instead of exporting PDF- and vector-files from p5 and Processing, it is also possible to write code that talks directly to the plotter. This allows to move the pen with simple instructions.

Talking to AxiDraw Pen Plotter directily from Processing via Serial port:
https://github.com/evil-mad/AxiDraw-Processing

JavaScript libraries for AxiDraw Pen Plotter:
https://github.com/ubilabs/axidraw

Serial Command Set for EiBotBoard (AxiDraw):
http://evil-mad.github.io/EggBot/ebb.html

Documentation of the EiBotBoard Hardware (AxiDraw):
http://www.schmalzhaus.com/EBB/