FFT

FFT example

Your browser does not support the canvas element.

var fft = new maximJs.maxiFFT();
// var ifft = new maximJs.maxiIFFT();
// var mffc = new maximJs.maxiMFFC();

var osc = new maximJs.maxiOsc();

var fftSize = 1024;
var sampleRate = 44100;

var magMult = 6;

var count = 0;
var updateIncr = 50;
var ignoreCount = false;

var bars = [];
var barsBottom = 600;
var barsLeft = 50;

function setup(){
	fft.setup(fftSize, 512, 256);
	// ifft.setup(fftSize, 512, 256);
    // mfcc.setup(512, 42, 13, 20, 20000, sampleRate);

// This gets the window in the browser
var canvas=document.getElementById("myCanvas");

// This creates a 2d drawing context in it.
context=canvas.getContext("2d");

//finally, we return setInterval, which wants a function to call,
//and a period in milliseconds to wait between calling it.  
return setInterval(draw, 40);
}

function play(){
	// create wave for fft
	var wave = osc.square(220);

	// process wave
	if(fft.process(wave)){
		fft.magsToDB();
		count++; // increment counter
	}

		output = wave; 

}

//The stuff inside the script tag is very similar to processing code.


function draw() {

//This is basically the same as any other 2D processing draw routine.
//clear the screen
  context.clearRect(0,0,700,700);

			for(var i=0; i < fftSize / 2; i++) {
				context.beginPath();
				context.fillStyle="#FF0000";
				context.rect(barsLeft + i, barsBottom, 1, -(fft.getMagnitude(i) * magMult)); 
				context.fill();
				// context.stroke();
				context.closePath();
			}
	}