Image
Creating a Pseudo Equalizer in 3D Room using Three.js JavaScript 3D library

Published by: Emil / Data 2.2.2012 / Views: 458

I had this animation in mind for few weeks but I didn't had time to make it. Today, finally I start to code quickly on something as Pseudo Equalizer, which has no link to audio parameters, is just a simple Canvas animation using 6 cube geometry, with object size randomly changed and with a blending effect as material surface. The room and these 6 objects are rotating in x,y,z axis slowly and the material color is also changing by random.


Demo page:
http://maran-emil.de/experiments/demo8/index.htm

Three.js Lib:
https://github.com/mrdoob/three.js/




Short explanation:

Render canvas function is probably the most important part of code, the other parts are just event functions or primitive geometric objects. In Render function I rotate the objects created on the init() function. Also probably the notation is not very good for modulo %.


var numerator = timer * 1000000;
var denominator = 17;
var remainder = numerator % denominator;


Because the scale of objects was to fast changed I had to add a condition, if modulo numerator is bigger than 12, just in that case start to modify the objects scale by Math.random.


// generate random color
colorCB = '0xff'+ Math.round(Math.random() * 9) +'f'+ Math.round(Math.random() * 9) +'f';
if(remainder > 12 ){
object.scale.x = Math.random() * 0.6 + 2.1;
object.scale.y = Math.random() * 0.09 + Math.PI / 180;
object.scale.z = Math.random() * 9 + Math.PI / 180;
object.material = new THREE.MeshBasicMaterial({
color: colorCB, transparent: false,
opacity: 0.8,
overdraw: true,
wireframe: false,
blending: THREE.AdditiveBlending
});
}


Also the color of material is changing fast and randomly.


// generate random color
colorCC = '0x9f'+ Math.round(Math.random() * 2) +'f'+ Math.round(Math.random() * 2) +'6';
object.material = new THREE.MeshBasicMaterial( {
color: colorCC,
transparent: false,
opacity: 0.8,
overdraw: true,
wireframe: false,
blending: THREE.AdditiveBlending
});


function render - full code of function


function render() {
var timer = new Date().getTime() * 0.0004;
var radius = 300;

camera.position.x = Math.cos( timer ) * 500;
camera.position.z = Math.sin( timer ) * 500;
camera.position.y = Math.cos( timer ) * 500;
camera.lookAt( scene.position );

var numerator = timer * 1000000;
var denominator = 17;

var remainder = numerator % denominator;

for ( var i = 0, l = objects.length; i < l; i++ ) {

colorCB = '0xff'+ Math.round(Math.random() * 9) +'f'+ Math.round(Math.random() * 9) +'f';
colorCC = '0x9f'+ Math.round(Math.random() * 2) +'f'+ Math.round(Math.random() * 2) +'6';

var object = objects[ i ];

object.rotation.x += Math.random() * 0.00002 + 0.00003;
object.rotation.y += Math.random() * 0.00002 + 0.00004;

if(i > 0 ){
object.rotation.z += Math.random() * 0.00002 + 0.00006;
}

object.material = new THREE.MeshBasicMaterial( {
color: colorCC,
transparent: false,
opacity: 0.8,
overdraw: true,
wireframe: false,
blending: THREE.AdditiveBlending
});

if(remainder > 12 ){
object.scale.x = Math.random() * 0.6 + 2.1;
object.scale.y = Math.random() * 0.09 + Math.PI / 180;
object.scale.z = Math.random() * 9 + Math.PI / 180;
object.material = new THREE.MeshBasicMaterial({
color: colorCB,
transparent: false,
opacity: 0.8,

overdraw: true,
wireframe: false,
blending: THREE.AdditiveBlending
});

}
}


renderer.render( scene, camera );
renderer.setClearColorHex( bgRender , 0.9 );
stats.update();
}