tovi
/
traceroute-globe
1
0
Fork 0
Code Issues 0 Pull Requests 0 Projects 0 Releases 0 Wiki Activity
Browse Source

Initial commit

master
root 5 years ago
commit
97d3e0de67
10 changed files with 129486 additions and 0 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +49
    -0
      demo.html
  2. +230
    -0
      js/animations.js
  3. +1036
    -0
      js/external/orbital-controls.js
  4. +49623
    -0
      js/external/three.js
  5. +39165
    -0
      js/points.js
  6. +39165
    -0
      js/points.json
  7. +68
    -0
      js/tracepoints.js
  8. +58
    -0
      php/traceroute.php
  9. +9
    -0
      test.html
  10. +83
    -0
      thing.php

+ 49
- 0
demo.html View File

@ -0,0 +1,49 @@
<!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 tovijaeschke.xyz</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>

+ 230
- 0
js/animations.js View File

@ -0,0 +1,230 @@
function init() {
const container = document.getElementById('globe')
const canvas = container.getElementsByTagName('canvas')[0]
const width = 1000
const height = 800
const globeRadius = 200
const globeSegments = 64
const globeWidth = 4098 / 2
const globeHeight = 1968 / 2
const groups = {
globe: null,
globePoints: null,
tracePoints: null,
}
let data, scene, renderer, globe
const camera = {
object: null,
orbitControls: null,
angles: {
current: {
azimuthal: null,
polar: null,
},
target: {
azimuthal: null,
polar: null,
},
},
transition: {
current: 0,
target: 30,
},
}
function setup() {
scene = new THREE.Scene()
camera.object = new THREE.PerspectiveCamera(45, width / height, 1, 4000)
camera.object.position.z = -400
renderer = new THREE.WebGLRenderer({
canvas: canvas,
antialias: true,
opacity: 1,
})
renderer.setSize(width, height)
setupGlobe()
setupOrbitControls()
render()
}
setup()
function setupGlobe() {
const canvasSize = 128
const textureCanvas = document.createElement('canvas')
textureCanvas.width = canvasSize
textureCanvas.height = canvasSize
const canvasContext = textureCanvas.getContext('2d')
canvasContext.rect(0, 0, canvasSize, canvasSize)
const texture = new THREE.Texture(textureCanvas)
const geometry = new THREE.SphereGeometry(
globeRadius,
globeSegments,
globeSegments
)
const material = new THREE.MeshBasicMaterial({
map: texture,
transparent: true,
opacity: 0.5,
})
globe = new THREE.Mesh(geometry, material)
groups.globe = globe
groups.globe.name = 'Globe'
scene.add(groups.globe)
addPoints()
}
function addPoints() {
const mergedGeometry = new THREE.Geometry()
const pingGeometry = new THREE.SphereGeometry(0.5, 5, 5)
const material = new THREE.MeshBasicMaterial({
color: '#626177',
})
for (let point of pointdata.points) {
const pos = convertFlatCoordsToSphereCoords(point.x, point.y)
if (pos.x && pos.y && pos.z) {
pingGeometry.translate(pos.x, pos.y, pos.z)
mergedGeometry.merge(pingGeometry)
pingGeometry.translate(-pos.x, -pos.y, -pos.z)
}
}
const total = new THREE.Mesh(mergedGeometry, material)
groups.globePoints = total
groups.globePoints.name = 'Globe Points'
scene.add(groups.globePoints)
}
function addTracePoints(tracepoints) {
const mergedGeometry = new THREE.Geometry()
const pingGeometry = new THREE.SphereGeometry(1.9, 5, 5)
const material = new THREE.MeshBasicMaterial({
color: '#FF0000',
})
for (let point of tracepoints.points) {
const pos = convertLatLngToSphereCoords(point.x, point.y)
if (pos.x && pos.y && pos.z) {
pingGeometry.translate(pos.x, pos.y, pos.z)
mergedGeometry.merge(pingGeometry)
// Reset ping item position.
pingGeometry.translate(-pos.x, -pos.y, -pos.z)
}
}
const total = new THREE.Mesh(mergedGeometry, material)
groups.tracePoints = total
groups.tracePoints.name = 'Trace Points'
scene.add(groups.tracePoints)
groups.tracePoints.rotation.y = groups.globePoints.rotation.y
}
init.addTracePoints = addTracePoints;
function convertLatLngToSphereCoords(latitude, longitude) {
const phi = (latitude * Math.PI) / 180
const theta = ((longitude - 180) * Math.PI) / 180
const x = -(globeRadius + -1) * Math.cos(phi) * Math.cos(theta)
const y = (globeRadius + -1) * Math.sin(phi)
const z = (globeRadius + -1) * Math.cos(phi) * Math.sin(theta)
return new THREE.Vector3(x, y, z)
}
function convertFlatCoordsToSphereCoords(x, y) {
// Convert latitude and longitude on the 90/180 degree axis.
let latitude = ((x - globeWidth) / globeWidth) * -180
let longitude = ((y - globeHeight) / globeHeight) * -90
const radius = Math.cos(longitude) * globeRadius
const targetX = Math.cos(latitude) * radius
const targetY = Math.sin(longitude) * globeRadius
const targetZ = Math.sin(latitude) * radius
return {
x: targetX,
y: targetY,
z: targetZ,
}
}
function convertLatLngToFlatCoords(latitude, longitude) {
const x = Math.round((longitude + 180) * (globeWidth / 360)) * 2
const y = Math.round((-1 * latitude + 90) * (globeHeight / 180)) * 2
return { x, y }
}
function getProjectedPosition(
width,
height,
position,
contentWidth,
contentHeight
) {
position = position.clone()
var projected = position.project(camera.object)
return {
x: projected.x * width + width - contentWidth / 2,
}
}
function returnCameraAngles(x, y) {
let targetAzimuthalAngle = ((x - globeWidth) / globeWidth) * Math.PI
targetAzimuthalAngle = targetAzimuthalAngle + Math.PI / 2
let targetPolarAngle = (y / (globeHeight * 2)) * Math.PI
return {
azimuthal: targetAzimuthalAngle,
polar: targetPolarAngle,
}
}
function convertLatLngToSphereCoords(latitude, longitude) {
const phi = (latitude * Math.PI) / 180
const theta = ((longitude - 180) * Math.PI) / 180
const x = -(globeRadius + -1) * Math.cos(phi) * Math.cos(theta)
const y = (globeRadius + -1) * Math.sin(phi)
const z = (globeRadius + -1) * Math.cos(phi) * Math.sin(theta)
return new THREE.Vector3(x, y, z)
}
function easeInOutCubic(t) {
return t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1
}
function getRandomNumberBetween(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min)
}
function setupOrbitControls() {
camera.orbitControls = new THREE.OrbitControls(camera.object, canvas)
camera.orbitControls.enableKeys = false
camera.orbitControls.enablePan = false
camera.orbitControls.enableZoom = false
camera.orbitControls.enableDamping = false
camera.orbitControls.enableRotate = false
camera.object.position.z = -550
camera.orbitControls.update()
}
function render() {
renderer.render(scene, camera.object)
requestAnimationFrame(render)
groups.globePoints.rotation.y += 0.01
if (groups.tracePoints !== null) {
groups.tracePoints.rotation.y += 0.01
}
}
}

+ 1036
- 0
js/external/orbital-controls.js
File diff suppressed because it is too large
View File


+ 49623
- 0
js/external/three.js
File diff suppressed because it is too large
View File


+ 39165
- 0
js/points.js
File diff suppressed because it is too large
View File


+ 39165
- 0
js/points.json
File diff suppressed because it is too large
View File


+ 68
- 0
js/tracepoints.js View File

@ -0,0 +1,68 @@
var tracepoints = {
"points": [{
"x": -34.9287,
"y": 138.5986
}, {
"x": -37.8360,
"y": 144.9840
}, {
"x": -37.7471,
"y": 145.2070
}, {
"x": -33.8591,
"y": 151.2000
}, {
"x": -33.8591,
"y": 151.2000
}, {
"x": -33.8869,
"y": 151.2420
}, {
"x": 37.7510,
"y": -97.8220
}, {
"x": 37.7510,
"y": -97.8220
}, {
"x": 37.7510,
"y": -97.8220
}, {
"x": 37.7510,
"y": -97.8220
}, {
"x": 37.7510,
"y": -97.8220
}, {
"x": 37.7510,
"y": -97.8220
}, {
"x": 37.7510,
"y": -97.8220
}, {
"x": 37.7510,
"y": -97.8220
}, {
"x": 37.7510,
"y": -97.8220
}, {
"x": 37.7510,
"y": -97.8220
}, {
"x": 37.7510,
"y": -97.8220
}, {
"x": 37.7510,
"y": -97.8220
}, {
"x": 37.7510,
"y": -97.8220
}, {
"x": 37.7510,
"y": -97.8220
}, {
"x": 37.4043,
"y": -122.0750
}]
}

+ 58
- 0
php/traceroute.php View File

@ -0,0 +1,58 @@
<?php
function get_substring($string, $start, $end){
$string = ' ' . $string;
$ini = strpos($string, $start);
if ($ini == 0) return '';
$ini += strlen($start);
$len = strpos($string, $end, $ini) - $ini;
return substr($string, $ini, $len);
}
function ip2geo ($host) {
@$data = file_get_contents('http://ipinfo.io/'.$host);
if ($data) {
$data = json_decode($data);
return $data->loc;
} else {
return "";
}
}
$data = array("points" => array());
$traceroute = "";
function traceroute() {
global $data, $traceroute;
$traceroute = shell_exec("traceroute google.com");
$first = true;
foreach(preg_split("/((\r?\n)|(\r\n?))/", $traceroute) as $line){
if ($first) {
$first = false;
continue;
}
$ipgeo = explode(",", ip2geo(get_substring($line, "(", ")")));
$coordinates = array('x' => $ipgeo[0], 'y' => $ipgeo[1]);
array_push($data['points'], $coordinates);
}
}
function raw_output() {
global $traceroute;
echo json_encode($traceroute);
}
function json_output() {
global $data;
echo json_encode($data);
}
?>

+ 9
- 0
test.html View File

@ -0,0 +1,9 @@
<html>
<body>
<p id="demo"></p>
<script>
console.log(<?php include "php/traceroute.php"; traceroute(); ?>);
</script>
</body>
</html>

+ 83
- 0
thing.php View File

@ -0,0 +1,83 @@
<?php
$data = "var tracepoints = {'points': [";
define ("SOL_IP", 0);
define ("IP_TTL", 2); // On OSX, use '4' instead of '2'.
$dest_url = "google.com";
$maximum_hops = 30;
$port = 33434;
function ip2geo ($host) {
global $argv;
// Get GeoIP info
@$data = file_get_contents('http://ipinfo.io/'.$host);
if ($data) {
$data = json_decode($data);
return $data->loc;
} else {
// An error has accourred
return "(No geo info found)";
}
}
$dest_addr = gethostbyname ($dest_url);
$ttl = 1;
while ($ttl < $maximum_hops) {
// Create ICMP and UDP sockets
$recv_socket = socket_create (AF_INET, SOCK_RAW, getprotobyname ('icmp'));
$send_socket = socket_create (AF_INET, SOCK_DGRAM, getprotobyname ('udp'));
// Set TTL to current lifetime
socket_set_option ($send_socket, SOL_IP, IP_TTL, $ttl);
// Bind receiving ICMP socket to default IP (no port needed since it's ICMP)
socket_bind ($recv_socket, 0, 0);
// Save the current time for roundtrip calculation
$t1 = microtime (true);
// Send a zero sized UDP packet towards the destination
socket_sendto ($send_socket, "", 0, 0, $dest_addr, $port);
// Wait for an event to occur on the socket or timeout after 5 seconds. This will take care of the
// hanging when no data is received (packet is dropped silently for example)
$r = array ($recv_socket);
$w = $e = array ();
socket_select ($r, $w, $e, 5, 0);
// Nothing to read, which means a timeout has occurred.
if (count ($r)) {
// Receive data from socket (and fetch destination address from where this data was found)
socket_recvfrom ($recv_socket, $buf, 512, 0, $recv_addr, $recv_port);
$recv_geo = ip2geo ($recv_addr);
$recv_geo_split = explode(",", $recv_geo);
$data .= sprintf("{'x':%s,'y':%s},", $recv_geo_split[0], $recv_geo_split[1]);
}
socket_close ($recv_socket);
socket_close ($send_socket);
$ttl++;
if ($recv_addr == $dest_addr) break;
}
$data = substr($data, 0, -1) . "]}";
printf ("%s\n", $data);
$fp = fopen('traceroute.js', 'w');
fwrite($fp, json_encode($data));
fclose($fp);
?>

Write Preview
Loading…
Cancel
Save