Processing計算機語言及其程序設計思維在創意設計中的應用

李柳君

(溫州商學院藝術與設計學院，浙江 溫州 325035)

Processing計算機語言及其程序設計思維在創意設計中的應用

李柳君

(溫州商學院藝術與設計學院，浙江 溫州 325035)

目前國內的創意編程教學和科研方興未艾，授課的對象是數字媒體專業的學生。processing是一款適于圖形與動畫設計的開源性編程語言和開發平臺，通過對processing的教學和研究，使我們更直觀地了解互動藝術的學習和創作。從創意設計教學科研的角度出發，適當進行實際案例實現的技術性分析，將重點放在程序設計思維的整理構思和提煉，后期理論運用于實踐創作，設計出創意豐富的互動媒體案例。

Processing；創意設計；創意編程；聲音可視化

1 Processing：一款開源的編程語言

Processing是一款開源編程語言和環境，由美國麻省理工學院媒體實驗室( M.I.T.Media Laboratory)的Casey Reas與Ben Fry創立的一個專為設計師和藝術類學生學習和使用的編程開發語言，有為圖像、動畫交互使用這個開放源代碼的效用。這是一門新興的比較有發展前景的計算機程序語言，通過長期的研究不難發現Processing原本就是Java語言的衍生語言，當然也可以把它叫做P語言。那其他的開發軟件，如Openframework是基于C語言開發的圖形編程語言。

Processing 是一個免費的程序開發平臺，采用的是開源的編程語言，專門為電子交互設計和數字媒體藝術而創建發明的，Processing不但是非常優秀的可視化編程語言和開發環境，而且是使用開源技術實現的優秀的案例之一。作為一種源代碼可以任意獲取計算機程序語言，并允許用戶學習、修改、提高這款程序的質量，免費下載和使用，甚至可以修改Processing源碼，使它適合你的需求?？梢酝ㄟ^網站來分享你的項目和知識。例如：www.openprocessing.com。開源的另外一個重要的特征就是有相關開發的庫（library），這是新的概念。Processing 的語法規則是從Java的基礎上發展過來的，但使用了相對簡化的語法和規則，并在此基礎上增加了圖形和交互的特征，整合各種音頻視頻文件，因此這些庫大多以Java語言作為開發基礎?？梢哉{用大量的Java的庫（library）。如OpenGL、OpenAL、OpenCV、Minim、OpenKinect、Arduino、sound、video、keystone、oscP5……

Processing 不但可被科學家用來實現數據可視化，也可以被設計師、藝術家和那些對學習編程和可視化設計的人來使用和開發。由于文化和語言的不同，國內從事研究Processing程序開發的人并不多，目前國內高等院校已經開設Processing相關創意編程的課程也并不多。但是，在互動媒體藝術和數字媒體產業迅速發展的今天，進行創意編程課程的教學和研究，讓對編程感興趣的藝術學院的學生也能動手編寫代碼來實現自己的圖形創意，是非常具有現實意義的一件大事，值得為之去探索和研究。

2 Processing是創意編程的開發與教學利器

創意編程是在創造性的活動中學習電腦程序設計，充分利用電腦程序構建虛擬世界，在充分啟發和引導下，在解決問題的過程中，主動探索式地學習編程，這也是數字媒體藝術發展到今天的必然的產物。那么，什么是數字媒體？The list reduces all principles of new media to five: numerical repersentation, modularity, automation,variablity and cultural transcoding。［1］”Lev Manovich 的著作《The Language of New Media》定義了數字媒體藝術。簡單地理解就是數字媒體必須有模塊化、自動化、可變性、數據化和可編碼性。而這些正是創意編程的重要特點。

在數字媒體藝術中主要相關的交互圖形技術包括：計算機監控技術、語音交互技術、手寫識別技術、虛擬現實技術、計算機視覺技術、多通道人機交互技術等等。對于計算機視覺來說，“科學研究表明，人類80%的信息是通過視覺獲得的。讓計算機有類似于人類的視覺功能成為了眾多科學家的夢想，這個夢想正在逐步實現。目前的計算機視覺主要是采用攝像機代替人眼，計算機代替人。［2］”多通道人機交互技術的特點是：使用多個感覺和應用通道、在三維空間內直接操作、允許非精確的交互、交互具有雙向性、交互的隱含性。［3］”筆者認為，在創意編程的教學中，其學習方法是通過創造一個個互動圖形的案例程序來學習編程互動編程的新方法，并在編程的基礎上表達數字創意圖形。而Processing是對圖形設計師最方便的代碼編程開發平臺。不管你是學生、老師、設計師或交互設計師，利用Processing就能用最簡單直接的方式創造互動圖形，最直接的視覺形式讓你的想法通過P語言的編程實現，簡單易學，擴展庫非常多，在2017編程語言排行榜上位列第23。而且，你可以通過Processing與其他開發平臺以及擴展的硬件的創作、輸出、整合屬于你自己的互動圖形作品。

3 Processing在創意設計中應用的程序設計思維

3.1 互動圖形

通過學習Processing，學生不需要系統地學習編程語法知識，也不需要高等級的英語水平，便可通過幾行代碼創作出唯美的數字圖形以及圖形交互的作品。通過具體的代碼案例，僅僅寫幾行代碼，就能制作出跟隨鼠標畫線的互動圖形作品來（圖1）。用鼠標在畫布中實時變換的x，y軸的值，來實時地改變畫布中線條的長度和位置的變化。

圖1 互動圖形

當然Processing也支持3D渲染器。Processing渲染器是以默認2D模式運行，如果要在processing里使用3D渲染器，就需要在size函數中的第3個參數位置指定大寫的渲染器名稱，如：size(800,600,P3D);在通常人的眼里，編程技術是理工科的專業，被認為是枯燥乏味的編寫代碼的過程。

Processing的誕生，可以被視為藝術設計領域圖形創作的一場重大的變革。利用Processing設計師可以將抽象的代碼數字轉化為生動的且有動態效果的視覺圖形。它不僅可以生成唯美的數據圖形，還能編寫出功能強大的圖形互動藝術作品。

3.2 數字的設計

“數字的設計”（Design By Numbers），通過代碼數字來設計是Processing特有的設計方式。其主導的核心思想是通過編寫一行代碼，就會在計算機屏幕上添加一個相應生成的數字圖形，再增加幾行數字代碼并結合鼠標響應的圖形函數，實時生成圖形就能根據鼠標的移動發生相應的圖形變化。通過Processing編寫的這些代碼保存后，會生成草稿（Sketch）文件，文件格式為.pde。Processing的創建者一致認為，（Sketching）也就是草稿化是一種新型圖形創作的方法，方便而且快捷，可以讓設計師在很短時間內探索出更多的圖形創意和解決方案?！安莞濉币辉~的含義所強調的就是讓設計師或開發者能體會把計算機的顯示屏幕當作畫布來創作，就像我們在油畫布上作畫一樣。這也讓編程成為一種新的藝術表現形式。

“同樣在今天，完全強調藝術品的展示價值，成為一種對藝術品全新功能的創造?！薄邦愃七@種狀況，那時強調它的崇拜的絕對價值，它首先是一種宗教神示，只是到后來才被視為藝術品。[4]”《機械復制時代的藝術》這段話說明的是攝影藝術之所以可以成為藝術品的根本原因。我覺得同樣也適用于計算機生成的圖形。

3.3 簡化的代碼，并且能實現強大的圖形功能

Processing的語法是在Java語言的基礎上發展而來的，支持當前的Java語言基礎框架，不過在語法基礎結構上進行了簡化，并具有許多更符合圖像開發的設計改造。如基本的繪圖函數、填充顏色的函數、鼠標交互的函數、聲音函數、圖像函數、視頻處理函數等。

Processing也支持3D圖形的渲染，有P3D渲染器和OpenGL渲染器。Processing默認情況下以2D模渲染器下運行，如果需要使用3D渲染器，則需要在size（）函數中的第三個參數位置指定渲染模式，如size（w，h，P3D）或者size（w，h，P2D）。P3D是Processing內置的3D動畫渲染器，而P2D則以2D圖形渲染的形式存在。

在size()中增加一個變量如下

size(400, 400, P2D);這是普通2D渲染模式

size(400, 400, P3D);這是3D的渲染引擎模式

size(400, 400, PDF, "output.pdf");這是導出PDF格式的文件。

這兩個指令的區別：P3D還可以調整畫面明亮度（lighting）,質感（texture）,材質（materials）等。

“library”庫的形式是Processing獨有的，擴展和實現Processing本身其他方面的功能。除Processing自身的基本庫以外，還有將近200個非官方的擴展庫在Processing上的library的鏈接里下載安裝。這些擴展庫使Processing在音頻、圖形、視頻、kinect、網絡和pdf等在硬件和軟件開發的功能，甚至進入到了計算機視覺圖形、AR和VR等研究領域。下載和導入這些庫，就在Processing能夠實現讀寫更多種類的數據信息和處理。

3.4 與Arduino的互動

Arduino是開源電子硬件平臺，與Processing是相關的開發項目，二者有著相關聯的編程開發環境和相類似的程序語法結構。在Processing的開發環境中，范例程序提供了一些和Arduino通訊相關的互動圖形案例。Processing可以通過讀取Arduino的傳感器數據，然后把這些采集的數據實時地繪制在計算機屏幕上。這種計算機的信息數據通信不僅是相互關聯的，也可以用Processing程序創建的圖形界面作為操控界面，控制燈光、揚聲器、攝像頭、led、機電等設備。當然，其他支持串行通訊的硬件設備也都可以和Processing來實現互動圖形互動開發的效果。

Processing還有更多程序的開發優勢。如，其支持手機app的開發，同樣的程序文件可以輸出不同類型的文件格式，在不同硬件設備和開發環境中運行。而且正是因為開源而擁有大量的免費資源，也是Processing最重要的開發優勢之一。

3.5 聲音可視化

圖2 音頻文件的可視化

聲音可視化，是指一種以視覺為核心，以音樂數據文件為載體，將音樂的數據文件轉化成實時變換的動態圖形的研究。將純粹的聲音數字數據轉化為圖像的可視化的圖形研究，這是Processing特有的強項之一。下面的案例就是把一首MP3格式的音頻文件，通過Processing的程序進行圖形的可視化研究。

圖3 3D圖形

3.6 3D 圖形

Processing有非常強大的實時三維渲染功能，我們通過了解 Processing 所提供的 3D渲染器，將2維的平面圖形擴展到第三維。通常一個簡單的 3D程序，它使用sphere函數在繪圖窗口中創建一個三維的對象。顧名思義，sphere函數會在顯示畫面中創建一個球體。只需要給sphere指定一個參數大小就能夠創建球體（圖3）。通過spheredDetail()函數來設置球體表面的三角形面數，在這個案例中設置了mouseX/100的參數通過鼠標的x軸實時變化的數值來控制球體表面的三角形面數。當然,也可以添加新的旋轉rotate函數,這些函數允許您按一個指定方向的軸旋轉。rotateX圍繞x軸旋轉，rotateY圍繞x軸旋轉。旋轉的參數可以由特定軸上鼠標位置來進行互動。在這個案例中先讀取鼠標x軸的數值，然后通過除100.0的浮點數，來實現鼠標的交互。而Processing也提供了其他的一組函數，它們可以簡化這個編碼的操作。這里先通過另一個3D對象創建方法來演示其中一個sphere函數，與box函數相似，也可以使用box函數在顯示窗口中創建一個 3D立方體。box的參數表示了立方體的長寬高。

我們也可以通過pointLight的函數來創建一個光源，這個光源是由 pointLight 的6個參數來設定的。例如：pointLight(51, 102, 126, 35, 40,36);前3個參數定義了光線的顏色，后面3個參數定義的位置。directionalLight 函數支持將光線聚焦到一個特定方向上，并支持更多基于光線方向和角度變化的自然光。其他的函數如spotLight 函數可以更多地控制聚光燈。例如：除了光線顏色、位置和方向，還能夠控制 spotlight 錐體離心值和錐角。Processing 提供了更復雜的使用頂點創建對象的方法。形狀可以用這種方法創建，并能夠對它們進行修改。

4 Processing在創意編程教學過程中的應用

盡管整個課程只有48課時，但是學生每次課程都能用一天多的時間就做出了很棒的圖形作品。提到Processing就不能不提一下Processing與其他軟硬件的互動。了解這些，對于新媒體藝術的創作大有裨益。

學習Processing 的途徑：

在第一次課程里，我們會介紹常用的繪圖函數程序的基本結構，例如size()。

size()函數決定的是整個程序的畫布大小，而畫布中的圖形（比如說前面距離的斜線）應該在畫面的哪個具體的位置。通常都會用常用的變量來代替具體的數字。因為畫布的大小有的時候因為屏幕寬度有著不同顯現效果。

例如錯誤范例：

size(800, 800);

ellipse(400, 400, 100, 100);

如果按這樣輸入代碼指令，那么當size函數里的參數值產生變化的時候，ellipse(圓）還是在長度400寬度400的座標位置，就不再保持在畫框的正中央位置了。

正確范例：

size(800, 800);

ellipse(width/2, height/2, 100, 100);

這樣的代碼指令，ellipse（圓）的位置就會永遠在畫框正中央位置。

5 結語

在國內的各大院校里很多人都把Processing當作一個軟件來看，其實它是一種編程語言，只是它的開發環境也叫Processing。理論上來說可以用這樣的語言來做任何事情，如：數據可視化、音樂可視化、3D動畫、手機程序開發、網頁開發等等。Processing是一個最新的計算機科學與藝術跨界的產物，這也是值得我們繼續去研究和探索的價值所在。

[1] Lev Manovich.The Language of New Media [M].MIT Press，2002.

[2] 林迅.新媒體藝術[M].上海：上海交通大學出版社，2011.

[3] 同濟新媒體藝術國際中心.大型展示中的新媒體藝術[M].上海：同濟大學出版社，2010.

[4] 瓦爾特·本雅明.機械復制時代的藝術[M].李偉，郭東,譯.重慶:重慶出版社,2006.

李柳君（1983-），男，溫州商學院藝術與設計學院助教，碩士研究生。E-mail:676621918@qq.com

2017-06-28