李柳君

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

Processing計算機語言及其程序設(shè)計思維在創(chuàng)意設(shè)計中的應用

李柳君

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

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

Processing；創(chuàng)意設(shè)計；創(chuàng)意編程；聲音可視化

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

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

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

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

2 Processing是創(chuàng)意編程的開發(fā)與教學利器

創(chuàng)意編程是在創(chuàng)造性的活動中學習電腦程序設(shè)計，充分利用電腦程序構(gòu)建虛擬世界，在充分啟發(fā)和引導下，在解決問題的過程中，主動探索式地學習編程，這也是數(shù)字媒體藝術(shù)發(fā)展到今天的必然的產(chǎn)物。那么，什么是數(shù)字媒體？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》定義了數(shù)字媒體藝術(shù)。簡單地理解就是數(shù)字媒體必須有模塊化、自動化、可變性、數(shù)據(jù)化和可編碼性。而這些正是創(chuàng)意編程的重要特點。

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

3 Processing在創(chuàng)意設(shè)計中應用的程序設(shè)計思維

3.1 互動圖形

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

圖1 互動圖形

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

Processing的誕生，可以被視為藝術(shù)設(shè)計領(lǐng)域圖形創(chuàng)作的一場重大的變革。利用Processing設(shè)計師可以將抽象的代碼數(shù)字轉(zhuǎn)化為生動的且有動態(tài)效果的視覺圖形。它不僅可以生成唯美的數(shù)據(jù)圖形，還能編寫出功能強大的圖形互動藝術(shù)作品。

3.2 數(shù)字的設(shè)計

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

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

3.3 簡化的代碼，并且能實現(xiàn)強大的圖形功能

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

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

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

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

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

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

這兩個指令的區(qū)別：P3D還可以調(diào)整畫面明亮度（lighting）,質(zhì)感（texture）,材質(zhì)（materials）等。

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

3.4 與Arduino的互動

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

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

3.5 聲音可視化

圖2 音頻文件的可視化

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

圖3 3D圖形

3.6 3D 圖形

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

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

4 Processing在創(chuàng)意編程教學過程中的應用

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

學習Processing 的途徑：

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

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

例如錯誤范例：

size(800, 800);

ellipse(400, 400, 100, 100);

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

正確范例：

size(800, 800);

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

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

5 結(jié)語

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

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

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

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

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

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

2017-06-28