import processing.sound.*;

// Declare the processing sound variables 
SoundFile sample;
Amplitude rms;

// Declare a scaling factor
float scale=1;

// Declare a smooth factor
float smooth_factor=0.25;

// Used for smoothing
float sum;

PImage img;       // The source image
int cellsize = 2; // Dimensions of each cell in the grid
int columns, rows;   // Number of columns and rows in our system

public void setup() {
  size(800, 1000, P3D); 
  //fullScreen(P3D);
  img = loadImage("...");  // Load the image
  columns = img.width / cellsize;  // Calculate # of columns
  rows = img.height / cellsize;  // Calculate # of rows

    //Load and play a soundfile and loop it
    sample = new SoundFile(this, "...");
    sample.loop();

    // Create and patch the rms tracker
    rms = new Amplitude(this);
    rms.input(sample);

}

void draw() {
  background(255,0,255);
  // Begin loop for columns
  for ( int i = 0; i < columns; i++) {
    // Begin loop for rows
    for ( int j = 0; j < rows; j++) {
      int x = i*cellsize + cellsize/2;  // x position
      int y = j*cellsize + cellsize/2;  // y position
      int loc = x + y*img.width;  // Pixel array location
      color c = img.pixels[loc];  // Grab the color
      // Calculate a z position as a function of mouseX and pixel brightness
      //float z = width/2 * brightness(img.pixels[loc]) - 20.0;
        float rms_scaled=sum*width/10 * brightness(img.pixels[loc]) - 20.0;

     // smooth the rms data by smoothing factor
    sum += (rms.analyze() - sum) * smooth_factor;  

    // rms.analyze() return a value between 0 and 1. It's
    // scaled to height/2 and then multiplied by a scale factor


      // Translate to the location, set fill and stroke, and draw the rect
      pushMatrix();
      //translate(x + 300, y + 250, rms_scaled);
      translate(x + 200, y + 200, rms_scaled);
      fill(c, 204);
      noStroke();
      rectMode(CENTER);
      rect(0, 0, cellsize, cellsize);
      popMatrix();
    }
  }
}

In case its any use to anyone I thought I'd share some performance testing code and data I made while optimising a music visualizer.

I wondered what impact calling amp.analyze multiple times might have so performed 3 tests to see

test 1 - drawing a 400x400 green screen via loop - average frame rate 18.63485

test 2 - same but call amp.analyze each iteration - average frame rate 8.72345

test 3- pass amp.analyze value into variable once per draw - average frame rate 18.66579

test code:

import processing.sound.*;
Amplitude amp;
SoundFile file;
float analyzed;

void setup() {
  size(400, 400);
  background(255);
  noSmooth();
  file = new SoundFile(this, "Crickets.mp3");
  amp = new Amplitude(this);
  file.play();
  amp.input(file);
}

void draw(){

//test one: just drawing points - average frame rate  18.63485
for ( int iy=0; iy < height; iy++){
    for ( int ix=0; ix < width; ix++){
    stroke(0,255,0);                        
    point(ix, iy);
    }
}  

//test 2: call amp value each iteration - average frame rate 8.72345                                  
//for ( int iy=0; iy < height; iy++){
//    for ( int ix=0; ix < width; ix++){
//        stroke(0,amp.analyze()*200,0); 
//        point(ix, iy);
//    }
//}

//test 3 call amp value once per draw - average frame rate 18.66579
//analyzed = amp.analyze();
//for ( int iy=0; iy < height; iy++){
//    for ( int ix=0; ix < width; ix++){
//        stroke(0,analyzed*200,0);
//        point(ix, iy);
//    }
//}

println(frameRate);

}

I have a problem. I am a newbie with processing and I'm trying to make a sound meter similar to one that you would see on a lie detecter test/or a Joy Division album cover. I've only been using processing for a month now, and the problem I'm running into is that every time I make a sound my image jumps and looks like squares instead of curved lines.

Hoping I could get some help....

-Clinton

import processing.sound.*; AudioIn in; Amplitude amp; float x=50; float y=10; float c; void setup() { frameRate (300); size (1500, 500); amp=new Amplitude(this); in=new AudioIn(this, 0); in.start(); amp.input(in); background(255); }

void draw() { c=amp.analyze()*50; beginShape(); stroke(25);

line(x, y, x, y-c); line(x, y, x, y+c); x++; if (x>width) { y=y+10; x=0; } }

I'm running the following snippet:

    var sketch;

    $('#title').click(function(){

    if (typeof(sketch) == 'undefined' ){                       
                sketch = new p5(fft, "sketchDiv");
            } else {
                sketch.remove();
                console.log("step1");
                sketch = new p5(fft, "sketchDiv");
                console.log("step2");
            };
      });

When I click the title div once, it works...

When I click it a second time, it also works (removes and replaces).

However, when I click it a third time, the console reports the error:

" this.output is undefined"

• If I click it a fourth time everything runs again as planned *

Not sure why the error isn't getting called after the first "remove()" call.

Here is the sketch: (in instance mode).

      var fft = function (p){

       p.mic, p.fft;

        p.setup = function() {
 p.createCanvas(p.windowWidth,400);
 p.noFill();

 p.mic = new p5.AudioIn();
 p.mic.start();
 p.fft = new p5.FFT();
 p.fft.setInput(p.mic);
   }

     p.draw = function() {

      p.clear();  // using this instead of redrawing background

       var spectrum = p.fft.analyze();

 p.beginShape();

 for (i = 0; i<spectrum.length; i++) {
  p.vertex(i, p.map(spectrum[i], 0, 250, p.height, 0) );
 }
 p.endShape();

} }

import g4p_controls.*;
import processing.sound.*;    

GButton buttonSong, buttonGo;
SoundFile soundfile;
Amplitude rms;

boolean playing, selected = false;
float sum;
int map, frames;

void analyzeSetup(){
    rms = new Amplitude(this);  
    }

void analyzeDraw(){
     if(frameCount%60 == 0 && playing == true){

      sum += (rms.analyze() - sum) * 0.75;
      map = (int) map(sum, 0, 0.5, 0, 180);

      frames = frames+1;
      println(sum," - ",frames," - ",map);
    }
}

void selectSong(){  
  buttonSong = new GButton(this, 180, 20, 25, 25);
  buttonSong.setText("...");
  buttonSong.addEventHandler(this, "openSong");
 }

public void openSong(GButton source, GEvent event) { 
  selectInput("Please select an .mp3", "pathToString");
}

void pathToString(File selection){
  song = selection.getPath(); 
  selected = true;
  soundfile = new SoundFile(this, song);
  rms.input(soundfile);
}

void startProgram(){
  buttonGo = new GButton(this, 210, 430, 80, 50);
  buttonGo.setText("Go!");
  buttonGo.addEventHandler(this, "Go");
}

public void Go(GButton source, GEvent event) { 
  if(selected == true){
    soundfile.play();
    playing = true;
  }
}

analyzeSetup(), selectSong() and startProgram() are in the main setup()-method, analyzeDraw() is in the main draw()-Method. The problem is that the song starts playing when clicking the Go-Button, but it doesn't seem to get analyzed, since sum and map constantly stay 0. My guess is to relocate the assignment of the soundfile and the rms.input. i've already played around a lot, but nothing worked. i hope someone can help me here.

thanks in advance. best regards, raiu.

var fft,mic;
function setup(){
  var myCanvas = createCanvas(800,800); 
  fft = new p5.FFT();
  ellipse(400,400,50,50)
  colorMode(HSB,100)
  spectrums=[]
  mic = new p5.AudioIn();
  mic.start();
  fft = new p5.FFT();
  fft.setInput(mic);
}

function draw() {
  background(255)
  s = fft.analyze(16)
 for(si=0;si<s.length;si++){
   fill(s[si]%100,100,100)
  rect(si*10,0,si*10,s[si]) 
 }
 spectrums.push(s.splice(0))
  if(spectrums.length > 5){
    spectrums.splice(-1,1)
  }
  console.log(spectrums[0][0]) //this prints 0 always
for(si=0;si<spectrums[0].length;si++){
   fill(spectrums[0][si]%100,100,100)
  rect(si*10,400,si*10,spectrums[0][si]) 
 }
}

//The generative design is a variation of the programs presented in the
//Generative Design book by Hartmut Bohnacker, Benedikt Gross, Julia Laub and Claudius Lazzeroni. 
//Starting point: Every time an audio amplitude > of a certain value is detected, 
//a new circle is generated at a random position and with a radius determined by the amplitude.
//It is then determined which of the existing circles lies nearest to the new one.
//In the final step, the new circle joins its closest neighbor via the shortest path.
//This is an example of so-called diffusion limited aggregation algorithm. 


import processing.sound.*;


int maxCount = 10000; //max count of the cirlces
int currentCount = 1;
float[] x = new float[maxCount];
float[] y = new float[maxCount];
float[] r = new float[maxCount]; // radius


Amplitude amp;
AudioIn in;
float ampt;

void setup() {

  fullScreen();
 // size(600,600);
  smooth();


  frameRate(1000);

  // first circle
  x[0] = width/2;
  y[0] = height/2;
  r[0] = ampt * 10;
  //r[0] = 400; 

  amp = new Amplitude(this);
  in = new AudioIn(this, 0);
  in.start();
  amp.input(in);
}


void draw() {

   ampt = amp.analyze();
   println(ampt);
  if (ampt>0.03) { // everytime a sound amplitude bigger than 0.03 is detected, a new ellipse is drawn
  strokeWeight(0.5);
  //noFill();
  background(255);

  // create a radom set of parameters
  float newR = ampt*10; // amplitude controls the radius of the circles being drawn 
  float newX = random(0+newR, width-newR);
  float newY = random(0+newR, height-newR);

  float closestDist = 100000000;
  int closestIndex = 0;
  // which circle is the closest?
  for(int i=0; i < currentCount; i++) {
    float newDist = dist(newX,newY, x[i],y[i]);
    if (newDist < closestDist) {
      closestDist = newDist;
      closestIndex = i; 
    } 
  }

  // aline it to the closest circle outline
  float angle = atan2(newY-y[closestIndex], newX-x[closestIndex]);

  x[currentCount] = x[closestIndex] + cos(angle) * (r[closestIndex]+newR);
  y[currentCount] = y[closestIndex] + sin(angle) * (r[closestIndex]+newR);
  r[currentCount] = newR;
  currentCount++;

  // draw them
  for (int i=0 ; i < currentCount; i++) {
    //fill(50,150);
    fill (0);
    //fill(ampt*500, ampt*200, ampt*200, ampt*300);
    ellipse(x[i],y[i], r[i]*2,r[i]*2);  
  }

  if (currentCount >= maxCount) noLoop();
 }
}

I am experimenting with getCentroid. There is used var nyquist = 22050; in the p5.sound library of getCentroid, what does it mean?

Thanks :)

I'm trying to generate a JSON file by looping through arrays and it doesn't work.

Filling the arrays with the sound-function may be too late for the JSON object in the setup-function, but I don't know how to fix this problem (using a preload function doesn't make sense to me because the values are getting generated while the program runs).

Any ideas? Many thanks in advance for your help!

Here is my code:

var json;
var mic, fft;

var arrayVolume = [];
var arrayEnergy = [];
var arrayCentroid = [];

function setup() {
  frameRate(5);

  // new JSON object
 for(var i = 0; i < frameRate; i++){
    json = {}; 

    json.id = i;
    json.volume = arrayVolume[i];
    json.energy = arrayEnergy[i];
    json.centroid = arrayCentroid[i];

    saveJSON(json, 'sound.json');
  }

  // create input
  mic = new p5.AudioIn();
  fft = new p5.FFT();

  //start  input
  mic.start();
  fft.setInput(mic);
}


function draw() {
  // call functions
  sound();
}


function sound() {
   // get volume
  var vol = mic.getLevel();

  // analyze spectrum
  var spectrum = fft.analyze();
  var energy = fft.getEnergy("lowMid"); // bass, lowMid, mid, hightMid
  var centroid = fft.getCentroid();

  // push it in arrays
  arrayVolume.push(vol);
  arrayEnergy.push(energy);
  arrayCentroid.push(centroid)
}

Could someone help me? Thanks a lot

        import processing.sound.*;

        FFT fft;
        AudioIn in;
        int bands = 512;
        float[] spectrum = new float[bands];

        void setup() {
          size(512, 360);
          background(255);

          // Create an Input stream which is routed into the Amplitude analyzer
          fft = new FFT(this, bands);
          in = new AudioIn(this, 0);

          // start the Audio Input
          in.start();

          // patch the AudioIn
          fft.input(in);
        }      

        void draw() { 
          background(255);
          fft.analyze(spectrum);

          for(int i = 0; i < bands; i++){
          // The result of the FFT is normalized
          // draw the line for frequency band i scaling it up by 5 to get more amplitude.
          line( i, height/2, i, height/2 - spectrum[i]*height*5 );
          } 
        }

It runs but doesn't acknowledge the sound being played through Spotify or iTunes. I'm using an iMac.

Do I have to change any settings within my mac? Why is this demonstration not working? Does it work on your computer?

Thanks in advanced.

A further question is: how can I determine when a new value for a frequency (fft - bin) is computed and available? this sketch gives every 1500 ms a new value because with 2^15 bands one fft frame computation needs 2*bands/sampleRate = 2 * 2^15 /44100 = 1.486 sec = 1486 ms. with frameRate 30 this is achieved within 45 frames so 1500 ms. Is there any event Detection for a new FFT frame or need I to count frames?

import processing.sound.*;

FFT fft;
AudioIn in;    

int bands = 32768;
float[] spectrum = new float[bands];

void setup()
{ 
  size(500, 300);     

   // Create an Input stream which is routed into the Amplitude analyzer
  fft = new FFT(this, bands);
  in = new AudioIn(this, 0);

   // start the Audio Input
  in.start();

   // patch the AudioIn
  fft.input(in);    
}

void draw() {       
  fft.analyze(spectrum);  
  println("spectrum["+149+"]: "+spectrum[149]+" time: "+millis());
}

I'm currently trying to create a visualization for music using the p5.js example code for analyzing a frequency spectrum. The issue I'm running into is that I'd like to "bend" the frequency spectrum around a point in the center of my canvas, such that instead of a jagged line I instead have a jagged circle. I'm not quite sure where to begin to broach that subject. Here's what I have so far:

var fft;
var amplitude;
var song;

function preload(){
  song = loadSound('../assets/PeopleWhoDied.mp3');
}

function setup() {

   var myCanvas = createCanvas(1000,500);
   myCanvas.parent('pleaseKillMeSketch');
   background(200);

   song.play();
   fft = new p5.FFT();
   fft.setInput(song);

   amplitude = new p5.Amplitude();
   amplitude.setInput(song);

}

function draw() {
  fill(200, 20);
  rect(0,0,width,height);
   var spectrum = fft.analyze();
   var volume = amplitude.getLevel();

   beginShape();
   for (i = 0; i<spectrum.length; i++) {
     vertex(i, map(spectrum[i], 0, 255, 250, 0) );
     translate(0,volume);
   }
   endShape();
}

The whole spectrogram is generated in one image, it is not dynamic with the current audio. The y-axis is frequency (Hz), the x-axis is time (s), and the color axis is Power/frequency (dB/Hz). The FFT class has a spectrum object, but I'm not sure how to convert that value to dB/Hz.

I wasn't able to find a solution so far. Is there a way to fix this? I am using getLevel(), fft.analyze(), and fft getEnergy(). But it would be enough to just get the Level.

Thank you!

Thanks in advance

code:

import ddf.minim.*;
import ddf.minim.analysis.*;
import ddf.minim.effects.*;
import ddf.minim.signals.*;
import ddf.minim.spi.*;
import ddf.minim.ugens.*;
import processing.sound.*;
Amplitude amp;
AudioIn in;

void setup(){
   size(500,500);
   background(230,230,230);
   amp = new Amplitude(this);
   in = new AudioIn(this, 0);
   in.start();
   amp.input(in);
  }

void draw (){
  if(amp.analyze() > 0.02) {
  clear();  
  zigzag();
  }
}  
void zigzag(){  
  float xPosition=random(height);
  float yPosition=random(height);
  float zPosition=random(height);

  float newXPosition=0;
  float newYPosition=0; 

  float theDistance=15;
  float theRange=50; 
  rotate(PI*random(720));  

  for(int i=0; i<4; i++){
    stroke(126,213,242);
    strokeWeight(1);
    newXPosition = xPosition + theDistance;
    newYPosition = yPosition + theRange / 2 - (i % 2) * theRange;
    line(xPosition,yPosition,newXPosition,newYPosition);
    xPosition = newXPosition;
    yPosition = newYPosition; 
    noFill();
    stroke(100,100,242);{
    ellipse(100,100,100,100);
  }
   }

}

void lines(){  
  float x = random(width);
  float y = random(height);
  float r = random(height);
  stroke(255,0,0);
  strokeWeight(3);
  line(x, amp.analyze() * 100, y, 500); 
}

most of time, if the sound level getting higher, that happens. i get the same warning message everytime:

2016-01-24 23:38:55.263 java[49121:34205664] 23:38:55.263 WARNING: 140: This application, or a library it uses, is using the deprecated Carbon Component Manager for hosting Audio Units. Support for this will be removed in a future release. Also, this makes the host incompatible with version 3 audio units. Please transition to the API's in AudioComponent.h.

this is the code so far:

import processing.video.*;
import processing.sound.*;

AudioIn input;
Amplitude rms;
int scale;
Movie myMovie;

String[] one = {"a.mp4","b.mp4","c.mp4"};

int a = 0;        
float md = 0;
float mt = 0;

void setup()
{
  size(1440 ,900);
  frameRate(25);
  background(0);
  myMovie = new Movie(this, one[int(random(one.length))]);
  myMovie.play();
  input = new AudioIn(this, 0); //Create an Audio input and grab the 1st channel
  input.start(); // start the Audio Input
  rms = new Amplitude(this); // create a new Amplitude analyzer
  rms.input(input); // Patch the input to an volume analyzer
}

void draw()
{
  scale=int(map(rms.analyze(), 0, 0.5, 1, 350));

  if(a == 0) { 
      image(myMovie, 0, 0,900,900);
      }
  image(myMovie, 0, 0,900,900);

  float md = myMovie.duration();
  float mt = myMovie.time();
  println(md - mt);
  if (Math.abs(md - mt)<0.1){// to find the end of the movie
     myMovie = null;
     myMovie = new Movie(this, one[int(random(one.length))]);
     myMovie.play();
  }
// rms.analyze() return a value between 0 and 1. To adjust the scaling and mapping of an ellipse we scale from 0 to 0.5
    if ((rms.analyze()>0)&&(rms.analyze()<3)) 
    tint (scale*20,scale*4,scale*4);
    myMovie.speed(scale*0.2);

}

void movieEvent(Movie m) { // Called every time a new frame is available to read
  m.read();
}

what am i doing wrong? any help will be great! thanks, Ravit :)

Error message:

#
# A fatal error has been detected by the Java Runtime Environment:
#
#  SIGSEGV (0xb) at pc=0x000000012905704e, pid=2227, tid=77323
#
# JRE version: Java(TM) SE Runtime Environment (8.0_51-b16) (build 1.8.0_51-b16)
# Java VM: Java HotSpot(TM) 64-Bit Server VM (25.51-b03 mixed mode bsd-amd64 compressed oops)
# Problematic frame:
# C  [libmethcla.dylib+0x5604e]  remove_free_block+0x3e
#
# Failed to write core dump. Core dumps have been disabled. To enable core dumping, try "ulimit -c unlimited" before starting Java again
#
# An error report file with more information is saved as:
# /Users/Pumba/hs_err_pid2227.log
#
# If you would like to submit a bug report, please visit:
#   http://bugreport.java.com/bugreport/crash.jsp
#
Could not run the sketch (Target VM failed to initialize).
For more information, read revisions.txt and Help → Troubleshooting.

Code:

import processing.sound.*;

Amplitude rms;
AudioIn mic;

float scale=5;
float smooth_factor=0.25;
float sum;

int x,y,r;


void settings(){
  fullScreen();
}

void setup(){
  noFill();
  noCursor();
  stroke(255);
  x=width/2;
  y=height/2;
  r=2*height/3;

  mic= new AudioIn(this,0);
  mic.play();

  rms= new Amplitude(this);
  rms.input(mic);
}

void draw(){
  background(0);

  sum+= (rms.analyze() - sum)*smooth_factor;
  float rms_scaled=sum*(height/2)*scale;
   if (rms_scaled<1){
     rms_scaled=1;
   }
  strokeWeight(rms_scaled);
  ellipse(x,y,r,r);
}