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

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

什麼？你怎麼知道我在搖手機！

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

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

• x 軸：在螢幕平面上，往右為正值。
• y 軸：在螢幕平面上，往上為正值。
• z 軸：垂直於螢幕， 往上遠離為正值。

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

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

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

展場裝置有心電感應嗎？

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

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

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

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

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

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

用力搖就可以換音色？

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

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

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

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

最後，雖然會動的網頁一點都不稀奇，但還是跟大家介紹兩個好玩的 Javascript 函式庫：P5.js、Anime.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

臉書活動頁面請點此

駱 若瑀

還找不到稱呼自己的方式，暫時歸類為文字工作者——多數時候只寫給機器看。