🧔 Hello World

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

2012-02-02 / ( 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,

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

}