p5.js 與《時間之花》的相遇

結合Processing的直觀,與跨平台的Javascript而誕生的p5.js:

《時間之花:即時生成性視覺化》p5.js版連結,點fullscreen可全螢幕觀看:http://www.pingyehli.com/p5/PingYeh_TimeFlowerP5_2018_Sound/

資訊視覺化的「即時性」是重要的,如何讓觀眾在觀看作品的時候,看見「正在發生」的狀態,是資訊視覺化作品的主要精神。過去Processing雖然是強大的開發平台,但Processing相當受限於執行環境的設置,例如:必須在電腦裡預先裝好編譯環境(Processing IDE)與函式庫(Libraries)才能正確執行程式。因此,一件Processing開發的資訊視覺化作品若要公開呈現給觀眾,就勢必要透過在場的電腦安裝與測試,才能達到「即時資訊視覺化」的經驗。也因此,大多數的觀賞者(例如:無法到場的觀眾),多半只能看到展覽後擷取螢幕畫面的「影片紀錄」,相對而言遜色許多。

如今網際網路已經成為人人獲取資訊、學習新知的空間,Javascript也因此成為最跨平台、跨地域的電腦語言,任何作品只要能運用Javascript來撰寫,就可以在任何時間與地點呈現,觀賞者只需要點擊連結,就可看到全世界皆統一的內容。p5.js 的誕生,就是承襲了當初Processing以Java為基礎的精神,由Lauren McCarthy所設計,NYU及Processing Foundation所維護,以Javascript作為語言,目標是讓藝術家、設計者能夠跨越平台、跨越地域的呈現作品,不受空間或時區的侷限。

花了一周的時間,我將《時間之花:即時生成性視覺化》也改寫為p5.js,成為隨時可以瀏覽的線上版本,觀眾無論在何時,都可以進來觀賞與互動,這個版本也使用了p5.sound函式庫,加入聲音,將時間數據即時轉換為頻率(Frequency)。

網頁瀏覽器如何成為藝術家的畫布?當作品=連結的時候,創意內容要如何進一步突破?未來的資料視覺化作品,應會再朝這個方向來進行。