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