🔍

audioreactive particles in p5.js

Check out the EDITOR P5.js code:
https://editor.p5js.org/simon_oakey/sketches/m8Tc5ydQX

Code

sketch.js

let mic;
let fft;
let fft_smoother = 0.4; // the higher, the smoother
let w,h;
let band_cnt = 128;

let sub_freq = 0;
let low_freq = 0;
let mid_freq = 0;
let hi_freq = 0;
let treble_freq = 0;

let amp_raw = 0;
let amp_smooth = 0;

let spectrum;

function setup() {
  
  createCanvas(window.innerWidth,window.innerHeight);
  
 
  mic = new p5.AudioIn(); // setup mic object
  mic.start(); // start mic
  fft = new p5.FFT(fft_smoother,band_cnt); // init fast fourier transform analysis
  fft.setInput(mic); // pipe mic to fft transform
  
  w = width;
  h = height;
  
  initParticles();
  
}

function draw() {
   
  background(0,4);
  
   spectrum = fft.analyze();
  
  
  // --------------------------------------------------
  // available default freq spectrums :"bass", "lowMid", "mid", "highMid", "treble"
  // deliver values from 0-255
  // ------------------------------------------------
    sub_freq = fft.getEnergy("bass");
    low_freq = fft.getEnergy("lowMid");
    mid_freq = fft.getEnergy("mid");
    hi_freq = fft.getEnergy("highMid");
    treble_freq = fft.getEnergy("treble");
  
    // ------------ calc average amplitide + smoothed version
    amp_raw = (sub_freq+low_freq+mid_freq+hi_freq+treble_freq)*.2;
    amp_smooth = lerp(amp_smooth,amp_raw,fft_smoother*.1);
   

    // ------------------------------------
    // -----  for audio in debuging ------ ( attach debug.js to html!!! )
   //------------------------------------
   // draw_freq_bands(); //visualize basic frequency bands
  //  draw_fft_spectrum(); //draw fft spectrum as curve
  //  drawMainAmplitude(); //visualize the amplitude sum
   
  
   updateParticles();
 
}

aP.js

class aP{

  constructor(_i,_f){

    this.pos = createVector(0,0);
    this.vel = createVector(0,0);
    this.center = createVector(0,0);
    this.id = _i;
    this.size =_f*2+4;
    this.freq = _f;
    this.amp = 0;
  
  }
  
  
  updateMe(){
  
    let t = millis()*.0004;
 
    let a = noise(this.id,t*.18)*TWO_PI*2;
    
    
    if(this.freq == 0){this.amp = sub_freq/255;}
    if(this.freq == 1){this.amp= low_freq/255;}
    if(this.freq == 2){this.amp = mid_freq/255;}
    if(this.freq == 3){this.amp = hi_freq/255;}
    if(this.freq == 4){this.amp = treble_freq/255;}
    
   this.pos.x += sin(a)*this.amp *  2.95 * (this.freq+1)  ;
   this.pos.y += cos(a)*this.amp *  2.95 * (this.freq+1)  ;
    
    this.center.x =  w *.5 - this.pos.x   ;
    this.center.y =  h *.5-  this.pos.y  ;
    
    let magi = this.center.mag();

   let cf =  this.center.normalize();  
    
    // apply center force 
     this.pos.y += this.center.y*magi*.014;
     this.pos.x += this.center.x*magi*.014;
    
    // particle stay within stage bounaries
    if(this.pos.x>w){ this.pos.x = 0; }
    if(this.pos.x<0){ this.pos.x =w ; }
    
    if(this.pos.y>h){ this.pos.y = 0; }
    if(this.pos.y<0){ this.pos.y =h ; }
    
    noStroke();
    
    fill(200 + this.freq*10);
    let psize = 2 + (5-this.freq)*3 *this.amp*.6
    ellipse(this.pos.x,this.pos.y, psize );
  
  }
}

pSystem.js

let allP = [];

function initParticles(){

  
  for(let i=0;i<300;i++){
  
      
   let rf = int(random(0,5)); 
    
    let np = new aP(i,rf);
    np.pos.x = random(w);
    np.pos.y = random(h);
    allP.push( np);
  
  }
  
  

}

function updateParticles(){


     
  for(let i=0;i<allP.length;i++){
  
      allP[i].updateMe();
  
  }
  

}