Code viewer [Ancient Brain]

Code viewer for World: Collision World

// ==== Starter World =================================================================================================
// This code is designed for use on the Ancient Brain site.
// This code may be freely copied and edited by anyone on the Ancient Brain site.
// To include a working run of this program on another site, see the "Embed code" links provided on Ancient Brain.
// ====================================================================================================================





// Demo of Physijs based World

// From here, with many changes:
// http://chandlerprall.github.io/Physijs/examples/collisions.html



	
	

// ===================================================================================================================
// === Start of tweaker's box ======================================================================================== 
// ===================================================================================================================

// The easiest things to modify are in this box.
// You should be able to change things in this box without being a JavaScript programmer.
// Go ahead and change some of these. What's the worst that could happen?


AB.clockTick       = 100;    

	// Speed of run: Step every n milliseconds. Default 100.
	
AB.maxSteps        = 2000;    

	// Length of run: Maximum length of run in steps. Default 1000.

AB.screenshotStep  = 200;   
  
	// Take screenshot on this step. (All resources should have finished loading.) Default 50.


const BOXSIZE       = 5 ;

const BOXPOS        = BOXSIZE * 2 ; 	    	// range of box x,z start positions 
const BOXHEIGHT     = BOXSIZE * 10 ; 			// y start position of boxes 

const HEAVYIMPACT   = 30 ;   				 	// heavy impacts have y velocity greater than this 

const GROUNDSIZE    = BOXSIZE * 40;
				
const startRadius   = BOXSIZE * 15 ;
const maxRadius     = BOXSIZE * 250 ;

	
	const TEXTURE_FILE_0   	= '/uploads/starter/smiley.png' ;
	const TEXTURE_FILE_1   	= '/uploads/starter/ghost.3.png' ;
	
// https://commons.wikimedia.org/wiki/Smiley
	
	
	const TEXTURE_GROUND 	= '/uploads/starter/rocks.jpg' ;

	
	const SOUND_COLLISION 	= '/uploads/starter/wooden.mp3' ;
 
 // credit:
 // http://soundbible.com/715-Dropped-Wooden-Floor.html
 
 	const SOUND_BEEP 	= '/uploads/starter/beep.mp3' ;
 
 
const SKYCOLOR  = 0xffffcc;    

const GROUND_FRICTION 		= 0.8;
const GROUND_RESTITUTION 	= 0.3;

const BOX_FRICTION 			= 0.6;
const BOX_RESTITUTION 		= 0.3;

  
// define gravity along x,y,z dimensions:
	var gravity = new THREE.Vector3 ( 0,   -30, 0 );
//	var gravity = new THREE.Vector3 ( -30, -30, 0 );


function nextboxin()
// Speed of box creation 
// Create next box in some random (m to n) milliseconds time.
{
	return ( AB.randomIntAtoB ( 2000, 4000 ) );		 
//	return ( AB.randomIntAtoB ( 200, 1000 ) );	
}


// ===================================================================================================================
// === End of tweaker's box ==========================================================================================
// ===================================================================================================================


// You will need to be some sort of JavaScript programmer to change things below the tweaker's box.








	var resourcesLoaded = false;
	var splashClicked = false;
	

 	

	var box_texture_0, box_texture_1 ;
	var ground_texture ;

	var boxno = 0;
	
	var currentbox ;
	
		
		
	
function loadResources()		// asynchronous file loads - call initScene() when all finished 
{
	var loader1 = new THREE.TextureLoader();
	var loader2 = new THREE.TextureLoader();
	var loader3 = new THREE.TextureLoader();
	
	loader1.load ( TEXTURE_GROUND, function ( thetexture )  		
	{
		thetexture.minFilter  = THREE.LinearFilter;
		ground_texture = thetexture;
		if ( asynchFinished() )	initScene();		// if all file loads have returned 
	});
		
	loader2.load ( TEXTURE_FILE_0, function ( thetexture )  	 
	{
		thetexture.minFilter  = THREE.LinearFilter;
		box_texture_0 = thetexture;
		if ( asynchFinished() )	initScene();		 
	});	
	
	loader3.load ( TEXTURE_FILE_1, function ( thetexture )  
	{
		thetexture.minFilter  = THREE.LinearFilter;
		box_texture_1 = thetexture;
		if ( asynchFinished() )	initScene();		 
	});
}


function asynchFinished()		// all file loads returned 
{
	if ( ground_texture && box_texture_0 && box_texture_1 )    return true;  
	else return false;
}	
	
	

function initScene()		// all file loads have returned 
{
	// --- Light ------------------------------------------------------------------

	var  light  = new THREE.DirectionalLight( 0xFFFFFF, 1.3 );

	light.position.set ( BOXHEIGHT, (BOXHEIGHT * 2), 0 );
	light.target.position.copy( ABWorld.scene.position );

	light.castShadow = true;
	
	// how far away to draw shadows:
	light.shadow.camera.left    = -GROUNDSIZE;
	light.shadow.camera.right   =  GROUNDSIZE;
	light.shadow.camera.bottom  = -GROUNDSIZE;
	light.shadow.camera.top     =  GROUNDSIZE;

	light.shadow.bias = -0.0001;
	
    // higher quality shadows at expense of computation time
	// slower PCs can struggle if this is too high
	// World author could make it an option at run-time - high or low graphics option - or just shadows on/off
	light.shadow.mapSize.width  = 2048;
	light.shadow.mapSize.height = 2048;

	ABWorld.scene.add( light );


	// --- Ground ------------------------------------------------------------------

	var ground_material = Physijs.createMaterial(
			new THREE.MeshLambertMaterial({ map: ground_texture }),
			GROUND_FRICTION,
			GROUND_RESTITUTION );

	ground_material.map.wrapS = THREE.RepeatWrapping;
	ground_material.map.wrapT = THREE.RepeatWrapping;
	ground_material.map.repeat.set( 3, 3 );
		
	var ground = new Physijs.BoxMesh(
			new THREE.BoxGeometry( GROUNDSIZE, 1, GROUNDSIZE ),
			ground_material,
			0 );					// mass
			
	ground.receiveShadow = true;
	ABWorld.scene.add( ground );
	
	
	// start infinite loop - but maybe neutralised until splashClicked is true 
	
	ABWorld.render();

	console.log ( "Resources loaded." );
	resourcesLoaded = true;
	
	createBox(); 		
	
}


 
function createBox() 							 
{
 // has to be started by resourcesLoaded code 
 // cannot be started by splashClicked code since that is outside World 
 // needs both to be true 
 
 if ( resourcesLoaded && splashClicked ) 		  
 {
	// think each box needs its own material 
	
	var box_material_0  = Physijs.createMaterial(
					new THREE.MeshLambertMaterial({ map: box_texture_0 }), 
					BOX_FRICTION,
					BOX_RESTITUTION	);
												
	var box_geometry = new THREE.BoxGeometry( BOXSIZE, BOXSIZE, BOXSIZE );

	var box = new Physijs.BoxMesh (	box_geometry, box_material_0 );
	
	box.collisions = 0;
	box.castShadow = true;
				
	box.position.set(  AB.randomIntAtoB(-BOXPOS,BOXPOS),		BOXHEIGHT,		AB.randomIntAtoB(-BOXPOS,BOXPOS)	);
				
	box.rotation.set( 	Math.random() * Math.PI,	Math.random() * Math.PI,	Math.random() * Math.PI		);
				
				
	box.addEventListener( 'collision', function( other_object, relative_velocity, relative_rotation, contact_normal ) 
    // box has collided with other_object with an impact speed of relative_velocity and a rotational force of relative_rotation and at normal contact_normal
	{
		// console.log ( relative_velocity );
		var mainImpact = relative_velocity.y;		// impact in direction of gravity 
 		// console.log ( Math.abs(mainImpact) );
 		if (  Math.abs(mainImpact) > HEAVYIMPACT )			// main impact, not lesser ones as it settles  
		{
			soundCollision();
			
			var box_material_1 = Physijs.createMaterial(
					new THREE.MeshLambertMaterial({ map: box_texture_1 }),
					BOX_FRICTION,
					BOX_RESTITUTION	);

			this.material = box_material_1;
		}
	});
	
	
	ABWorld.scene.add( box );
	
	currentbox = box;
	boxno++;
 }
	
	// --- call createBox again -----------------------------------------------------
	
	setTimeout ( createBox, nextboxin() );
	
		// Create next box in some random time.
		// Put this in createBox, not nextStep - runs on independent timer.	 
}




 

	
AB.world.newRun = function() 
{
	ABWorld.init3d ( startRadius, maxRadius, SKYCOLOR  ); 			// sets up renderer, scene, camera
 
 // can adjust renderer:
 
	ABWorld.renderer.shadowMap.enabled = true;

 // scene is Physijs.Scene, not THREE.Scene
 // can adjust scene - change gravity from default:
 
	ABWorld.scene.setGravity ( gravity );
  
// multiply mouse scrolls by some factor to speed up/slow down movement:
//	  ABHandler.SCROLLFACTOR 	= 0.1;
	  
	  
	loadResources();	// asynchronous file loads 
						// calls initScene() when all done 
	

	ABWorld.lookat.copy ( ABWorld.scene.position );  
	 
	ABWorld.scene.simulate();		// Physics simulate - runs on independent timer to AB nextStep

};



AB.world.nextStep = function()
{
	// not much to do each step
	// physics simulate runs on independent timer
	// create box runs on another independent timer

	// for camera control, follow current falling box, whose position changes constantly:  
	if ( currentbox )
		ABWorld.follow.copy ( currentbox.position );           
	
	if ( boxno > 0 )
	{
//	  AB.msg ( "Box " + boxno + " position: <tt> " + AB.vector3toString ( currentbox.position ) + "</tt>" );
	  AB.msg ( "Box " + boxno + " height:   <tt> " + Math.floor(currentbox.position.y)    + "</tt>" );
	}
};

 





	 
// --- audio --------------------------------------------------------------

function soundCollision()
{
    var audio = new Audio( SOUND_COLLISION );
    audio.play();
}
 
function soundBeep()
{
    var audio = new Audio( SOUND_BEEP );
    audio.play();
}
 
 
 
	
// --- Splash screen --------------------------------------------------------------
// Splash screen is to try to get audio events to autoplay on mobile/Chrome.
// This is a simple version. It just tries one audio event (beep) after user interaction, and hopes other audio will now work.

// This simple approach works on some mobile browsers - touch splash screen allows all subsequent audios.
// But does not work on other mobile browsers - touch splash screen plays first audio, but subsequent audios are still silent. 

	
	// display splash screen 
	
	AB.newSplash ( "Demo of Physics API" );	

	
	// when user clicks/touches button on splash screen, audio starts and run starts:
		
	AB.splashClick ( function ()        
	{
		soundBeep();				// audio linked to user interaction    
		AB.removeSplash();			// remove splash screen 

		splashClicked = true;		// will cause createBox to work (if resourcesLoaded is true)
		
	});