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