Untitled

This is what's on the server side of things, as although you can view the source from most browsers, you can't exactly see the stuff that is changed by the PHP server.

The following is to be saved as a php file. You must have PHP and MySQL if you're going to be running this from your own server.

You also will need the libraries you see at the beginning of the first document if you're going to be using them yourself. They're freely available; google should be able to help.


<html>
<head>
	<title>WebGL Test</title>
</head>
<body bgcolor=#000000>
<?php echo 'Why hello there~'; ?>

<div id="container"></div>

<script type="text/javascript" src="Three.js"></script>
<script type="text/javascript" src="RequestAnimationFrame.js"></script>
<script type="text/javascript" src="Stats.js"></script>
<script type="text/javascript" src="prototype.js"></script>

<div id="main-code">

<script type="text/javascript">

var container, stats;
var camera, scene, renderer, controls, clock;
var particles, material = [], group, i;
var mouse = { x: 0, y: 0 };
var keypress = 0;
var keyhold = 0;
var mousemove = 0;
var currentlyPressedKeys = {};
var me;

init();
animate();

function init() {

	clock = new THREE.Clock()

	container = document.getElementById( 'container' );

	scene = new THREE.Scene();
	scene.fog = new THREE.FogExp2( 0xffffff, 0.002 );

	camera = new THREE.Camera( 50, window.innerWidth / window.innerHeight, 1, 500 );
	camera.position.z = 200;

	controls = new THREE.FirstPersonControls( camera );

	controls.movementSpeed = 70;
	controls.lookSpeed = 0.05;
	controls.noFly = false;
	controls.lookVertical = true;

	me = Math.random();

	i = 0;

	var numMemories = 0;

	var memA = [], memB = [], memC = [], memInt = [];
	// DO PHP HERE


	<?php

		$con = mysql_connect("localhost","root","mspl@l5ltOK");
		if (!$con) { die('Error Of Sadness'); }

		mysql_select_db("memories", $con);

		//echo 'numMemories = ';

		//$sqlStuff = mysql_fetch_array(mysql_query("SELECT COUNT(*) FROM data;"));

		//echo $sqlStuff[0];

		$random_rows = mysql_query("SELECT * FROM data ORDER BY rand() LIMIT 20;");

		$count = 0;


		while($row = mysql_fetch_array($random_rows)) {
			echo "memA[".$count."] = " . $row['mm'] . " % 30;\n" .
				"memB[".$count."] = " . $row['mm'] . " % 100;\n" .
				"memC[".$count."] = (" . $row['mm'] . " % 3000) / 1000.0;\n" .
				"memInt[".$count."] = " . $row['mm'] . " % 100000;\n";

			$count = $count + 1;
  		}

		echo "numMemories = " . $count . ";\n\n";

		mysql_close($con);
	?>


	var myCounter = 0;
	while(numMemories > 0) {


		// MOVE THINGS

		// ALSO MORE PHP
		var x = 0.1, y = 0.1, z = 0.1;
		var a = memA[myCounter];
		var b = memB[myCounter];
		var c = memC[myCounter];
		var newX = x, newY = y, newZ = z,
		interval = 0.005,
		minX = minY = minZ = Number.POSITIVE_INFINITY,
		maxX = maxY = maxZ = Number.NEGATIVE_INFINITY;

		var iterations = memInt[myCounter];

		myCounter++;
		numMemories--;

		cR = 0x110000;
		cG = 0x001100;
		cB = 0x000077;

		cRt = 0x000000;
		cGt = 0x00cc00;
		cBt = 0x000011;

		offX = Math.floor(Math.random() * (300 + 300 + 1) - 300);
		offY = Math.floor(Math.random() * (300 + 300 + 1) - 300);
		offZ = Math.floor(Math.random() * (100 + 100 + 1) - 100);


		iterationsPer = iterations / 50;
		var passes = 50;
		while (passes--) {

			// create the particle variables
			var particleMass = new THREE.Geometry();

			var iterations = iterationsPer;

			cR = cR + ((cRt- cR)/50.0);
			cG = cG + ((cGt- cG)/50.0);
			cB = cB + ((cBt- cB)/50.0);

			material[i] = new THREE.ParticleBasicMaterial( {
				blending: THREE.AdditiveBlending,
				color: cR + cG + cB,
				depthTest: false,
				transparent: true,
				size: 0.2
				} );

			while(iterations > 0) {


				iterations--;

				newX = x - (a * x) * interval + (a * y) * interval;
				newY = y + (b * x) * interval - y * interval - (z * x) * interval;
				newZ = z - (c * z) * interval + (x * y) * interval;

				minX = Math.min(minX, newX);
				minY = Math.min(minY, newY);
				minZ = Math.min(minZ, newZ);

				maxX = Math.max(maxX, newX);
				maxY = Math.max(maxY, newY);
				maxZ = Math.max(maxZ, newZ);


				particleMass.vertices.push(new THREE.Vertex(new THREE.Vector3(newX + offX, newY + offY, newZ - b + offZ)));
				x = newX, y = newY, z = newZ;
			}

			// create the particle system
			particles = new THREE.ParticleSystem( particleMass, material[i]);

			scene.add( particles );
			i++;
		}
	}


	renderer = new THREE.WebGLRenderer( );
	renderer.setSize( window.innerWidth, window.innerHeight );

	container.appendChild( renderer.domElement );

	stats = new Stats();
	stats.domElement.style.position = 'absolute';
	stats.domElement.style.top = '0px';
	container.appendChild( stats.domElement );

	var sendtimer=setTimeout("senddata()",1000);

}


function handleKeyDown(event) {
	if ((event.keyCode == 65 ||
	event.keyCode == 68 ||
	event.keyCode == 70 ||
	event.keyCode == 82 ||
	event.keyCode == 83 ||
	event.keyCode == 87) && !currentlyPressedKeys[event.keyCode]) {keypress++;}
	currentlyPressedKeys[event.keyCode] = true;
}


function handleKeyUp(event) {
	currentlyPressedKeys[event.keyCode] = false;
}


function handleKeys() {
	if (currentlyPressedKeys[65]) {keyhold++;}
	if (currentlyPressedKeys[68]) {keyhold++;}
	if (currentlyPressedKeys[70]) {keyhold++;}
	if (currentlyPressedKeys[82]) {keyhold++;}
	if (currentlyPressedKeys[83]) {keyhold++;}
	if (currentlyPressedKeys[87]) {keyhold++;}
}

function handleMouseMove(event) {
	mousemove = mousemove + Math.abs(event.clientX) + Math.abs(event.clientY);
}

function animate() {
	requestAnimationFrame( animate );
	handleKeys();
	render();
	stats.update();
}

var start = new Date().getTime();

function render() {

	var time = new Date().getTime() - start;

	if ( particles ) {

		//  material.uniforms.dispX.value = Math.sin( time * 0.0001 ) * 250;
		//  material.uniforms.dispY.value = Math.sin( time * 0.00011 ) * 250;
		//  material.uniforms.dispZ.value = Math.sin( time * 0.00012 ) * 250;
		//  material.uniforms.amount.value = Math.sin( time * 0.0001 ) * 10;

		particles.rotation.y = mouse.x * 0.005;
		particles.rotation.z = mouse.y * 0.005;
	}

	var delta = clock.getDelta();

	controls.update(delta);

	document.onmousemove = handleMouseMove;
	document.onkeydown = handleKeyDown;
	document.onkeyup = handleKeyUp;

	renderer.render( scene, camera );

}

function senddata() {
	new Ajax.Request("tracker.php",
		{
		method: 'post',
		postBody: 'me=' + me.toString() + '&keyhold=' + keyhold.toString() +
		'&keypress=' + keypress.toString()  +
		'&mousemove=' + mousemove.toString()
		});
	keyhold = 0;
	keypress = 0;
	mousemove = 0;
	var sendtimer=setTimeout("senddata()",1000);
}

</script>
</div>
</body>
</html>


The following is to be saved as tracker.php, and stored on the server in the same location as the above file. As with above, you must have PHP and MySQL if you're going to be running this yourself.


<?php
$part1 = $_POST["me"];
$part2 = $_POST["keypress"];
$part3 = $_POST["keyhold"];
$part4 = $_POST["mousemove"];

$con = mysql_connect("localhost","root","removed");
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }

mysql_select_db("memories", $con);


if(mysql_num_rows(mysql_query("SELECT * FROM data WHERE who = '$part1'"))) {


mysql_query("UPDATE data SET tick = tick + 1, kp = kp + $part2, kh = kh + $part3, mm = mm + $part4 WHERE who = '$part1'");

}
else {
	mysql_query("INSERT INTO data (who, kp, kh, mm, tick) VALUES ('$part1', '$part2', '$part3', '$part4', '1')");
}

mysql_close($con);
?>