Creating a Pseudo Equalizer in 3D Room using Three.js JavaScript 3D library ( 49 )

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,
});
}
``````

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,
});
``````

function render - full code of function

``````
function render() {
var timer = new Date().getTime() * 0.0004;
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,
});
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,