iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 25
1

0. 今日工事

  • Creative Coding
  • p5.js 的誕生

1. Creative Coding

絕大多數的程式設計者是工程、科技的背景出身(相信 IT 邦裡面不是工程師的比例應該不到百分之一),社群對於「怎麼寫程式」也有一定的潛在規則。許多常常被提到的概念像是「可讀性」,例如 IT 邦上就有這麼一篇程式碼架構的可讀性)。文章中就強調許多可讀性高的優點,包括「容易維護及修改」、「不容易滋生程式碼的臭蟲」、幫助「推展集體程式碼共有(Collective code ownership)」等等。除此之外,模組化的觀念也深植在我們的腦海裡面,因為模組化使得工具開發的流程得以拆解,更能有效率的解決更大的問題,open source 的社群動力也有很大的一部分都建立在五花八門的模組化套件上。可是,為什麼非得要遵照這些準則呢?這樣的規範的目的尤其來由,就是因為寫程式所服務的對象是客戶、是專案管理人、是要求效率的自己。若是跳脫這樣的框架,為何寫程式不能只是單純的一種冥想狀態、思考過程、日記,就像是散文或是詩呢?當專案不為任何除了自己以外的人負責時,他可以更單純的回歸到一種介於機器與人之間的「語言」。

https://ithelp.ithome.com.tw/upload/images/20180113/20107828mvL0cyzQqm.jpg
圖片來源

創意編程(creative coding)是一種寫程式的方式論。強調的已經不是以工程上要解決問題的角度出發,而是帶出創造、創意與不設限的概念。當我今天想要做的就是很簡單的畫出許多圓,他們會根據奇怪的數學規則在畫面中亂跑。我再也不會回頭看這組原始碼,也不會要求別人閱讀,只是一種內心情感的表達。在這樣的情境下,我們需要可讀性嗎?需要模組化嗎?我的回答是「不一定」。

當然有時候需要,你才能更完整的表達所思,但是有時候真的不需要。過分的要求程式碼的品質就像是厚重的裝甲,他會保護你走過漫長的開發道路。但是當你要做的不是走在一條道路上,而是往高處跳躍或甚至是飛翔呢?裝甲就限制了你行動的自由。可能很多人會有的 Deja Vu,在某些場合上,也會有人對於「測試」提出類似的質疑。我認為這樣的觀點凸顯的並非那些觀念不重要或是測試不必要,而是強調不同的使用情境底下確實會有不需要的時候。

維基百科上,是這樣定義 Creative Coding 的:

Creative coding is a type of computer programming in which the goal is to create something expressive instead of something functional

重點就在於「表達」而非「功能」。

2. p5.js 的誕生

https://ithelp.ithome.com.tw/upload/images/20180113/20107828QNJwFrZgTV.png

世界上,不少人已經開始使用 Processing 來創作藝術、設計、資料視覺化等工作,假如你還不知道這是什麼,非常推薦花點時間學習一下。而 Lauren McCarthy 所創造的 p5.js 就是 Modern Web 當中的 Processing。

這樣的概念並非由我原創,事實上,四五年前 p5.js 剛誕生的時候在 Hacker News 就已經有了這樣的討論。InfoQ 上有篇評論也有一篇文章 "P5.js Brings Creative Coding to the Masses" 挑選出了其中有趣的討論,細看這個問與答之間的關係就可以大概理解為什麼我們需要 p5.js 來推進 creative coding:

Hacker News 上有有一個關於P5.js的討論,主题是“P5.js:當代Web的Processing”,Scrimmage 的 UI 總工程師Brad Greenwald評論:「我非常好奇,是什麼使得P5.js能夠比得上甚至優於D3.js、EaselJS、Three.js、 Raphaël、 KineticJS、Paper.js、Famo.us,或者是Impact等類庫?我理解它們的特性集並不完全相同,但是我並不明白它有什麼可以稱得上創新或是令人興奮的地方。」

你可能剛開始也會有這個疑問,對吧?那下面的回答說不定可以解答你的疑惑:

Wunderman的市場營銷和技術創新部門的高級副總裁Gui Ambros回應到:「讀 Daniel Shiffman 編寫的《自然法典》,你就會立刻明白 Processing(和 P5.js)與其他語言或者框架之間的不同。
正如Arduino為大家帶來了IoT和hardware hacking,同樣的,Processing也以創造性的代碼達到了同樣的影響力。有很多沒有經驗的核心開發者正在使用Processing創建數據可視化應用、交互裝置、遊戲和混合聲音、視覺、圖形的多媒體應用。
P5.js通過將畫布從一個單一的桌面應用擴展到瀏覽器的方式,開啟了Processing的強大能力。這是一個很大的進步,此外,Lauren圍繞該項目創建了一個社區,並且做得非常出色。」

除了最直接會想到的畫圖功能之外,p5.js 也提供基於 Web Audio API 所實作的聲音相關功能,這也是為什麼這個「CYBER の audio / VISUAL」系列要介紹他的主要原因。p5.js 可以透過非常簡單明瞭的 API 設計,馬上開始進行視覺、聲音的創作,對於很多非專業但對演算美學有興趣的創作者是非常棒的工具。若是純文字的解釋並不能讓你感受,說不定下面這個超棒的 demo 可以讓你眼睛一亮。

https://ithelp.ithome.com.tw/upload/images/20180113/20107828igzDokLKNB.png

4. 請愛CYBER の audio / VISUAL

p5.js 可能運算力不夠強大,也可能功能並不全面,但是以 creative coding 的方法論來看,他無疑是入手最棒、最快速的工具。就算是對於專業的程式設計師也一樣,當你只是想要畫幾個圖形的時候,沒人會想要先設定兩百行的 WebGL 環境對嗎?

今天沒有程式碼,但說的卻有點多。明天就來弄幾個好玩的 example 看看 p5.js 的可愛與溫柔吧!

關於作者

Vibert Thio

致力於將對於技術的深度研究轉化為新型態藝術創作的能量,並思考技術的拓展/侷限與其對於藝術論述/呈現的影響。專長為數位藝術創作、音像程式設計、互動設計,喜愛即時運算的臨場感與不可預測。


上一篇
§d24§ 庭院聲幾許?木魚的冥想! Tone.js 載入 mp3 咚咚作響!
下一篇
§d26§ 詩化源代碼!模擬駭客任務場景?p5.js 的可愛與實作!
系列文
aesthEtic,CYBERの audio / VISUAL,網頁中的聲音與影像研究30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言