Hyper-lapse podría definirse como la evolución de time-lapse y si bien la diferencia es pequeña el resultado es completamente distinto. Esta diferencia radica en que en el time-lapse la cámara se encuentra en un punto fijo, mientras que en un hyper-lapse la cámara se encuentra en movimiento, brindando un dinamismo a la escena que es realmente impresionante.
Hyperlapse.js es una pequeña biblioteca JavaScript que crea Hyper-lapse utilizando como imágenes las provistas por Google Street View, el resultado es simplemente genial.
Este proyecto es un experimento y si bien se puede utilizar en cualquier sitio web su finalidad es principalmente educativa, mostrando el potencial que tiene la herramienta de Google.
Las dependencias son mínimas: Three.js, una versión adaptada de GSVPano.js y finalmente Google Maps API v3.12.
Pueden ver una demostración online para entender más acerca de este proyecto.
Un pequeño video que muestra las cosas que podemos lograr con esta biblioteca:
También podemos crear nuestros propios hyper-lapse con el recorrido que nosotros deseemos. A continuación un ejemplo de uso.
var hyperlapse = new Hyperlapse(document.getElementById('pano'), { lookat: new google.maps.LatLng(37.81409525128964,-122.4775045005249), zoom: 1, use_lookat: true, elevation: 50 }); hyperlapse.onError = function(e) { console.log(e); }; hyperlapse.onRouteComplete = function(e) { hyperlapse.load(); }; hyperlapse.onLoadComplete = function(e) { hyperlapse.play(); }; // Google Maps API stuff here... var directions_service = new google.maps.DirectionsService(); var route = { request:{ origin: new google.maps.LatLng(37.816480000000006,-122.47825,37), destination: new google.maps.LatLng(37.81195,-122.47773000000001), 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); } });
A ver quienes se animan a jugar un poco con esta divertida biblioteca 😀
Web: Hyperlapse.js