Code viewer for World: Globe Trotter

See raw JS.

//http://planetpixelemporium.com/planets.html = planet textures 

const PLANETS = new Array(8);
const MAXSTEPS 	= 1000;	
const  SCREENSHOT_STEP = 50;    


var counter = 0;                  
         
const MAXPOS = 3000 ;           
const startRadiusConst = MAXPOS * 2 ;		
const maxRadiusConst = MAXPOS * 5 ;		
const INNERPOS = 2000;
const SKYCOLOR 	= 0x000000;	

var   SPINSPEED = 0.3;
const MIN_DISTANCE = 1000 * 3 ;
var clock = new THREE.Clock();
const CLOCKTICK = 100;

var earth, sun, pluto, venus, jupiter, mars, neptune, mercury;

var timer = new THREE.Clock();

var particleSystem, particleCount, particles;
var redCount, reds, redMaterial, redParticles;

var messages = new Array(4);    // will store answer values
var end = false;
function initPlanets()
{
    /* need to add light in order to use MeshPhongMaterial */
    var light = new THREE.DirectionalLight( 0xffffff );
    light.position.set( 0, 1, 1 ).normalize();
    threeworld.scene.add(light);
    
    var earth_geometry = new THREE.SphereGeometry(1000, 32, 32);
    var earth_material = new THREE.MeshPhongMaterial();
    earth_material.map = THREE.ImageUtils.loadTexture("/uploads/aravicl2/earthmaterial.jpg");
    earth_material.bumpMap = THREE.ImageUtils.loadTexture("/uploads/aravicl2/earthbump.jpg");
    earth_material.bumpScale = 100;
    earth_material.specularMap = THREE.ImageUtils.loadTexture("/uploads/aravicl2/earthspec.jpg");
    earth = new THREE.Mesh(earth_geometry, earth_material);
    PLANETS[counter] = earth;
    counter++;
    
    sun = new THREE.Mesh(
              new THREE.SphereGeometry(1000, 32, 32), 
              new THREE.MeshBasicMaterial({
                map: THREE.ImageUtils.loadTexture("/uploads/aravicl2/sunmap.jpg"), 
                side: THREE.BackSide
              })
            );
    PLANETS[counter] = sun;
    counter++;
    
    mars = new THREE.Mesh(
              new THREE.SphereGeometry(1000, 32, 32), 
              new THREE.MeshBasicMaterial({
                map: THREE.ImageUtils.loadTexture("/uploads/aravicl2/marsmap.jpg"), 
                side: THREE.BackSide
              })
            );
    PLANETS[counter] = mars;
    counter++;
    
    mercury = new THREE.Mesh(
              new THREE.SphereGeometry(900, 32, 32), 
              new THREE.MeshBasicMaterial({
                map: THREE.ImageUtils.loadTexture("/uploads/aravicl2/mercurymap.jpg"), 
                side: THREE.BackSide
              })
            );
    PLANETS[counter] = mercury;
    counter++;
    
    venus = new THREE.Mesh(
              new THREE.SphereGeometry(1500, 32, 32), 
              new THREE.MeshBasicMaterial({
                map: THREE.ImageUtils.loadTexture("/uploads/aravicl2/venusmap.jpg"), 
                side: THREE.BackSide
              })
            );
    PLANETS[counter] = venus;
    counter++;
    
    var pluto_geometry = new THREE.SphereGeometry(900, 32, 32);
    var pluto_material = new THREE.MeshPhongMaterial();
    pluto_material.map = THREE.ImageUtils.loadTexture("/uploads/aravicl2/plutomap.jpg");
    pluto_material.bumpMap = THREE.ImageUtils.loadTexture("/uploads/aravicl2/plutobump.jpg");
    pluto_material.bumpScale = 100;
    pluto = new THREE.Mesh(pluto_geometry, pluto_material);
    
    PLANETS[counter] = pluto;
    counter++;
    
    jupiter = new THREE.Mesh(
              new THREE.SphereGeometry(1500, 32, 32), 
              new THREE.MeshBasicMaterial({
                map: THREE.ImageUtils.loadTexture("/uploads/aravicl2/jupitermap.jpg"), 
                side: THREE.BackSide
              })
            );
    PLANETS[counter] = jupiter;
    counter++;
    
    neptune = new THREE.Mesh(
              new THREE.SphereGeometry(500, 32, 32), 
              new THREE.MeshBasicMaterial({
                map: THREE.ImageUtils.loadTexture("/uploads/aravicl2/neptunemap.jpg"), 
                side: THREE.BackSide
              })
            );
    PLANETS[counter] = neptune;
    counter++;   
}

function addBackground()
{
    var background = new THREE.Mesh(
              new THREE.SphereGeometry(9000, 64, 64), 
              new THREE.MeshBasicMaterial({
                map: THREE.ImageUtils.loadTexture("/uploads/aravicl2/galaxy.png"), 
                side: THREE.BackSide
              })
            );
    threeworld.scene.add(background);
}

function randomisePositions()
{
  for (var i = 0 ; i < counter; i++)
  {
 	var  proposedLocation;	

  	do 
  	{
	 proposedLocation = new THREE.Vector3(randomintAtoB(-INNERPOS, INNERPOS), 	randomintAtoB(-INNERPOS, INNERPOS),	randomintAtoB(-INNERPOS, INNERPOS));
 	}
  	while (collision(proposedLocation, i));
	PLANETS[i].position.copy(proposedLocation);
  }
}

function collision (proposedMove, p)
{
 for (var i = 0 ; i < counter; i++)
 {
   if (i != p)
   {
    	var d = dist (proposedMove, i);
    	if (d < MIN_DISTANCE)			 
	{
	 return true;		 
	}
   }
 }

 return false;
}

function dist(proposedMove, i)
{
 return ((PLANETS[i].position).distanceTo (proposedMove));
}

function drawPlanets()
{
    for(var i = 0; i < counter; i++)
    {
        threeworld.scene.add(PLANETS[i]);
    }
    randomisePositions();
}

function spin() // spin the planets
{
    var time = clock.getElapsedTime();
    for(var i = 0; i < counter; i++)
    {
        PLANETS[i].rotation.set((time * SPINSPEED), (time * SPINSPEED), (time * SPINSPEED));
    }
}

function randomfloatAtoB ( A, B )			 
{
 return ( A + ( Math.random() * (B-A) ) );
}

function randomintAtoB ( A, B )			 
{
 return  ( Math.round ( randomfloatAtoB ( A, B ) ) );
}

function initParticles()
{
    particleCount = 1000;
    particles = new THREE.Geometry();
    pMaterial = new THREE.PointsMaterial({color: 0xffffff, size: 100, 
                blending: THREE.AdditiveBlending,
                map: THREE.ImageUtils.loadTexture("/uploads/aravicl2/star.png"),
                transparent: true
    });
    
    for(var i = 0; i < particleCount; i++)
    {
        var x = randomintAtoB(-5000, 5000);
        var y = randomintAtoB(-5000, 5000);
        var z = randomintAtoB(-5000, 5000);
        particle = new THREE.Vector3(x, y, z);
        particles.vertices.push(particle);
    }
    
    particleSystem = new THREE.Points(particles, pMaterial);
    particleSystem.sortParticles = true;
    threeworld.scene.add(particleSystem);
}

function initRedStars()
{

        redCount = randomintAtoB(0, 15);
        redParticles = new THREE.Geometry();
        redMaterial = new THREE.PointsMaterial({color: 0xffffff, size: 700, 
                    map: THREE.ImageUtils.loadTexture("/uploads/aravicl2/redstar.jpg"),
                    blending: THREE.AdditiveBlending,
                    transparent: true
        });
        
        for(var i = 0; i < redCount; i++)
        {
            var x = randomintAtoB(-5000, 5000);
            var y = randomintAtoB(-5000, 5000);
            var z = randomintAtoB(-5000, 5000);
    
            var redStar = new THREE.Vector3(x, y, z);
            redParticles.vertices.push(redStar);
            
        }
        
        reds = new THREE.Points(redParticles, redMaterial);
        reds.sortParticles = true;
        threeworld.scene.add(reds);
}


function moveParticles()
{
    particleSystem.rotation.y += 0.01;
    var pCount = particleCount;
    while(pCount--)
    {
        var particle = particles.vertices[pCount];
        particle.y -= randomintAtoB(-5000, 5000);
        particle.x -= randomintAtoB(-5000, 5000);
        particle.y -= randomintAtoB(-5000, 5000);
    }
}

function moveRedStars()
{
    reds.rotation.y += 0.2;
    var pCount = redCount;
    while(pCount--)
    {
        var particle = redParticles.vertices[pCount];
        particle.y -= randomintAtoB(-5000, 5000);
        particle.x -= randomintAtoB(-5000, 5000);
        particle.y -= randomintAtoB(-5000, 5000);
    }
}

function writeInstructions()
{
    var instructions = "<font size=5>Quick! Count the <font color=red>red</font> stars. <br>You have 10 seconds</font><br><font size=5>Timer: " + Math.round(timer.getElapsedTime()) +"</font>";
     $("#user_span3").html(instructions);
}

function options()
{
    /* place random numbers and answers into option for user */
        messages = new Array(4);
        messages[randomintAtoB(0,3)] = redCount;
        for(var i = 0; i < messages.length; i++)
        {
            // make sure there is no duplication
            var random = randomintAtoB(0, 15);
            if(messages[i] == null && random != redCount)
                messages[i] = random;
        }
        
        var message = "<font size=5>How many red stars did you see?<br> <B> A)</B>  " + messages[0] + "<br><B> B)</B> " + messages[1] + "<br><B> C)</B> " + messages[2] + "<br><B> D)</B> " + messages[3] + "</font>";
         $("#user_span3").html(message);

}

function takeAnswer(event)
{
    var code = event.keyCode;
    if(code == 65)
    {
        if(messages[0] == redCount)
        {
            win();
        }
        else
            loose();
    }
    
    if(code == 66)
    {
        if(messages[1] == redCount)
        {
            win();
        }
        else
            loose();
    }
    
    if(code == 67)
    {
        if(messages[2] == redCount)
        {
            win();
        }
        else
            loose();
    }
    
    if(code == 68)
    {
        if(messages[3] == redCount)
        {
            win();
        }
        else
            loose();
    }
}

function startClock()
{
    timer.start();
}

function win()
{
    var message = "<font color=green size=5> <B>Wooohooooo. You won. <br></B></font>The answer was: " + redCount;
     $("#user_span3").html(message);
     
	// put music element in one of the spans
  	var x = "<audio  id=theaudio  src=/uploads/aravicl2/yay.mp3   autoplay loop> </audio>" ;
  	$("#user_span1").html( x );
}

function loose()
{
    var message = "<font color=red size=5> <B>Booohooo. You lost. <br></B></font>The answer was: " + redCount;
     $("#user_span3").html(message);
     	var x = "<audio  id=theaudio  src=/uploads/aravicl2/boo.mp3   autoplay loop> </audio>" ;
  	$("#user_span1").html( x );
}

function World() { 


	this.endCondition;			 


this.newRun = function() 
{
  this.endCondition = false;
  if(true)
  {
      threeworld.init3d ( startRadiusConst, maxRadiusConst, SKYCOLOR  ); 
      initPlanets();
      addBackground();
      drawPlanets();
      initParticles();
      writeInstructions();
      initRedStars();
      startClock();
      initMusic();
  }
  
};

this.getState = function()
{
  return ( null );  
};


this.nextStep = function()		 
{
 var a = 4;

  spin();
  musicPlay();
  document.addEventListener( 'keyup', takeAnswer);
  if(true)
  {
      moveParticles();
      moveRedStars();
      writeInstructions();
  }
  if(timer.getElapsedTime() > 10)
  {
      this.endCondition = true;
      threeworld.scene.remove(reds);
      musicPause();
      timer.stop();
      options();
  }
};



this.endRun = function()
{

};


this.getScore = function()
{
 return 0;
};

}


function initMusic()
{
	// put music element in one of the spans
  	var x = "<audio  id=theaudio  src=/uploads/aravicl2/countdown.mp3   autoplay loop> </audio>" ;
  	$("#user_span1").html( x );
} 
 

function musicPlay()  
{
	// jQuery does not seem to parse pause() etc. so find the element the old way:
 	document.getElementById('theaudio').play();
}


function musicPause() 
{
 	document.getElementById('theaudio').pause();
}

function stopMusic()
{
    document.getElementById('theaudio').stop();
}