Is this possible in Processing? Thanks.

A quick run down - I took a module in Processing at uni years ago and thoroughly enjoyed my time with it. I haven't done any sort of programming since but really want to get back into creative coding.

Essentially, the ultimate goal is to create live abstract visualisations of audio (the audio being part pre-programmed and part live) and project it onto myself whilst 'gigging'. Alongside learning Processing, I'll be learning Ableton as I'm bored of Cubase and from what I've heard Ableton is a lot more flexible.

So I guess the main quiestion is this... Is it possible/relatively painless to route multiple tracks of audio from Ableton into Processing and then use data from those tracks to trigger visuals? I'm guessing I'd have to get some sort of virtual I/O box and send the audio to both the speakers and this virtual box, which Processing would pick up/analyse from there? I know it's possible to do this with MIDI data so I assume it should be the same for audio?

Also to note, I'm aware that as I'll be learning Ableton I could probably just use MaxMSP/Jitter and make life easier for myself. The aim though is to teach myself to code - I don't mind jumping through a few hoops to get it up and running, as long as my CPU dosen't explode under the load...

Many thanks all anyway, have a good evening!

Things to note: The forward and inverse FFT are very similar.

Pay close attention to how the sample sets ('signal' and 'wave' arrays) are displayed versus how they were created.

Included comments are my interpretation of the algorithm.

# Length of data to run through FFT
N = 256 # must be a power of 2 for FFT
M = int(log(N) / log(2)) + 1 # grab number of bit levels in N, plus one for range()

"""
Fast Fourier Transform
  Modifies data to represent the Complex Fourier Transform of the input
  Note: The inverse transform will also overwrite data passed to it

Reference: http://www.dspguide.com/ch12/3.htm
"""
def FFT( data ):
  # Sort by bit reversed index
  nd2 = N/2
  j = nd2
  k = 0
  for i in xrange( 1, N-2 ):
    if i < j:
      data[j], data[i] = data[i], data[j] # Pythonic swap
    k = nd2
    while not (k>j):
      j = j - k
      k = k / 2
    j = j + k


  # Bulk of the algorithm from here:
  # For each bit level...
  for L in xrange( 1, M ):

    # Calculate which frequencies to work on this round,
    le = 1<<L
    le2 = le / 2
    # Phase step size at this bit level, AKA: the frequency
    # A complex number
    s = cos(PI/le2) - sin(PI/le2)*1j

    # Init our complex multiplier
    u = 1+0j

    for j in xrange( 1, le2+1 ):
      jm1 = j - 1

      for i in xrange( jm1, N, le ):
        ip = i + le2 # where in data? i and ip

        # Complex multiplication
        # This is what creates constructive or destructive interference
        #   (if sample data is similar to selected frequency, they combine)
        #   (if sample data is _not_ similar to selected frequency, they cancel)
        t = data[ip] * u

        # Positive and Negative frequency bins
        # The FFT is symmetric
        data[ip] = data[i] - t
        data[i] = data[i] + t

      # With each step, rotate multiplier by the frequency step
      # Multiplying complex numbers is easier if you convert them to polar representation first
      #     In polar coordinates add lengths and angles
      #     Convert back to rectangular (complex)
      u = u * s


#
# Inverse FFT
#
def IFFT( data ):
  for i in xrange( len(data) ): # Mirror imaginary values of data
    data[i] = data[i].conjugate()

  FFT( data ); # FFT of mirrored data

  for i in xrange( len(data) ): # Mirror again and scale
    data[i] = data[i].conjugate() / N


# Init samples with complex numbers, length of N
signal = [ (0+0j) ]*N
wave = [ (0+0j) ]*N

# Build a signal in frequency domain
F = 7
signal[F] = 8j
signal[N-F] = -8j

# Create a sine wave in time domain
for i in xrange( N ):
    wave[i] = 0.5*sin( 4*(i*PI)/N )

# Arbitrary drawing size
scl = 1

def setup():
    size(512,512,P3D)
    noFill()
    FFT(signal)
    FFT(wave)
    noLoop()

def mouseDragged():
    redraw()

def draw():
    background(0)
    translate( (width/2), (height/2) )
    rotateY( (TWO_PI*mouseX) / width )
    rotateX( (TWO_PI*mouseY) / height )

    # Draw FFT of frequency domain signal in green
    x = 0
    lastx = 0
    lasty = 0
    lastz = 0
    stroke(0,255,0)
    for n in signal:
        x += 1
        y = n.real * scl
        z = n.imag * scl
        line(lastx-(N/2),lasty,lastz, x-(N/2),y,z)
        lastx = x
        lasty = y
        lastz = z

    # Draw FFT of time domain wave in blue
    x = 0
    lastx = 0
    lasty = 0
    lastz = 0
    stroke(0,0,255)
    for n in wave:
        x += 1
        y = n.real * scl
        z = n.imag * scl
        line(lastx-(N/2),lasty,lastz, x-(N/2),y,z)
        lastx = x
        lasty = y
        lastz = z

I have a question about the beads audio library: unfortunately there are no examples how to use specific functions and classes shown in the documentation http://www.beadsproject.net/doc/

My problem is, how to separate the output of the FFT/ShortFrameSegmenter from different Gains. I want to visualize each loop track on its own.

I guess the focal point is between my comment lines. Here is my Processing Code:

import beads.*;

AudioContext ac;
PowerSpectrum ps;
Glide gainValue, gainValue2, gainValue3;

Frequency f;
SpectralCentroid sc;
SpectralPeaks sp;
int nPeaks;
float fColor = 0;

void setup() {
    size(600, 600);

    ac = new AudioContext();

    gainValue = new Glide(ac, 0.5, 20);
    Gain g = new Gain(ac, 2, gainValue);

    gainValue2 = new Glide(ac, 0.5, 20);
    Gain g2 = new Gain(ac, 2, gainValue2);

    gainValue3 = new Glide(ac, 0.5, 20);
    Gain g3 = new Gain(ac, 2, gainValue3);

    SamplePlayer player = null;
    SamplePlayer player2 = null;
    SamplePlayer player3 = null;

    try {

        player = new SamplePlayer(ac, new Sample(sketchPath("") + "../120bpm/AM_OB-Bass_120-C.wav"));
        g.addInput(player);
        player2 = new SamplePlayer(ac, new Sample(sketchPath("") + "../120bpm/AM_Eighties08_120-01.wav"));
        g2.addInput(player2);
        player3 = new SamplePlayer(ac, new Sample(sketchPath("") + "../120bpm/AM_HeroGuitar_120-E01.wav"));
        g3.addInput(player3);
    } catch (Exception e) {
        e.printStackTrace();
    }

    player.setKillOnEnd(false);
    player2.setKillOnEnd(false);
    player3.setKillOnEnd(false);

    player.setLoopType(SamplePlayer.LoopType.LOOP_FORWARDS);
    player2.setLoopType(SamplePlayer.LoopType.LOOP_FORWARDS);
    player3.setLoopType(SamplePlayer.LoopType.LOOP_FORWARDS);

    ac.out.addInput(g);
    ac.out.addInput(g2);
    ac.out.addInput(g3);


    /////////////////////

    ShortFrameSegmenter sfs = new ShortFrameSegmenter(ac);
    sfs.addInput(ac.out);

    FFT fft = new FFT();
    sfs.addListener(fft);

    ps = new PowerSpectrum();
    fft.addListener(ps);

    ac.out.addDependent(sfs);

    ////////////////////

    ac.start();
}


void draw() {

    float[] features = ps.getFeatures();

    if (features != null) {

        float bass = 0;
        for (int i = 5; i < 10; ++i) {

            bass += features[i];
        }
        bass /= (float)(5);

        float heights = 0;
        for (int i = 40; i < 45; ++i) {

            heights += features[i];
        }
        heights /= (float)(5);

        ellipse(width / 2 - 100, height / 2, bass * 20, bass * 20);
        ellipse(width / 2 + 100, height / 2, heights * 50, heights * 50);

    }

}

• Top Grossing Movies (inflation adjusted)
• Countries by Population (2016 figures)

This is actually just a stepping stone to a much larger linguistic analysis of movie utterances that I am working on (more on that in a few months).

In the meantime, I have released the script on GitHub and included extensive notes there on how you can use and customize it yourself and also background on how it works.

• GitHub project

I've also tried hard to make the code as easy as possible to read and follow.

Do let me know what you think and if you use it within any of your own work.

The logic I implemented to check how many "alive neighbors" a cell consistently gets the number of alive neighbors incorrect... Below is the code, with some sample output.

 final int SIZE = 5;
final int SCREEN_WIDTH = 500;
final int SCREEN_HEIGHT = 500;

final color ON = color(255, 255, 255);
final color OFF = color(0);

final int SQUARE_LENGTH = SCREEN_WIDTH/SIZE;

boolean [][] GOL_Grid = new boolean[SIZE][SIZE];

void setup()
{
  size(500, 500);
  background(200);
  println("BEFORE ASSIGNMENT");
  printGrid(GOL_Grid);

  //Attempting to make the "Blinker" oscillator (found on the wikipedia page for Conway's Game Of Life)
  GOL_Grid[1][2] = true;
  GOL_Grid[2][2] = true;
  GOL_Grid[3][2] = true;
    println("AFTER ASSIGNMENT");
  printGrid(GOL_Grid);

  GOL_Grid = updateGrid(GOL_Grid);
  println("AFTER UPDATING");
  printGrid(GOL_Grid);
}

void drawGrid(final boolean[][] grid)
{
  println("------------------------");
  for (int i = 0; i < grid.length; i++)
  {
    int curr_Y = i*SQUARE_LENGTH;
    for (int j = 0; j < grid[i].length; j++)
    {
      if (grid[i][j])
        print( "X\t");
      else
        print("-\t");
      int curr_X = j*SQUARE_LENGTH;
      stroke(255);
      if (grid[i][j])
        fill(ON); 
      else
        fill(OFF);

      rect(curr_X, curr_Y, SQUARE_LENGTH, SQUARE_LENGTH);
    }
    println();
  }
  println("------------------------");
}

/************
 (1) Any live cell with fewer than two live neighbours dies, as if caused by underpopulation.
 (2) Any live cell with two or three live neighbours lives on to the next generation.
 (3) Any live cell with more than three live neighbours dies, as if by overpopulation.
 (4) Any dead cell with exactly three live neighbours becomes a live cell, as if by reproduction.

 *************/
boolean updateCell(final boolean[][] grid, int row, int col)
{
  int neighborCount = 0;
  boolean isAlive = grid[row][col];

  for (int newRow = row-1; newRow <= row+1; newRow++)
  {
    if (newRow < 0 || newRow >= SIZE) continue; //Bounds check

    for (int newCol = col-1; newCol <= col+1; newCol++)
    {
      if (newCol < 0 || newCol >= SIZE) continue; //Bounds check

      if (row == newRow && col == newCol) continue;
      if (grid[newRow][newCol] == true) //Checks if each neighbor is "alive"
        neighborCount++; //The current cell's alive/death state is based on how many of its neighbors are alive
    }
  }
  print(neighborCount + "\t"); //Prints how many neighbors there are, for debugging purposes
  boolean update = grid[row][col];

  if (neighborCount < 2 || neighborCount > 3)
    update = false; //Cell is dead;
  if (!grid[row][col] && neighborCount == 3) 
    update = true;

  return update;
}

boolean[][] updateGrid(final boolean[][] grid)
{
println("NOW UPDATING GRID (Now showing how many alive neigbors a particular cell has): "); 
  boolean[][] grid_COPY = grid;
  for (int row = 0; row < SIZE; row++) //Iterate through once per cell in the original grid
  {
    for (int col = 0; col < SIZE; col++)
    {
      grid_COPY[row][col] = updateCell(grid, row, col);
    }
    println();
  }
  return grid_COPY;
}

void printGrid(boolean[][] grid)
{
  println("------------------------");
  for (int i = 0; i < grid.length; i++)
  {
    int curr_Y = i*SQUARE_LENGTH;
    for (int j = 0; j < grid[i].length; j++)
    {
      if (grid[i][j])
        print( "X\t");
      else
        print("-\t");
    }
    println();
  }
  println("------------------------");
}

I should mention that while debugging, I think the error lies in either the updateGrid or the updateCell functions

OUTPUT:

BEFORE ASSIGNMENT
------------------------
-   -   -   -   -   
-   -   -   -   -   
-   -   -   -   -   
-   -   -   -   -   
-   -   -   -   -   
------------------------
AFTER ASSIGNMENT
------------------------
-   -   -   -   -   
-   -   X   -   -   
-   -   X   -   -   
-   -   X   -   -   
-   -   -   -   -   
------------------------
NOW UPDATING GRID (Now showing how many alive neighbors a particular cell has): 
0   1   1   1   0   
0   2   1   1   0   
0   2   1   1   0   
0   1   0   0   0   
0   0   0   0   0   
AFTER UPDATING
------------------------
-   -   -   -   -   
-   -   -   -   -   
-   -   -   -   -   
-   -   -   -   -   
-   -   -   -   -   
------------------------

Here is my code:

/**
THIS PROGRAM WORKS WITH PulseSensorAmped_Arduino-xx ARDUINO CODE
THE PULSE DATA WINDOW IS SCALEABLE WITH SCROLLBAR AT BOTTOM OF SCREEN
PRESS 'S' OR 's' KEY TO SAVE A PICTURE OF THE SCREEN IN SKETCH FOLDER (.jpg)
MADE BY JOEL MURPHY AUGUST, 2012
*/


import processing.serial.*;
PFont font;
Scrollbar scaleBar;

Serial port;     

int Sensor;      // HOLDS PULSE SENSOR DATA FROM ARDUINO
int IBI;         // HOLDS TIME BETWEN HEARTBEATS FROM ARDUINO
int BPM;         // HOLDS HEART RATE VALUE FROM ARDUINO
int[] RawY;      // HOLDS HEARTBEAT WAVEFORM DATA BEFORE SCALING
int[] ScaledY;   // USED TO POSITION SCALED HEARTBEAT WAVEFORM
int[] rate;      // USED TO POSITION BPM DATA WAVEFORM
float zoom;      // USED WHEN SCALING PULSE WAVEFORM TO PULSE WINDOW
float offset;    // USED WHEN SCALING PULSE WAVEFORM TO PULSE WINDOW
color eggshell = color(255, 253, 248);
int heart = 0;   // This variable times the heart image 'pulse' on screen
//  THESE VARIABLES DETERMINE THE SIZE OF THE DATA WINDOWS
int PulseWindowWidth = 490;
int PulseWindowHeight = 512; 
int BPMWindowWidth = 180;
int BPMWindowHeight = 340;
boolean beat = false;    // set when a heart beat is detected, then cleared when the BPM graph is advanced


void setup() {
  size(700, 600);  // Stage size
  frameRate(100);  
  font = loadFont("Arial-BoldMT-24.vlw");
  textFont(font);
  textAlign(CENTER);
  rectMode(CENTER);
  ellipseMode(CENTER);  
// Scrollbar constructor inputs: x,y,width,height,minVal,maxVal
  scaleBar = new Scrollbar (400, 575, 180, 12, 0.5, 1.0);  // set parameters for the scale bar
  RawY = new int[PulseWindowWidth];          // initialize raw pulse waveform array
  ScaledY = new int[PulseWindowWidth];       // initialize scaled pulse waveform array
  rate = new int [BPMWindowWidth];           // initialize BPM waveform array
  zoom = 0.75;                               // initialize scale of heartbeat window

// set the visualizer lines to 0
 for (int i=0; i<rate.length; i++){
    rate[i] = 555;      // Place BPM graph line at bottom of BPM Window 
   }
 for (int i=0; i<RawY.length; i++){
    RawY[i] = height/2; // initialize the pulse window data line to V/2
 }

// GO FIND THE ARDUINO
  println(Serial.list());    // print a list of available serial ports
  // choose the number between the [] that is connected to the Arduino
  port = new Serial(this, Serial.list()[0], 115200);  // make sure Arduino is talking serial at this baud rate
  port.clear();            // flush buffer
  port.bufferUntil('\n');  // set buffer full flag on receipt of carriage return
}

void draw() {
  background(0);
  noStroke();
// DRAW OUT THE PULSE WINDOW AND BPM WINDOW RECTANGLES  
  fill(eggshell);  // color for the window background
  rect(255,height/2,PulseWindowWidth,PulseWindowHeight);
  rect(600,385,BPMWindowWidth,BPMWindowHeight);

// DRAW THE PULSE WAVEFORM
  // prepare pulse data points    
  RawY[RawY.length-1] = (1023 - Sensor) - 212;   // place the new raw datapoint at the end of the array
  zoom = scaleBar.getPos();                      // get current waveform scale value
  offset = map(zoom,0.5,1,150,0);                // calculate the offset needed at this scale
  for (int i = 0; i < RawY.length-1; i++) {      // move the pulse waveform by
    RawY[i] = RawY[i+1];                         // shifting all raw datapoints one pixel left
    float dummy = RawY[i] * zoom + offset;       // adjust the raw data to the selected scale
    ScaledY[i] = constrain(int(dummy),44,556);   // transfer the raw data array to the scaled array
  }
  stroke(250,0,0);                               // red is a good color for the pulse waveform
  noFill();
  beginShape();                                  // using beginShape() renders fast
  for (int x = 1; x < ScaledY.length-1; x++) {    
    vertex(x+10, ScaledY[x]);                    //draw a line connecting the data points
  }
  endShape();

// DRAW THE BPM WAVE FORM
// first, shift the BPM waveform over to fit then next data point only when a beat is found
 if (beat == true){   // move the heart rate line over one pixel every time the heart beats 
   beat = false;      // clear beat flag (beat flag waset in serialEvent tab)
   for (int i=0; i<rate.length-1; i++){
     rate[i] = rate[i+1];                  // shift the bpm Y coordinates over one pixel to the left
   }
// then limit and scale the BPM value
   BPM = min(BPM,200);                     // limit the highest BPM value to 200
   float dummy = map(BPM,0,200,555,215);   // map it to the heart rate window Y
   rate[rate.length-1] = int(dummy);       // set the rightmost pixel to the new data point value
 } 
 // GRAPH THE HEART RATE WAVEFORM
 stroke(250,0,0);                          // color of heart rate graph
 strokeWeight(2);                          // thicker line is easier to read
 noFill();
 beginShape();
 for (int i=0; i < rate.length-1; i++){    // variable 'i' will take the place of pixel x position   
   vertex(i+510, rate[i]);                 // display history of heart rate datapoints
 }
 endShape();

// DRAW THE HEART AND MAYBE MAKE IT BEAT
  fill(250,0,0);
  stroke(250,0,0);
  // the 'heart' variable is set in serialEvent when arduino sees a beat happen
  heart--;                    // heart is used to time how long the heart graphic swells when your heart beats
  heart = max(heart,0);       // don't let the heart variable go into negative numbers
  if (heart > 0){             // if a beat happened recently, 
    strokeWeight(8);          // make the heart big
  }
  smooth();   // draw the heart with two bezier curves
  bezier(width-100,50, width-20,-20, width,140, width-100,150);
  bezier(width-100,50, width-190,-20, width-200,140, width-100,150);
  strokeWeight(1);          // reset the strokeWeight for next time


// PRINT THE DATA AND VARIABLE VALUES
  fill(eggshell);                                       // get ready to print text
  text("Pulse Sensor Amped Visualizer 1.1",245,30);     // tell them what you are
  text("IBI " + IBI + "mS",600,585);                    // print the time between heartbeats in mS
  text(BPM + " BPM",600,200);                           // print the Beats Per Minute
  text("Pulse Window Scale " + nf(zoom,1,2), 150, 585); // show the current scale of Pulse Window

//  DO THE SCROLLBAR THINGS
  scaleBar.update (mouseX, mouseY);
  scaleBar.display();

//   
}  //end of draw loop


//.............................................scalebar (name of file)............................................................................................................


/**
    THIS SCROLLBAR OBJECT IS BASED ON THE ONE FROM THE BOOK "Processing" by Reas and Fry
*/

class Scrollbar{
 int x,y;               // the x and y coordinates
 float sw, sh;          // width and height of scrollbar
 float pos;             // position of thumb
 float posMin, posMax;  // max and min values of thumb
 boolean rollover;      // true when the mouse is over
 boolean locked;        // true when it's the active scrollbar
 float minVal, maxVal;  // min and max values for the thumb

 Scrollbar (int xp, int yp, int w, int h, float miv, float mav){ // values passed from the constructor
  x = xp;
  y = yp;
  sw = w;
  sh = h;
  minVal = miv;
  maxVal = mav;
  pos = x - sh/2;
  posMin = x-sw/2;
  posMax = x + sw/2;  // - sh; 
 }

 // updates the 'over' boolean and position of thumb
 void update(int mx, int my) {
   if (over(mx, my) == true){
     rollover = true;            // when the mouse is over the scrollbar, rollover is true
   } else {
     rollover = false;
   }
   if (locked == true){
    pos = constrain (mx, posMin, posMax);
   }
 }

 // locks the thumb so the mouse can move off and still update
 void press(int mx, int my){
   if (rollover == true){
    locked = true;            // when rollover is true, pressing the mouse button will lock the scrollbar on
   }else{
    locked = false;
   }
 }

 // resets the scrollbar to neutral
 void release(){
  locked = false; 
 }

 // returns true if the cursor is over the scrollbar
 boolean over(int mx, int my){
  if ((mx > x-sw/2) && (mx < x+sw/2) && (my > y-sh/2) && (my < y+sh/2)){
   return true;
  }else{
   return false;
  }
 }

 // draws the scrollbar on the screen
 void display (){

  noStroke();
  fill(255);
  rect(x, y, sw, sh);      // create the scrollbar
  fill (250,0,0);
  if ((rollover == true) || (locked == true)){             
   stroke(250,0,0);
   strokeWeight(8);           // make the scale dot bigger if you're on it
  }
  ellipse(pos, y, sh, sh);     // create the scaling dot
  strokeWeight(1);            // reset strokeWeight
 }

 // returns the current value of the thumb
 float getPos() {
  float scalar = sw / sw;  // (sw - sh/2);
  float ratio = (pos-(x-sw/2)) * scalar;
  float p = minVal + (ratio/sw * (maxVal - minVal));
  return p;
 } 
 }

//...........................................serialevent (name of file)..........................................................................................................



void serialEvent(Serial port){ 
   String inData = port.readStringUntil('\n');
   inData = trim(inData);                 // cut off white space (carriage return)

   if (inData.charAt(0) == 'S'){          // leading 'S' for sensor data
     inData = inData.substring(1);        // cut off the leading 'S'
     Sensor = int(inData);                // convert the string to usable int
   }
   if (inData.charAt(0) == 'B'){          // leading 'B' for BPM data
     inData = inData.substring(1);        // cut off the leading 'B'
     BPM = int(inData);                   // convert the string to usable int
     beat = true;                         // set beat flag to advance heart rate graph
     heart = 20;                          // begin heart image 'swell' timer
   }
 if (inData.charAt(0) == 'Q'){            // leading 'Q' means IBI data 
     inData = inData.substring(1);        // cut off the leading 'Q'
     IBI = int(inData);                   // convert the string to usable int
   }
}

Samples: https://www.facebook.com/BlankNewWorld/photos/ms.c.eJw9kdsNBDEMAjs6~_YHtpP~;GVgqHP0cQMputTLj7Tdw4Y796HGZet7LF1Sfa74jn5XHF~;c53~;jntcW1~_2Z~;NydpP576LgyyfTO5tHy8~;R0y~;s~;tN3v6QS0wfVx~;0cfXh7z5oH8Ecy9yTH~;Lx6HsBntd9aJ7fPn1mc~;rY~_vB~;QP0y9kOc7Ou9i34mvwJ5~_0XW~_xZ9zD62xmaM.bps.a.406872772813380.1073741832.221506768016649/533411193492870/?type=3&theater

More: https://www.facebook.com/BlankNewWorld/

So far I tested both the gyroscope and the vibration sensor separately and it worked just fine. Since I've tried to combine them i've been getting this error message: ArrayIndexOutOfBoundsException: 1 and the line 53: float roty = (sensors[1]*10); is highlighted at the same time

I assume there is a problem with myString content, or I guess with the string access and my sensors declaration but I can't figure out what to do. I've been learning code for a very short time, please have mercy on my inaccuracies ^^
(i'm french so comments are mostly in french,let me know if you need me to explain myself) Thank you so much for your help !!!

    import glitchP5.*; //import Glitch P5
    String portName = "/dev/cu.usbmodem1421"; 
    import processing.serial.*;
    String serial; 
    Serial myPort;
    int linefeed = 10; 
    int numSensors = 3; 
    float[] sensors;
    float[] pSensors;
    float bornexinf=0; 
    float bornexsup=0;
    float borneyinf=0; 
    float borneysup=0; 
    float rotxold=0; 
    float rotyold=0; 
    // vibration
    int end = 10;    //Le nombre 10 en ASCII pour linefeed marquant la fin du serial.println
    GlitchP5 glitchP5; // declare an instance of GlitchP5. only one is needed
    int j=0; //variable d'incrémentation carré dans carré
    int max=1; //nombre d'itération, soit le nb de carrés dans le carré
    int longueur=10; // longueur du carré 
    int largeur=10; //largeur du carré
    float value=0; //variable pour la rotation
    float mouseXold=displayWidth/2;
    float mouseYold=displayHeight/2;

    void setup() {

     size(displayWidth, displayHeight);
     background (255);
     smooth();

      myPort = new Serial(this, portName, 9600);
      myPort.bufferUntil(linefeed);
      serial = myPort.readStringUntil(end); // fonction qui lit la chaine de caractères depuis le port série jusqu'à println et ensuite assigne string à notre variable qui appelle serial
      serial = null; // initialisation de serial
     glitchP5 = new GlitchP5(this);
    }


    void draw() {

      while (myPort.available() > 0) { //tant qu'il n'y a pas de données provenant du port on lit l'entrée série
        serial = myPort.readStringUntil(end);
      }
        if (serial != null) {  
          String[] a = split(serial, ','); //on créé un tableau qui définit une chaine séparée par des virgules. 
          println(a[0]); //on affiche la première valeur du tableau
        }

      if((pSensors != null)&&(sensors != null)) { 
        float  rotx = (sensors[0]*10);
        float  roty = (sensors[1]*10);
        float  rotz = (sensors[2]*PI)/180;

    strokeWeight(1);
    noFill(); 
    stroke(random(255),random(255),random(255));
    translate(500,150);
    rectMode(CENTER);


    for(j=0;j<max;j++){
        longueur=longueur+1; 
        largeur=largeur+1; 
        translate(width/2, height/2);
        rotate(value);
        translate(-width/2, -height/2);
        rect(rotx,roty,longueur,largeur); 
        redraw();
        bornexinf=rotxold-10; 
        bornexsup=rotxold+10;
        borneyinf=rotyold-10; 
        borneysup=rotyold+10; 
        if(bornexinf>rotx || rotx>bornexsup || borneyinf>roty || roty>borneysup){
        longueur=5;
        largeur=5;
        }
        rotxold=rotx;
        rotyold=roty;
    }
      }
     glitchP5.run();
    }


    void serialEvent(Serial myPort) {


      String myString = myPort.readStringUntil(linefeed);
      if (myString != null) {
              myString = trim(myString);
              pSensors = sensors;
              sensors = float(split(myString, ','));

                     for (int sensorNum = 0; sensorNum < sensors.length; sensorNum++) {
                     print("Sensor" + sensorNum + ": " + sensors[sensorNum] + "\t");
        }
        println();
      }
    }

    void mousePressed() //===> Will be triggered by the vibration sensor : if =0 do nothing; if =1 glitch; //
    {
     glitchP5.glitch(mouseX, mouseY, 200, 400, 200, 60, 120, 10.0f, 20, 1);
    }

Concept image

image showing the content inside the csv file

I was able to count and list down the repeating members in both the columns. But I am not able to create the connecting lines.

the code so far is as follows

String tag = "dataset.csv";
String []rawData;

IntDict drinks;
IntDict colors;

void setup() {
  size(600, 600);

  drinks = new IntDict();
  colors = new IntDict();

  rawData = loadStrings(tag);

  for (int i =0; i<rawData.length; i++) {
    String [] thisRow = split(rawData[i], ","); 

    //  drinks.increment(thisRow[1]);
    drinks.increment(thisRow[0]);
    colors.increment(thisRow[1]);
  }
  println(drinks);
  println(colors);

  String [] drinkName = drinks.keyArray();
  int [] drinkNo = drinks.valueArray();

  String [] colorName = colors.keyArray();
  int [] colorNo = colors.valueArray();

  for (int i = 0; i<drinkName.length; i++) {

    fill(0);
    textSize(15);
    text(drinkName[i]+":"+drinkNo[i], 100, 100+30*i);

    line(100, 100+30*i, 300, 100+30*i);
  }
  for (int i = 0; i<colorName.length; i++) {

    fill(0);
    textSize(15);
    text(colorName[i]+":"+colorNo[i], 300, 100+30*i);

  }

}

It would be great if someone can help me with this.

Many thanks in advance:)

Yousuf

I have a problem, I have written visualization in processing and awt and I'd like to somehow compare. Can anyone advise how to describe animation / visualization processing? I mean metrics such as: performance, number of frames, performance modules (P2D, JAVA2D, P3D, OpenGL), consumption of CPU / graphics. Is there, for example, special processing library for drawing these metrics?

/* alec burns * love data visualization project * 6/19/2015

• this program reads through text files that have
• lines with love in them from a single document or text book
• creates a visualization for them each text represented by a
• glowing particle that fades in and out of space. click on it
• and you can read the line, hover over it and lines connect all

• the balls from the same text

  */

  //color sceme: //tan int alpha = 100; color c1 = color(255,241,225); //cool-red color c2 = color(242,0,88); //pink color c3 = color(255,174,172); //black color c4 = color(0,0,5); //blue-gray color c5 = color(174,169,209); //create a textParticles object to keep track of the particles for that text file TextParticles quranParts;

void setup(){ //constructing the object for testing quranParts = new TextParticles(loadStrings("quran_love.txt")); background(c4); //testing color pallet size(400,400); rectMode(CORNER); float m = width / 5; noStroke(); fill(c1); rect(0,0,m,height); fill(c2); rect(m,0,m * 2, height); fill(c3); rect(m 2, 0, m3, height); fill(c4); rect(m3, 0, m4, height); fill(c5); rect(m*4, 0, m * 5, height);

}

void draw(){ quranParts.display(); }

class TextParticles { String[] txtFile; ArrayList particles; Boolean hoverOn = false; String displayText = ""; float xoff = 0; float yoff = 0.0;

TextParticles(String[] file){ txtFile = file; for(int lineNum = 0; lineNum < txtFile.length; lineNum++){ String line = txtFile[lineNum]; particles.add(new DustParticle(line, lineNum)); } }

void display(){ float offsetSizeX = map(noise(xoff),0,1,0,.3); float offsetSizeY = map(noise(yoff),0,1,0,.3);

for (int i = 0; i < particles.size(); i++){ float x = map(noise(xoff, yoff), 0, 1, width, height); float y = map(noise(xoff, yoff), 0, 1, width, height); DustParticle currPart = particles.get(i); currPart.xpos = x; currPart.ypos = y; //fill of the particles is the second color in the scheme fill(c2); if (currPart.stopMoving == true){ if ((mouseX == pmouseX) && (mouseY == pmouseY)){ ellipse(pmouseX,pmouseY,2+offsetSizeX,2+offsetSizeY);
ellipse(pmouseX,pmouseY,1+offsetSizeX,1+offsetSizeY); } else { currPart.stopMoving = false; } } if(hoverOn = false){ /* * if hover on is true: * all the dust particles from the same book light up */ // if mouse is close to or hovering over a dot hoveron is set to true if ((mouseX > x - 2) && (mouseX < x + 2) && (mouseY > y - 2) && (mouseY < y + 2)){ hoverOn = true; currPart.stopMoving = true; if(mousePressed){ //if the mouse is pressed while hovering over a particle the text of //that ball will be displayed displayText = currPart.loveLine; }
} else{ hoverOn = false; } ellipse(x,y,1+offsetSizeX,1+offsetSizeY); } else{ //if hoverOn is true (if the mouse is hovering over a particle) give each particle a glow and draw a line between them if(i > 0){ DustParticle pastPart = particles.get(i - 1); //draws a line from the last particle to the current particle //line color is fifth color in color pallet stroke(c5); line(pastPart.xpos, pastPart.ypos, currPart.xpos, currPart.ypos); }

ellipse(x,y,1+offsetSizeX,1+offsetSizeY);
} xoff += .01; yoff += .01; } } }

class DustParticle { String loveLine; int lineNumber; float xpos; float ypos; boolean stopMoving = false; DustParticle(String lovLin, int linNum){ loveLine = lovLin; lineNumber = linNum; xpos = random(width); ypos = random(height); } /* void generateLoc(){ xpos = random(width); ypos = random(height); */
}

import ddf.minim.*; import ddf.minim.analysis.*;

Minim minim; AudioPlayer song; BeatDetect beat;

void setup() { size(1000,550); minim = new Minim(this); song = minim.loadFile("Breeze.mp3"); song.play();

}

void draw() { background(0);

}

Project page: jupiterfarms.at/in-between

Over the past 8 months i've been collecting gps data for my movements using a tracker app. Each set can be saved out as a .gpx file and i'm trying to experiment with importing it into Processing and the create some interesting artwork

I've been following this tutorial to display my data but it doesn't seem to be working http://wiki.processing.org/w/GPS_Data

The attached (example.png) file is an example of my movements using http://www.gpsvisualizer.com

I'm hoping to create something similar to this effects (jpeg 1,2,3 attached) using variables such as elevation, speed, etc

Can anyone offer any help on this?

Thanks very much

Music Peru by Fabian Tombers from the EP 'Orph', released 2014 on 'Disturbing Noise Records'

Generative Visuals Made with Processing by Alexander Morosow

Fractal shader code from shadertoy.com/view/lslGWr

Download App: https://www.dropbox.com/s/ygu6auiud8da73i/Simplevis.zip

-- Berlin 2014

I am not quite sure about the formal procedure, (I will figure it out hopefully) but I have a nice idea for an extension, which would be really helpful for many processing users (in my experience).

I am a mathematician who currently continues his studies with a bachelor in media art. My current focus is data analysis and most important visualization. Creative, good looking, interactive visualization plays a key role in understanding high dimensional complex data set. They while being a great interactive and beautiful form of narration are a major tool in gathering meaning out of information.

In my daily work I spend a lot of time with data retrieving, data wrangling and data processing. For this work I am mostly using Python (with the pandas library), Javascript and R. If I want to create good looking visualization - especially if I want to work on a prototype - I always switch to processing in the next step. It is the fastest and easiest way for to give your data an aesthetic flavor.

A big minus on this procedure is: there is always a big abstraction gap between the data wrangling and analyzing and the visualizing in the end. This makes feedback loops in your work (generate your visualization, detect errors, switch back to the data...) really annoying and time consuming. Also, in my point of view, it leaves processing in the design / arts hemisphere, while it would be great tool in visualization - especially if normal processing users like artists and designers are able to work on data related stuff easily.

So my suggestion for a contribution is a library, which is working similar to pandas, or maybe which just delivers a kind of framework / interface to handle data in processing the more easy way.

Possible starting points could be:

• get data the easy way: it should not matter if your data are a CSV file, a JSON file, a REST Web Service, an SQL or a NoSQL database. You should just have one major function to get your data as a data frame into processing.

• process data the easy way: a data frame delivers you an easy to use interface to perform operations on your data (building sums, group the data, filling NaN entries, creating SQL queries on the data frame...). In the best case it should also provide a set of standard statistics functionality.

• provide an output the easy way: here processing plays the key role. If your processed data can easily be converted to a custom output formate (native Array, List, File ...) which then can be easily attached to standard processing graphics functionality a prototyping feedback loop for good visualization would be a lot faster and effective and would include a lot more designers and artists who are not so common with data wrangling the hard way...

What do you think about such extension?

If you don't really know what I have in mind yet, you should have a look at the Pandas library for python - which is doing exactly this thing. But as python is not as smart for visualization as processing a merge of both benefits would be the total awesomeness! :-)

Cheers Jonas

Edit: You find the proposal here: http://www.google-melange.com/gsoc/proposal/review/student/google/gsoc2014/jonaskoehler/5629499534213120

I'm taking a processing class, and we're about 5 weeks into the course, and we are now working with XML/Data. I know how to make an XML code file, but I want to get a specific look to my sketch. All I really want to know is how to make this, or something similar, using code.

I want to be able to get the color scheme going with all the different sized ellipses too. I would also really like to know how to make it so the ellipses are not touching each other. I apologize if this is not in the right place or if it's already been posted. Any help would be greatly appreciated.

Each black circle would represent a day. The orange and blue circles inside represent some data that I will pulling from an csv file. The varying size of the colored circles represents the numerical value of the sum of the data.

Any ideas on how to go about doing this? I guess I could just draw() a bunch of ellipses but surely there has to be a more intelligent/efficient way to do this?