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