First check in of this app

callumprentice · Feb 18, 2015 · e980e6d · e980e6d
1 parent 0d0a788
commit e980e6d
Show file tree

Hide file tree

Showing 15 changed files with 36,407 additions and 0 deletions.
diff --git a/apps/flight_stream/css/style.css b/apps/flight_stream/css/style.css
@@ -0,0 +1,114 @@
+body {
+    background-color: #000;
+    font-family: 'PT Sans', 'Verdana','Open Sans', sans-serif;
+    margin: 0;
+    overflow: hidden;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -o-user-select: none;
+    user-select: none;
+}
+
+a {
+    color: orange;
+    text-decoration: none;
+}
+
+i {
+    color: #9a9;
+}
+
+strong {
+    color: #ff0;
+}
+
+h2 {
+    font-size: 1.1em;
+    color: #ff0;
+    margin: 0;
+    margin-bottom: 0px;
+    margin-top: 8px;
+}
+
+#title {
+    position: absolute;
+    left: 0px;
+    width: 100%;
+    top: 8px;
+    text-align: center;
+    z-index: 10;
+    font-size: 2.0em;
+    color: #0f0;
+    pointer-events: none;
+}
+
+#about_box_bkg {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+    overflow: hidden;
+    z-index: 1900;
+    background-color: rgba(100,100,100,0.6);
+    pointer-events: none;
+}
+
+#about_box {
+    width: 600px;
+    height: 400px;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    margin-left: -300px;
+    margin-top: -200px;
+    overflow: hidden;
+    padding: 18px;
+    color: #fff;
+    text-align: justify;
+    font-size: 1.1em;
+    z-index: 2000;
+    background-color: rgba(100,100,100,0.7);
+    border-radius: 10px;
+    border: black 2px solid;
+    pointer-events: none;
+}
+
+#loading_overlay {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    display: block;
+    background-color: #6666aa;
+    z-index: 3000;
+}
+
+#loading_overlay_img {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    margin-left: -200px;
+    margin-top: -200px;
+    display: block;
+    z-index: 3001;
+}
+
+#close_button_top {
+    position: absolute;
+    right: 8px;
+    top: 8px;
+    overflow: hidden;
+}
+
+.hide {
+    opacity: 0;
+    transition: opacity .5s ease-out;
+}
+
+.show {
+    opacity: 1;
+    transition: opacity .5s ease-out;
+}
diff --git a/apps/flight_stream/etc/add_airports.py b/apps/flight_stream/etc/add_airports.py
@@ -0,0 +1,22 @@
+import Image, ImageDraw
+
+flights = [
+# include data from flight_one.js here
+]
+
+image = Image.open("earth.png")
+
+draw = ImageDraw.Draw(image)
+
+r = 1
+for i in range(len(flights)):
+    x = ((flights[i][1] + 180.0)/360.0)*4096
+    y = 2048 - ((flights[i][0] + 90.0)/180.0)*2048
+    draw.ellipse((x-r, y-r, x+r, y+r), fill=(255,255,0))
+
+    x = ((flights[i][3] + 180.0)/360.0)*4096
+    y = 2048 - ((flights[i][2] + 90.0)/180.0)*2048
+    draw.ellipse((x-r, y-r, x+r, y+r), fill=(255,255,0))
+
+#image.show()
+image.save("/Users/callum/Desktop/earth_airports.png", "PNG")
diff --git a/apps/flight_stream/images/earth_airports.png b/apps/flight_stream/images/earth_airports.png
diff --git a/apps/flight_stream/images/elevation.jpg b/apps/flight_stream/images/elevation.jpg
diff --git a/apps/flight_stream/images/loading.svg b/apps/flight_stream/images/loading.svg
diff --git a/apps/flight_stream/images/point.png b/apps/flight_stream/images/point.png
diff --git a/apps/flight_stream/images/water.png b/apps/flight_stream/images/water.png
diff --git a/apps/flight_stream/index.html b/apps/flight_stream/index.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Flight Stream</title>
+        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+        <meta name="Generator" content="https://callum.com">
+        <link type="text/css" rel="stylesheet" href="css/style.css" />
+        <link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>
+        <script type="text/javascript" src="js/three.min.js"></script>
+        <script type="text/javascript" src="js/Detector.js"></script>
+        <script type="text/javascript" src="js/stats.min.js"></script>
+        <script type="text/javascript" src="js/TrackballControls.js"></script>
+        <script type="text/javascript" src="js/dat.gui.min.js"></script>
+        <script type="text/javascript" src="js/flights_one.js"></script>
+        <script type="text/javascript" src="js/app.js"></script>
+        <script type="x-shader/x-vertex" id="vertexshader">
+            attribute float size;
+            attribute vec3 customColor;
+
+            varying vec3 vColor;
+
+            void main() {
+                vColor = customColor;
+                vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
+                gl_PointSize = size * ( 300.0 / length( mvPosition.xyz ) );
+                gl_Position = projectionMatrix * mvPosition;
+            }
+        </script>
+        <script type="x-shader/x-fragment" id="fragmentshader">
+            uniform vec3 color;
+            uniform sampler2D texture;
+
+            varying vec3 vColor;
+
+            void main() {
+                gl_FragColor = vec4( color * vColor, 0.5 );
+                gl_FragColor = gl_FragColor * texture2D( texture, gl_PointCoord );
+            }
+        </script>
+    </head>
+    <body>
+        <script type="text/javascript">
+            document.addEventListener("DOMContentLoaded", start_app, false);
+        </script>
+        <div id="title">Flight Stream</div>
+        <div id="loading_overlay" class="hide"><img width="400" height="400" id="loading_overlay_img" src="images/loading.svg"></div>
+        <div id="about_box_bkg" class="hide"></div>
+        <div id="about_box" class="hide">
+        <h2>About</h2>
+        Experiment to map many of the airline flights between world airports. It's <strong>not</strong> showing real time positions (which would be amazing but I don't have that data) but rather, great-circle routes between major airports based on flight data from the <a href="http://openflights.org/data.html" target="_blank">Open Flights</a> site. As a visualization, I think it fails since there is so much data that around major airportse, it just blurs into a mess. Still, it was fun to do and looks kind of pretty (for some definition of pretty).
+        <h2>Credits</h2>
+        <ul>
+        <a href="http://www.shadedrelief.com/natural3/pages/extra.html" target="_blank">Globe textures</a> &#9679; <a href="http://threejs.org" target="_blank">Three.js</a> &#9679; <a href="http://www.movable-type.co.uk/scripts/latlong.html" target="_blank">Lat/long calculations</a>  &#9679; <a href="http://openflights.org/data.html" target="_blank">Airport/route data</a>
+        </ul>
+        <h2>Contact</h2>
+        Find my contact details and see more experiments <a href="http://callum.com#contact" target="_blank">here</a> - advice, suggestions and fixes appreciated.
+        <div id="close_button_top"><a href="#" onclick="show_about(false);">CLOSE</a></div>
+        </div>
+    </body>
+</html>
diff --git a/apps/flight_stream/js/Detector.js b/apps/flight_stream/js/Detector.js
@@ -0,0 +1,40 @@
+/**
+ * @author alteredq / http://alteredqualia.com/
+ * @author mr.doob / http://mrdoob.com/
+ */
+
+var Detector = {
+
+	canvas: !! window.CanvasRenderingContext2D,
+	webgl: ( function () { try { var canvas = document.createElement( 'canvas' ); return !! window.WebGLRenderingContext && ( canvas.getContext( 'webgl' ) || canvas.getContext( 'experimental-webgl' ) ); } catch( e ) { return false; } } )(),
+	workers: !! window.Worker,
+	fileapi: window.File && window.FileReader && window.FileList && window.Blob,
+
+	getWebGLErrorMessage: function () {
+
+		var element = document.createElement( 'div' );
+		element.className = 'webgl-error';
+
+		if ( !this.webgl ) {
+
+			element.innerHTML = window.WebGLRenderingContext ? [
+				'Your graphics card does not seem to support <a href="http://khronos.org/webgl/wiki/Getting_a_WebGL_Implementation">WebGL</a>.<br />',
+				'Find out how to get it <a href="http://get.webgl.org/">here</a>.'
+			].join( '\n' ) : [
+				'Your browser does not seem to support <a href="http://khronos.org/webgl/wiki/Getting_a_WebGL_Implementation">WebGL</a>.<br/>',
+				'Find out how to get it <a href="http://get.webgl.org/">here</a>.'
+			].join( '\n' );
+
+		}
+
+		return element;
+
+	},
+
+	addGetWebGLMessage: function (parent ) {
+
+		parent.appendChild( Detector.getWebGLErrorMessage() );
+
+	}
+
+};