Hyper-lapse (time-lapse con movimiento) utilizando Google Street View

por .

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

Categorizado en: