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(); } }