JS viewer

Syntax-highlighted view of JS of World: Cloned Cloned Pool Predictor Prototype





// Cloned by lillisl2 on 30 Jan 2019 from World "Cloned Pool Predictor Prototype" by Ian Gilligan 
// Please leave this clone trail here.
 


// Cloned by Ian Gilligan on 30 Jan 2019 from World "Pool Predictor Prototype" by lillisl2 
// Please leave this clone trail here.
 


// Cloned by lillisl2 on 28 Jan 2019 from World "Cloned Bouncy Balls" by Ian Gilligan 
// Please leave this clone trail here.
 


// Cloned by Ian Gilligan on 28 Jan 2019 from World "Bouncy Balls" by Starter user 
// Please leave this clone trail here.
 


// ==== Starter World ===============================================================================================
// (c) Ancient Brain Ltd. All rights reserved.
// This code is only for use on the Ancient Brain site.
// This code may be freely copied and edited by anyone on the Ancient Brain site.
// This code may not be copied, re-published or used on any other website.
// To include a run of this code on another website, see the "Embed code" links provided on the Ancient Brain site.
// ==================================================================================================================



// Physijs based World
// Bouncy balls 






// ===================================================================================================================
// === 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.screenshotStep  = 200;   
  
	// Take screenshot on this step. (All resources should have finished loading.) Default 50.



const BALLSIZE = 5 ;

const BALLPOS       = BALLSIZE * 2 ; 		// x,z start position of balls is random in this interval
const BALLHEIGHT    = BALLSIZE * 1 ; 		// y start position of balls 

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


const GROUNDSIZE    = 150;

const startRadius   = BALLSIZE * 30 ;
const maxRadius     = BALLSIZE * 250 ;

	
	const TEXTURE_GROUND 	= '/uploads/gilligi2/8451323128.png' ;
//	const TEXTURE_GROUND 	= '/uploads/starter/latin.jpg' ;
    const TEXTURE_WALL = "/uploads/lillisl2/8451232143.png";

	const SOUND_COLLISION 	= '/uploads/starter/bounce.mp3' ;
 
 // credit:
 // http://soundbible.com/1343-Jump.html
 
 
const SKYCOLOR  = 0xffffff;    


// friction and restitution between 0 and 1: 

const GROUND_FRICTION 		= 0.4;
const GROUND_RESTITUTION 	= 0.95;

const WALL_FRICTION 		= 0.9;
const WALL_RESTITUTION 	= 0.1;

const BALL_FRICTION 		= 0.4;
const BALL_RESTITUTION 		= 0.5;

var LIMIT                   = [7,7,1,1];
var BALL_CHOICE             = 0;

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

	const BALL_MASS = 6;

	
function nextballin()
// Speed of ball creation 
// Create next ball in some random (m to n) milliseconds time.
{
	return ( AB.randomIntAtoB ( 10, 40 ) );	
}


 const FILE_ARRAY = [
                "/uploads/gilligi2/8451323595.png",
                "/uploads/gilligi2/8451323612.png",
                "/uploads/gilligi2/8451147306.png",
                "/uploads/gilligi2/8451147292.png"
                ];

				
ABWorld.drawCameraControls = false; 


// ===================================================================================================================
// === 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;
	

 	
function World() 
{ 

	var textureArray = new Array ( FILE_ARRAY.length );
	var ground_texture ;
 
	var self = this;	
	
	
function loadResources()		// asynchronous file loads - call initScene() when all finished 
{
	var loader = new THREE.TextureLoader();
	
	loader.load ( TEXTURE_GROUND, function ( thetexture )  		// asynchronous file load
	{
		thetexture.minFilter  = THREE.LinearFilter;
		ground_texture = thetexture;
		if ( asynchFinished() ) initScene();		 
	});
		
	for ( var i = 0; i < FILE_ARRAY.length; i++ ) 
	  startFileLoad ( i );		  								// start n more asynchronous file loads 
	  
	  
	var loader2 = new THREE.TextureLoader();
	
	loader2.load ( TEXTURE_WALL, function ( thetexture )  		// asynchronous file load
	{
		thetexture.minFilter  = THREE.LinearFilter;
		wall_texture = thetexture;
		if ( asynchFinished() ) initScene();		 
	});
		
	for ( var j = 0; j < FILE_ARRAY.length; j++ ) 
	  startFileLoad ( j );	
}


function startFileLoad ( n )				// asynchronous file load of texture n 
{
	var loader = new THREE.TextureLoader();

	loader.load ( FILE_ARRAY[n], function ( thetexture )  	 
	{
		thetexture.minFilter  = THREE.LinearFilter;
		textureArray[n] = thetexture;
		if ( asynchFinished() ) initScene();		 
	});	
}
 
 
function asynchFinished()		// all file loads returned 
{
	if ( ! ground_texture ) return false; 
	
	for ( var i = 0; i < FILE_ARRAY.length; i++ ) 
		if ( ! textureArray[i] ) 
			return false;
		
	return true;
}


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

	var light = new THREE.DirectionalLight( 0xFFFFFF, 1.3 );
	
	// close to origin, high up, works best for shadows
	light.position.set ( BALLHEIGHT, (BALLHEIGHT * 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;

    // higher quality shadows at expense of computation time:
	light.shadow.mapSize.width  = 2048;
	light.shadow.mapSize.height = 2048;
	
	light.shadow.bias = -0.0001;

	ABWorld.scene.add( light );


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

	var ground_material = Physijs.createMaterial(
			// new THREE.MeshBasicMaterial( { color: 0xdddddd  } ),
			new THREE.MeshStandardMaterial({  map: ground_texture }),
			GROUND_FRICTION,
			GROUND_RESTITUTION );
		
	ground_material.map.wrapS = THREE.RepeatWrapping;
	ground_material.map.wrapT = THREE.RepeatWrapping;
	ground_material.map.repeat.set( 50, 50 );
		
		
	// ground as plane allows bounces but seems to be infinite plane

	var ground = new Physijs.BoxMesh (
			new THREE.BoxGeometry ( GROUNDSIZE, 1, GROUNDSIZE*2 ),
			ground_material,0 );
			
			

    //ground.rotation.x = (Math.PI / 2) * 3;

	/*
	// ground as box is finite (beyond it, things fall into the void)
	// but it does not seem to allow bounces

		ground = new Physijs.BoxMesh (
			new THREE.BoxGeometry ( GROUNDSIZE, 1, GROUNDSIZE ),
			ground_material, 
			0 );				 
	*/

	ground.receiveShadow = true;
	ABWorld.scene.add( ground );
	
	var wall_material = Physijs.createMaterial(
			// new THREE.MeshBasicMaterial( { color: 0xdddddd  } ),
			new THREE.MeshStandardMaterial({  map: wall_texture }),
			WALL_FRICTION,
			WALL_RESTITUTION );


	var wall = new Physijs.BoxMesh (
	        new THREE.BoxGeometry(6, 25, GROUNDSIZE*2),
	        wall_material,0 );
	
	wall.position.set((GROUNDSIZE / 2),0,0);
	wall.receiveShadow = true;
	ABWorld.scene.add( wall );
	
	var wall2 = new Physijs.BoxMesh (
	        new THREE.BoxGeometry(GROUNDSIZE, 25, 6),
	        wall_material,0 );
	
	wall2.position.set(0,0,(GROUNDSIZE));
	wall2.receiveShadow = true;
	ABWorld.scene.add( wall2 );
	
	var wall3 = new Physijs.BoxMesh (
	        new THREE.BoxGeometry(6, 25, GROUNDSIZE*2),
	        wall_material,0 );
	
	wall3.position.set(-(GROUNDSIZE / 2),0,0);
	wall3.receiveShadow = true;
	ABWorld.scene.add( wall3 );
	
	var wall4 = new Physijs.BoxMesh (
	        new THREE.BoxGeometry(GROUNDSIZE, 25, 6),
	        wall_material,0 );
	
	wall4.position.set(0,0,-(GROUNDSIZE));
	wall4.receiveShadow = true;
	ABWorld.scene.add( wall4 );
	// start infinite loop - but maybe neutralised until splashClicked is true 
	
	ABWorld.render();

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



function selectBall(x)
{
    BALL_CHOICE = x;
}

function createBall() 	 
{
	
 if ( resourcesLoaded && splashClicked && LIMIT[BALL_CHOICE] !== 0) 		  
 {
	 
 // (subtle bug) apparently each ball needs its own material if it is to bounce separately
 
    var ball_material =    Physijs.createMaterial (
            new THREE.MeshLambertMaterial({ map:  textureArray[BALL_CHOICE]  }),  
            BALL_FRICTION,
		    BALL_RESTITUTION );
	
	var ball_geometry = new THREE.SphereGeometry ( BALLSIZE, 50, 50 );
	
    var ball = new Physijs.SphereMesh ( ball_geometry, ball_material, BALL_MASS );                   
        
	ball.collisions = 0;
	ball.castShadow = true;
				
	ball.position.set(  AB.randomIntAtoB(-BALLPOS,BALLPOS),		BALLHEIGHT,		AB.randomIntAtoB(-BALLPOS,BALLPOS)	);
				
	ball.addEventListener( 'collision', function( other_object, relative_velocity, relative_rotation, contact_normal ) 
	{
		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();
		}
	});
	
	ABWorld.scene.add( ball );
	LIMIT[BALL_CHOICE] -= 1;
 
 }
 
 	// --- call createBall again -----------------------------------------------------

	//setTimeout ( createBall, nextballin()  );		 		// set to create next ball in some random time 
}

var OURKEYS = [ 49, 50, 51, 52 ];

function ourKeys ( event ) { return ( OURKEYS.includes ( event.keyCode ) ); }
        
function keyHandler ( event )           
{
        if ( ! ABRun.runReady ) return true;            // not ready yet 

    // if not handling this key, send it to default: 
        
        if ( ! ourKeys ( event ) ) return true;
        
        // else handle it and prevent default:
        
        if ( event.keyCode == 49 )          selectBall(0);   
        else if ( event.keyCode == 50 )     selectBall(1); 
        else if ( event.keyCode == 51 )     selectBall(2); 
        else if ( event.keyCode == 52 )     selectBall(3); 
        
        event.stopPropagation(); event.preventDefault(); return false;
}

var startX, startY; 

var dragevents;         // number of events in the current drag 


function initDrag ( x, y )              // x,y position on screen
{
        if ( ! ABRun.runReady ) return true;            // not ready yet 

        startX  = x;                                             
        startY  = y;
        dragevents = 0;
        
        //tryHitBabies ( x, y );          // check if this is a tap not a drag - and if it hits a baby 
}



function drag ( x, y )                  // compare with previous x,y position on screen to get direction of drag
{
        if ( ! ABRun.runReady ) return true;            // not ready yet 

        if ( ( dragevents % 4 ) === 0 )           // slow it down to respond to every nth event - too many events
        {
                         if ( x > startX )      createBall(0);
                else if ( x < startX )          createBall(1);

                         if ( y > startY )      createBall(2);
                else if ( y < startY )          createBall(3);
        }
        
        dragevents++;
        
        startX  = x;                                             
        startY  = y;
}

function initOptions()
{
    var y = 0
    var r = 1
    $("#user_span1").html( "<p align=\"center\">Ball Selected : <b>Yellow</b></p>" );
    var s = "<p align=\"center\"><button id='yellowButton'>Select Yellow balls</button> <button id='redButton'>Select Red balls</button> <button id='blackButton'>Select Black ball</button> <button id='whiteButton'>Select White ball</button></p>";
    $("#user_span2").html( s );
    $("#user_span3").html( "<p align=\"center\">Camera Angles : </p>" );
    s = "<p align=\"center\"><button id='accuteButton'>accute</button> <button id='obtuseButton'>obtuse</button></p> <button id='flatdownButton'>flatdown</button></p>";
    $("#user_span4").html( s );
    $("#user_span5").html( "<p align=\"center\">Ground Fricition</p>" );
    s  ="<p align=\"center\"><button id='decreaseButton'>decrease friction</button> <button id='increaseButton'>increase friction</button></p> ";
    //$("#user_span7").html( "<p align=\"center\"><font color=\"#C9C9C9\"><b>"+timer/AB.clockTick+" seconds remaining</b></font><p></b></p>" );
    document.getElementById("yellowButton").addEventListener("click", function() { selectBall(0); }, false);
    document.getElementById("redButton").addEventListener("click", function() { selectBall(1); }, false);
    document.getElementById("blackButton").addEventListener("click", function() { selectBall(2); }, false);
    document.getElementById("whiteButton").addEventListener("click", function() { selectBall(3); }, false);
    
    //document.getElementById("idButton").addEventListener("click", function() { func(var); }, false);
    
    
        
}

//function updateHUD()
{
    //$("#user_span1").html( "<p align=\"center\">Difficulty settings : <b>"+difficulty+"</b></p>" );
    //$("#user_span3").html( "<p align=\"center\">Mode settings : <b>"+gameMode+"</b></p>" );
    //updateScore();
    //if (gameMode === "TIME")
    //{
    //    $("#user_span7").html( "<p align=\"center\"><b>"+Math.floor(timer/AB.clockTick)+" seconds remaining</b><p></b></p>" );
    //}
    //else
    //{
    //    $("#user_span7").html("<p align=\"center\"><font color=\"#C9C9C9\"><b>"+Math.floor(timer/AB.clockTick)+" seconds remaining</b></font><p></b></p>");
    //}
}


// --- public interface ----------------------------------------------------------------------

	
this.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 );
	  
	  
	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
    
    document.onkeydown                      = keyHandler;
    ABHandler.initTouchDrag         = initDrag;
    ABHandler.touchDrag             = drag
                
    ABHandler.initMouseDrag         = initDrag;
    ABHandler.mouseDrag             = drag
    initOptions();
};



this.nextStep = function()		// not used 
{
};

 
}


	 

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

// This is a more sophisticated solution to get audio autoplay on mobile/Chrome.
// Splash screen forces user interaction, which marks *multiple* audio global variables as "approved" for later play.
// Then when we need to play audio, find one of these global variables that is not already playing, and play it.
 

// global variable audio objects:

var theaudio1 = new Audio( SOUND_COLLISION );
var theaudio2 = new Audio( SOUND_COLLISION );
var theaudio3 = new Audio( SOUND_COLLISION );
var theaudio4 = new Audio( SOUND_COLLISION );
var theaudio5 = new Audio( SOUND_COLLISION );



function soundCollision()		// triggered by JS, not by user interaction 
{
	
	if ( ! AB.audioIsPlaying ( theaudio1 ) ) 	{ theaudio1.play(); return; }
	if ( ! AB.audioIsPlaying ( theaudio2 ) ) 	{ theaudio2.play(); return; }
	if ( ! AB.audioIsPlaying ( theaudio3 ) ) 	{ theaudio3.play(); return; }
	if ( ! AB.audioIsPlaying ( theaudio4 ) ) 	{ theaudio4.play(); return; }
	if ( ! AB.audioIsPlaying ( theaudio5 ) ) 	{ theaudio5.play(); return; }
	
	// else try to make a new one, local variable, without user interaction
	// but this will not play on some browsers:

	var a = new Audio( SOUND_COLLISION );		
	a.play();
}
 
  
  
 
	
// --- Splash screen --------------------------------------------------------------

	
	AB.newSplash ( "Demo of Physics API" );	

	
	// when user clicks/touches button on splash screen, audio starts and run starts:
		
	$("#splashbutton").click ( function ()        
	{
		// mark multiple audio objects as good now for JS to call play() without further user interaction:
		theaudio1.play();	theaudio1.pause();		   
		theaudio2.play();	theaudio2.pause();		   
		theaudio3.play();	theaudio3.pause();		   
		theaudio4.play();	theaudio4.pause();		   
		theaudio5.play();	theaudio5.pause();		   

		AB.removeSplash();			// remove splash screen 
		
		splashClicked = true;
		
	});