Blog

【創意編程】《單向傳輸 One-Way Transmission》 技術實踐

P1030732

在台北國際藝術村展出的雙個展《聆聽的機器 Listening Machine》中,紀柏豪的作品《單向傳輸 One-Way Transmission》讓觀眾搖晃手機與作品互動、發出聲音,在展場當下創造出獨一無二的音樂流動。繼之前的作品介紹:列車上的流動音景——紀柏豪《單向傳輸 One-Way Transmission》,今天換我來簡單聊聊作品使用到的技術和概念吧!

什麼?你怎麼知道我在搖手機!

若你對手機的操作不陌生,應該可以想到一些搖晃手機的互動情境,像是 Line 的「搖一搖找朋友」、麥當勞的「搖搖鬧鐘」。這些互動的背後功臣是手機裡的一個小小晶片——「三軸加速度傳感器」,就連手機的計步功能也是透過它來完成的。

三軸加速器可以感測手機往三個方向移動的加速度:

  • x 軸:在螢幕平面上,往右為正值。
  • y 軸:在螢幕平面上,往上為正值。
  • z 軸:垂直於螢幕, 往上遠離為正值。
圖源:MDN web docs

透過讀取加速度的數值,便可以知道使用者對手機做了什麼操作。

這次的作品中,我們透過網頁提供的 API 得到使用者手機的動態資訊。由於限制搖晃手機的方向對於觀眾過於複雜,我們將三個軸綜合計算考量,得到觀眾手機的整體搖晃加速度。

想要進一步嘗試的人可以參考使用文件

展場裝置有心電感應嗎?

得到了手機的加速度數值後,要把這個加速度數值傳給展場的電腦,展場的裝置才會發出聲音。

WebSocket 是 HTML5 提供的一種通訊協定,允許用戶端與伺服端雙向傳播資料。我們先用實體的書信往來做解釋:

假設你(用戶端)要和公司A(伺服端)聯絡。因為公司A有固定的地址(在網路中地址稱為IP),你會先寄信給他,而公司A在收到你的信後,就能回信告知你他收到信了。這是在雙方能互相通信前,先打招呼(再通訊協定裡稱為交握)的過程。

打過招呼後,你們便能自由往來,你可以在任何時間寄信給公司A,公司A亦然。
而有一點可以注意的是,你和公司A都只需要把信放進郵箱、在信箱收信,並不需要了解信是怎麼被送到的。

圖源:PubNub.com

再次檢視這件作品,手機一連上互動網站時會先和展覽的伺服器進行「交握」。接著每當手機搖晃並得到加速度數值時,就能自由的傳送資料給伺服器了。

想要進一步了解與嘗試,可以參考 Node.js 的 Socket.io

用力搖就可以換音色?

有了手機的加速度數值,也能將手機的數值傳送到伺服端後,程式就可以根據得到的數值判斷要完成什麼事了!

發出聲音的判斷條件很簡單。若加速度超過某個數值,就會觸發一個聲響,若超過更高的數值、或是短時間內累計的加速度夠高,就會變換音色囉。

這件作品中對聲音的處理和判斷都是使用 Max 完成的,有興趣的人也可以訂閱本刊物,我們會不時有與 Max 相關的介紹。

手機的網頁怎麼動起來的?

最後,雖然會動的網頁一點都不稀奇,但還是跟大家介紹兩個好玩的 Javascript 函式庫:P5.jsAnime.js

P5.js 是來自程式語言繪圖軟體 Processing 的視覺化工具,他會在網頁中建立畫布,只要輸入相應的函式,就能在畫布上的不同地方,畫出不同顏色、形狀的圖形和線條。這件作品中,隨著手機揮動狀態而改變的黃色、白色、紅色線條,就是透過 P5.js 畫出來的。

網頁隨觀眾搖晃手機改變線條

Anime.js 則是負責做動畫的工具,他定義了許多動畫的參數:動畫漸變類別、執行時間、漸變曲線、重複次數等等。只要在 Javascript 裡面使用函式庫預先設定好的函式,網頁上的元素便能產生動畫。所以,作品網頁打開的操作指南是怎麼完成的?沒錯!就是使用了 Anime.js。

進入網頁的操作指導畫面

了解作品背後的技術後,對作品更好奇了嗎?快到台北國際藝術村親自體驗!

展覽資訊:

圖像裡可能有文字

● 展期 Exhibition Period/3.22(Fri.)-4.23(Tue.)
● 開放時間 Open Time/11:00-18:00 (週一休館 Closed on Monday)
● 地點 Venue/台北國際藝術村,百里廳 Taipei Artist Village, Barry Room(台北市北平東路7號)
● 藝術家 Artists/紀柏豪 CHI Po-Hao、王仲堃 WANG Chung-Kun

臉書活動頁面請點此

Write a comment