李柳君

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

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

李柳君

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

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

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

1 Processing：一款開(kāi)源的編程語(yǔ)言

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

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

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

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

創(chuàng)意編程是在創(chuàng)造性的活動(dòng)中學(xué)習(xí)電腦程序設(shè)計(jì)，充分利用電腦程序構(gòu)建虛擬世界，在充分啟發(fā)和引導(dǎo)下，在解決問(wèn)題的過(guò)程中，主動(dòng)探索式地學(xué)習(xí)編程，這也是數(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ù)。簡(jiǎn)單地理解就是數(shù)字媒體必須有模塊化、自動(dòng)化、可變性、數(shù)據(jù)化和可編碼性。而這些正是創(chuàng)意編程的重要特點(diǎn)。

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

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

3.1 互動(dòng)圖形

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

圖1 互動(dòng)圖形

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

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

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

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

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

3.3 簡(jiǎn)化的代碼，并且能實(shí)現(xiàn)強(qiáng)大的圖形功能

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

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

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

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

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

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

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

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

3.4 與Arduino的互動(dòng)

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

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

3.5 聲音可視化

圖2 音頻文件的可視化

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

圖3 3D圖形

3.6 3D 圖形

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

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

4 Processing在創(chuàng)意編程教學(xué)過(guò)程中的應(yīng)用

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

學(xué)習(xí)Processing 的途徑：

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

size()函數(shù)決定的是整個(gè)程序的畫布大小，而畫布中的圖形（比如說(shuō)前面距離的斜線）應(yīng)該在畫面的哪個(gè)具體的位置。通常都會(huì)用常用的變量來(lái)代替具體的數(shù)字。因?yàn)楫嫴嫉拇笮∮械臅r(shí)候因?yàn)槠聊粚挾扔兄煌@現(xiàn)效果。

例如錯(cuò)誤范例：

size(800, 800);

ellipse(400, 400, 100, 100);

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

正確范例：

size(800, 800);

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

這樣的代碼指令，ellipse（圓）的位置就會(huì)永遠(yuǎn)在畫框正中央位置。

5 結(jié)語(yǔ)

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

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

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

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

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

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

2017-06-28