Finished

5 years ago · 44b04c1933
--- a/demo.html
+++ b/demo.html
@ -1,49 +0,0 @@
 <!DOCTYPE html>
 <html>
 	<head>
 		<style>
 			body {
 				background-color: black;
 			}
 			#globe, #traceout {
 				display: inline-block;
 				vertical-align: top;
 			}
 			#cmdout {
 				color: white;
 			}
 		</style>
 	</head>
 	<body>
 		<?php include "php/traceroute.php" ?>

 		<div id="globe">
 			<!-- This is where our renderer will attach the scene -->
 			<canvas></canvas>
 		</div>

 		<script src="js/points.js"></script>
 		<script src="js/external/three.js"></script>
 		<script src="js/external/orbital-controls.js"></script>
 		<script src="js/animations.js"></script>

 		<div id="traceout">
 			<button id="btnrun">Run Traceroute to google.com</button>
 			<p id="cmdout"></p>
 		</div>
 		<script>
 			init();

 			var runTraceroute = function() { 
 				var rawout = '<?php traceroute(); raw_output() ?>'; 
 				var tracepoints = '<?php json_output(); ?>';
 				document.getElementById('cmdout').innerHTML += rawout;
 				init.addTracePoints(JSON.parse(tracepoints));
 				document.getElementById("btnrun").style.display = "none";
 			};
 			document.getElementById ("btnrun").addEventListener ("click", runTraceroute, false);

 		</script>

 	</body>
 </html>
--- a/index.html
+++ b/index.html
@ -15,7 +15,7 @@
 		</style>
 	</head>
 	<body>
 		<?php include "php/traceroute.php" ?>
 		<!--<?php include "php/traceroute.php" ?>-->

 		<div id="globe">
 			<!-- This is where our renderer will attach the scene -->
@ -23,17 +23,23 @@
 		</div>

 		<script src="js/points.js"></script>
 		<script src="js/tracepoints.js"></script>
 		<script src="js/external/three.js"></script>
 		<script src="js/external/orbital-controls.js"></script>
 		<script src="js/animations.js"></script>

 		<div id="traceout">
 		<h2>Traceroute from Adelaide, SA to google.com</h2>
 			<!--
 			<button id="btnrun">Run Traceroute to google.com</button>
 			<p id="cmdout"></p>
 			-->
 		</div>
 		<!--
 		<script>
 			init();


 			var runTraceroute = function() { 
 				var rawout = '<?php traceroute(); raw_output() ?>'; 
 				var tracepoints = '<?php json_output(); ?>';
@ -44,6 +50,7 @@
 			document.getElementById ("btnrun").addEventListener ("click", runTraceroute, false);

 		</script>
 		-->

 	</body>
 </html>
--- a/js/animations.js
+++ b/js/animations.js
@ -7,7 +7,7 @@ function init() {
 	const globeSegments = 64
 	const globeWidth = 4098 / 2
 	const globeHeight = 1968 / 2
 	const traceSteps = 10;
 	const traceSteps = 100;

 	const groups = {
 		globe: null,
@ -84,6 +84,7 @@ function init() {
 		scene.add(groups.globe)

 		addPoints()
 		addTracePoints()
 	}

 	function addPoints() {
@ -110,8 +111,7 @@ function init() {
 	}


 	function addTracePoints(tracepoints) {
 		console.log(tracepoints);
 	function addTracePoints() {
 		const mergedGeometry = new THREE.Geometry()
 		const pingGeometry = new THREE.SphereGeometry(1.9, 5, 5)
 		const material = new THREE.MeshBasicMaterial({
@ -133,17 +133,12 @@ function init() {
 		groups.tracePoints.name = 'Trace Points'
 		scene.add(groups.tracePoints)
 		groups.tracePoints.rotation.y = groups.globePoints.rotation.y - 0.05
 		//drawTraceLines(tracepoints);
 		drawTraceLines(tracepoints);
 	}

 	/*
 	function calculateLine(a, b) {
 		var line = [];
 		if (a < b) {
 			var step = (a - b) / (traceSteps - 1);
 		} else {
 			var step = (b - a) / (traceSteps - 1);
 		}
 		var step = (b - a) / (traceSteps - 1);
 		var k;
 		for (k = 0; k < traceSteps ; k++) {
 			line.push(a + (step * k));
@ -153,7 +148,7 @@ function init() {

 	function drawTraceLines(tracepoints) {
 		const mergedGeometry = new THREE.Geometry()
 		const pingGeometry = new THREE.SphereGeometry(1.9, 5, 5)
 		const pingGeometry = new THREE.SphereGeometry(0.9, 5, 5)
 		const material = new THREE.MeshBasicMaterial({
 			color: '#FF4c4c',
 		})
@ -191,8 +186,6 @@ function init() {
 		groups.traceLines.rotation.y = groups.globePoints.rotation.y - 0.05
 	}

 	*/

 	init.addTracePoints = addTracePoints;


@ -290,11 +283,9 @@ function init() {
 		if (groups.tracePoints !== null) {
 			groups.tracePoints.rotation.y += 0.01
 		}
 		/*
 		if (groups.traceLines !== null) {
 			groups.traceLines.rotation.y += 0.01
 		}
 		*/
 	}
 }