This demo utilizes Audio Data Api that is currently in the Firefox 4 Beta. I have been playing around with the processingJS and I have found they complement each other and they can easily be utilized together. One of the many cool features found in the energizeGL is the ability to easily utilize a 2d Firefox 4 Beta“. This demo will show you how to: 1. Embed ProcessingJS to a texture on a 3d object in EnergizeGL 2. Embed a video in EnergizeGL on a 3d plane. 3. How to analyze Audio data to create a simple 3d Visualization Only View this in “
Transmission","Interactive Development","1010101010101010101010");
$().mousemove( function(e) {
mouseX = e.pageX;
mouseY = e.pageY;
});
function radian(){ var rad = Math.atan2(mouseY, mouseX); return rad; }; function degree(){ var deg = radian() * 180 / Math.PI; return deg; }; function _xRotation(){ _xRot += Math.cos(degree() * Math.PI / 180); return _xRot; };
jQuery(function($) { _currentX = -40 + (deltaM * 10); //myXRotation = new _xRotation(); $('body') .bind('mousewheel', function(event, delta) { var dir = delta > 0 ? 'Up' : 'Down', vel = Math.abs(delta); deltaM = delta; _currentX = _currentX+deltaM*15; return false; });
// Mozilla Specific Audio Code /////////////////
audio = document.getElementById('mediaElement'); // not really a test for Firefox 4, but should avoid error messages in browsers // that don't support audio or Float32Array (as used in FFT constructor below) if (typeof audio.currentSrc === "undefined" || typeof Float32Array === "undefined") { alert("This example requires Firefox 4: \n\nwww.mozilla.com/firefox/beta"); } else {
function loadedMetadata() {
channels = audio.mozChannels;
rate = audio.mozSampleRate;
frameBufferLength = audio.mozFrameBufferLength;
fft = new FFT(frameBufferLength / channels, rate);
}
function audioAvailable(event) {
var fb = event.frameBuffer,i, t = event.time,signal = new Float32Array(fb.length / channels);
for (i = 0, fbl = frameBufferLength / 2; i < fbl; i++) {
// Assuming interlaced stereo channels,
// need to split and merge into a stero-mix mono signal
signal[i] = (fb[2*i] + fb[2*i+1]) / 2;
}
fft.forward(signal);
for (i = 0; i < fft.spectrum.length; i++) {
magnitude = fft.spectrum[i] * 4000;
}
}
audio.addEventListener('MozAudioAvailable', audioAvailable, false);
audio.addEventListener('loadedmetadata', loadedMetadata, false);
// FFT from dsp.js, see below
var FFT = function(bufferSize, sampleRate) {
this.bufferSize = bufferSize;
this.sampleRate = sampleRate;
this.spectrum = new Float32Array(bufferSize/2);
this.real = new Float32Array(bufferSize);
this.imag = new Float32Array(bufferSize);
this.reverseTable = new Uint32Array(bufferSize);
this.sinTable = new Float32Array(bufferSize);
this.cosTable = new Float32Array(bufferSize);
var limit = 1,
bit = bufferSize >> 1,
i;
while (limit < bufferSize) {
for (i = 0; i < limit; i++) {
this.reverseTable[i + limit] = this.reverseTable[i] + bit;
}
limit = limit > 1;
}
for (i = 0; i < bufferSize; i++) {
this.sinTable[i] = Math.sin(-Math.PI/i);
this.cosTable[i] = Math.cos(-Math.PI/i);
}
}; // FFT
FFT.prototype.forward = function(buffer) {
var bufferSize = this.bufferSize,
cosTable = this.cosTable,
sinTable = this.sinTable,
reverseTable = this.reverseTable,
real = this.real,
imag = this.imag,
spectrum = this.spectrum;
var i;
if (bufferSize !== buffer.length) {
throw "Supplied buffer is not the same size as defined FFT. FFT Size: " + bufferSize + " Buffer Size: " + buffer.length;
}
for (i = 0; i < bufferSize; i++) {
real[i] = buffer[reverseTable[i]];
imag[i] = 0;
}
var halfSize = 1,
phaseShiftStepReal,
phaseShiftStepImag,
currentPhaseShiftReal,
currentPhaseShiftImag,
off,
tr,
ti,
tmpReal;
while (halfSize < bufferSize) {
phaseShiftStepReal = cosTable[halfSize];
phaseShiftStepImag = sinTable[halfSize];
currentPhaseShiftReal = 1.0;
currentPhaseShiftImag = 0.0;
for (var fftStep = 0; fftStep < halfSize; fftStep++) {
i = fftStep;
while (i < bufferSize) {
off = i + halfSize;
tr = (currentPhaseShiftReal * real[off]) - (currentPhaseShiftImag * imag[off]);
ti = (currentPhaseShiftReal * imag[off]) + (currentPhaseShiftImag * real[off]);
real[off] = real[i] - tr;
imag[off] = imag[i] - ti;
real[i] += tr;
imag[i] += ti;
i += halfSize Audio API to their browser as well; although you have to download it from a ChromeOS currently has webGL capability and with it being present on the WebKit nightly, and extensions to be built and this in my opinion will probably work out really well for mobile devices. I will look forward to seeing webGL on the iPhone and Android in the near future. Mobile drives html5 and with an average life span of a phone and contract being 2 years. I see the browser landscape rapidly changing. People will utilize newer browsers in less time due to the shelf lives of their phones. In short everything needs to be rewritten in the next 5 years to deal with mobile to stay valid.
If you missed it their was a webGL camp recently. I didn't have the opportunity to be there although I have seen the screen casts. The screen casts were very informative check them out Mozilla Firefoxs App Store as well. I am glad to see browsers supporting this functionality directly within the browser. I believe this will provide a great deal of web developers a way to directly capitalize off their skill sets. I have been utilizing here. On the server I recently installed Media Temple I am looking forward to utilizing NodeJS for the backend for some of my new apps and games. I really like the idea of writing everything in one language javascript and Node seems to simplify a great deal for me. If you are not familiar with nodeJS check it out it is server-side JavaScript.
