Last active
January 4, 2016 02:09
-
-
Save lovettbarron/8553224 to your computer and use it in GitHub Desktop.
Step through hyperlapse (decently high res). Left forward, right backwards.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Simple Example</title> | |
| <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> | |
| <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false" type="text/javascript"></script> | |
| <script src="js/canvas-toBlob.js"></script> | |
| <script src="js/FileSaver.js"></script> | |
| <script src="js/three.min.js"></script> | |
| <script src="js/GSVPano.js"></script> | |
| <script src="../src/Hyperlapse.js"></script> | |
| <style> | |
| div,body { | |
| padding: 0; | |
| margin: 0; | |
| } | |
| #pano { | |
| width: 100%; | |
| height: auto; | |
| padding: 0; | |
| } | |
| </style> | |
| <script> | |
| var hyperlapse; | |
| function init() { | |
| var path = [ | |
| { | |
| "lat": 42.359812, | |
| "lng": -71.093606 | |
| }, | |
| { | |
| "lat": 42.36292, | |
| "lng": -71.089486 | |
| }, | |
| { | |
| "lat": 42.362777, | |
| "lng": -71.087276 | |
| }, | |
| { | |
| "lat": 42.373114, | |
| "lng": -71.095172 | |
| }, | |
| { | |
| "lat": 42.376443, | |
| "lng": -71.10427 | |
| }, | |
| { | |
| "lat": 42.368342, | |
| "lng": -71.108647 | |
| } | |
| ]; | |
| var iter = 0; | |
| var frameNum = 0; | |
| var canvas, ctx; | |
| function setNewPosition() { | |
| iter = iter < path.length ? iter + 1 : 0; | |
| directions_service.route( | |
| { | |
| origin: new google.maps.LatLng(path[iter].lat,path[iter].lng), | |
| destination: new google.maps.LatLng(path[iter+1].lat,path[iter+1].lng), | |
| travelMode: google.maps.DirectionsTravelMode.DRIVING | |
| }, | |
| function(response, status) { | |
| if (status == google.maps.DirectionsStatus.OK) { | |
| hyperlapse.generate( {route:response} ); | |
| } else { | |
| console.log(status); | |
| } | |
| }); | |
| }; | |
| hyperlapse = new Hyperlapse(document.getElementById('pano'), { | |
| lookat: new google.maps.LatLng(path[iter+1].lat,path[iter+1].lng), | |
| width: 1280, | |
| height: 800, | |
| distance_between_points: 2, | |
| max_points: 200, | |
| zoom: 3, | |
| //use_lookat: true, | |
| elevation: 50 | |
| }); | |
| hyperlapse.onError = function(e) { | |
| console.log(e); | |
| }; | |
| hyperlapse.onRouteComplete = function(e) { | |
| console.log('onRouteComplete called', e) | |
| hyperlapse.load(); | |
| // setNewPosition() | |
| }; | |
| hyperlapse.onLoadComplete = function(e) { | |
| canvas = $('canvas')[0], ctx = canvas.getContext("2d"); | |
| console.log('onLoadComplete called', e) | |
| hyperlapse.setLookat(new google.maps.LatLng(path[iter+1].lat,path[iter+1].lng), true, function() { | |
| //hyperlapse.play(); | |
| }) | |
| }; | |
| hyperlapse.onFrame = function(e) { | |
| console.log("frame", e.position); | |
| console.log("length", hyperlapse.length()); | |
| // canvas.toBlob(function(blob) { | |
| // saveAs(blob, frameNum + ".png"); | |
| // frameNum+=1; | |
| // }); | |
| if(e.position == hyperlapse.length()-1) { | |
| console.log("HOLY FUCK HERE WE GO"); | |
| hyperlapse.pause(); | |
| setNewPosition(); | |
| } | |
| }; | |
| // Google Maps API stuff here... | |
| var directions_service = new google.maps.DirectionsService(); | |
| var route = { | |
| request:{ | |
| origin: new google.maps.LatLng(path[iter].lat,path[iter].lng), | |
| destination: new google.maps.LatLng(path[iter+1].lat,path[iter+1].lng), | |
| travelMode: google.maps.DirectionsTravelMode.DRIVING | |
| } | |
| }; | |
| directions_service.route(route.request, function(response, status) { | |
| if (status == google.maps.DirectionsStatus.OK) { | |
| hyperlapse.generate( {route:response} ); | |
| } else { | |
| console.log(status); | |
| } | |
| }); | |
| } | |
| $().ready(function() { | |
| $("body").keydown(function(e) { | |
| if(e.keyCode == 37) { // left | |
| hyperlapse.next(); | |
| } | |
| else if(e.keyCode == 39) { // right | |
| hyperlapse.prev(); | |
| } | |
| }); | |
| }); | |
| window.onload = init; | |
| </script> | |
| </head> | |
| <body> | |
| <div id="pano"></div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Also an attempt to integrate an auto file saver that didn't work because of webgl context. Will be taking another stab at it later.