Hyperlapse.js - Cover

縮時攝影 ( Timelapse ) 的製作礦日費時,動態縮時 ( Hyperlapse ) 的製作更是麻煩,但是現在只要坐在家裡動動滑鼠就能做出不錯的 Hyperlapse 影片囉!這次為大家介紹 Hyperlapse.js ,一個利用 Google Street View 製作 Hyperlapse 效果的 JS 函式庫。

「Informotion」一詞在台灣還沒有流行起來,然而在國外早有這樣的作品,動態的資訊圖表 — 最著名的例子為 2007 年由 Röyksopp 所發表的「Remind Me」短片,整部影片穿插了許多的資訊圖表片段,同時也包含了大量的動畫運用。

不光是資訊圖表,資料視覺化也與動畫脫不了關係;同樣在 2007 年、 Hans Rosling 著名的 TED 演講展示了動態的泡泡圖如何用來解讀生育率、平均壽命與國家開發程度的關係。動畫永遠都是一個很值得思考、運用的傳播形式。

試想這個情境:我安排了家族的沖繩旅遊,決定要在當地租用休旅車做為移動手段;但日本的交通規則與台灣不同,右駕、靠左、不同的標誌等等,使我想要在出發前先了解當地的路況,以免到時手忙腳亂;我知道我的出發地與目的地,我會使用 Google Street View,但我發現在 Google Street View 上長距離移動相當的費力。為何沒有一個自動規畫行程的預覽服務?

japan

Hyperlapse.js 做的就是這件事。我們提供兩個座標點, Hyperlapse.js 藉由 Google Maps API 計算導航路徑、快取路徑上的街景圖、然後依序播放出來。參考 Hyperlapse.js 網站上的範例程式碼,我們逐行做說明:

  • 首先我們建立 Hyperlapse 物件,稍後會用來產生 Hyperlapse  效果
  // 建立 Hyperlapse 效果
  var hyperlapse = new Hyperlapse(document.getElementById('pano'), {
      lookat: new google.maps.LatLng(37.81409525128964,-122.4775045005249),
      zoom: 1,
      use_lookat: true,
      elevation: 50
  });
  // 一但讀取完成便立刻啟動
  hyperlapse.onRouteComplete = function(e) { hyperlapse.load(); };
  hyperlapse.onLoadComplete = function(e)  { hyperlapse.play(); };
  • 接著我們由 Google Maps API 取得一條路徑,傳給 Hyperlapse 物件
  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
  }};

  // 計算路徑
  (new google.maps.DirectionsService()).route(route.request, function(res, status) {
    hyperlapse.generate( {route:res} );
  });

上述程式碼 * 可以產生類似下圖的結果: ( 動態網頁截取成縮小後的 GIF 檔 )

使用即時線上編輯介面

雖然看起來效果不錯,但 Hyperlapse.js 畢竟是 JS 函式庫,需要寫到程式對一般人就是多了點門檻。沒關係,另一個衍生專案 — HyperlapseMB,Hyperlapse 的 Motion Blur 版 — 除了追加了動態模糊的效果之外,他也製作了一個視覺化的編輯器,我們不僅可以透過拖拉圖標來決定路徑起迄點,也可以很容易的設定移動速度、視線角度等等的參數。

下圖為透過該展示介面規劃從北投到汐止的路線,可以看到當前位置在國道一號高速公路上,也可以看到動態模糊的效果:

Hyperlapse.js - highway

上圖左方的小地圖可以讓我們透過拖動圖標來即時設定導航的起迄點,而右方的黑色儀表板則可以設定各種參數,包含:

  • distance_between – 每個 frame 之間的距離
  • fov – 視野 ( Field of View )
  • millis – 移動速度
  • offset & position – 視角

在下方也可以控制畫面的播放跟製作,產生 Hyperlapse 的方式也很簡單,當我們在左方的地圖決定好軌跡的起迄點之後,到右下方的控制板按下「generate」,接著等待中央資訊欄中的數字跑到結束,Hyperlapse 便會自動播放了。產生的結果可以透過連結分享給別人,有興趣的話可以點這個連結來看看結果如何;若開啟時只有一片黑,記得先點擊右方的「Play」鈕。若單純只想開啟編輯器自行製作,可以利用這個連結來開啟。

結語

託科技進步的福,越來越多不同的網路服務出現供我們使用,也有許多人前仆後繼的開發各種混搭使用的軟體、套件。當視覺化不光只是簡單的圖表元素與靜態的呈現時,動畫形式的作品也就變成一種值得認真衡量效果的做法。

舉例來說,當我們要製作交通狀況的視覺化時,像 Hyperlapse 這樣的產出也許可以做為全幅滿版的動態背景、亦或是即時反饋的街景預覽;對不同路段的數據做視覺化時,我們也可以搭配 Hyperlapse 在不同位置呈現不同的數據。

如果還不容易想像 Hyperlapse.js 所能做到的事,可以參考這個官方的示範影片,除了基本的動態縮時外,還可以看到各種不同的視覺效果:


當表現媒介開始充滿彈性,各種傳遞資訊的方式我們都應當可以考慮;像是動態的資訊圖表、資料視覺化,也就不是無法想像的事情了。像是 Hyperlapse.js 這樣的工具,你還能想到什麼方式搭配視覺化來運用嗎?

 

* 編按: 原始的 Hyperlapse.js 範例有兩個地方要注意;首先,我們要載入 GSVPano.js 、 Hyperlapse.js 、 three.js 與 Google Maps API ;其次,GSVPano.js 有一些地方需要修正,請參考這個網址中提到的改法。

 


Written by infographics.tw

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *