Processing入门教程-Processing的“前世今生”
很早以前大概13、14年就通過清華大學(xué)付志勇教授了解到了Processing這個工具，起初只是初步了解并沒有下定決心學(xué)習(xí)（當(dāng)初資料太少了）。由于當(dāng)時只是初步的看了看，所以很多內(nèi)容和知識點(diǎn)都是一知半解的。雖然15年曾在B站做過幾個視頻教程，也在鄭州創(chuàng)客空間的公眾號發(fā)布過幾個圖文教程，但是回過頭來看，真的是錯誤一堆一堆，加上也沒有更完，現(xiàn)在我都感覺不滿意。
再加上從去年開始，越來越多的高校開始在藝術(shù)系開展Processing的課程，所以我決定再出一個Processing視頻和文字教程。這個全新的Processing教程，也可以說是督促我學(xué)習(xí)和理解的一個教程吧~這個系列我會講的特別詳細(xì)，可能廢話比較多。當(dāng)然以后我還是會像之前的Arduino教程一樣，出一個特別簡潔的示例教程。大家也可以多多留言和討論我這個Processing課程的內(nèi)容，讓我們一起共同學(xué)習(xí)進(jìn)步，廢話不多說我們開始吧~
目錄
什么是Processing
Processing的由來
Processing能做什么
數(shù)據(jù)可視化
生成藝術(shù)
互動藝術(shù)
第零步下載安裝
第一個程序
什么是Processing
既然你已經(jīng)點(diǎn)開了這個文章，我就暫且默認(rèn)你已經(jīng)對Processing有了一定的了解。不過為了照顧手滑點(diǎn)進(jìn)來一臉懵逼的同學(xué)，我在這里還是先簡單的講解一下什么是Processing！
從字面理解，Processing就是數(shù)據(jù)處理的意思。其實(shí)它是一個把編程語言和開發(fā)環(huán)境結(jié)合在一起的產(chǎn)物，誕生于2001年，是一種具有革命前瞻性的行星計算機(jī)語言，和C\C++、python、java等這些語言類似，只不過和這些給工程師、程序員設(shè)計的語言不同，它面向的是藝術(shù)家、設(shè)計師等藝術(shù)類的同學(xué)。所以，它的代碼不是很復(fù)雜，卻可以做出很多很多有意思的作品，比如數(shù)字藝術(shù)作品、數(shù)據(jù)可視化作品和互動多媒體藝術(shù)作品等。作為Arduino IDE的前身，它也非常易用，官方提供了大量的庫，比如串口、網(wǎng)絡(luò)、視頻、可視化、聲音、GUI、3D動畫等等。隨著JS、Python以及Ruby的流行，Processing逐漸延伸出了多種語言的版本，發(fā)展出如p5.js、Python.py、ruby-python等不版本。由于Processing的編程語言是Java為主，所以Processing天生就具有跨平臺的特點(diǎn)，它不僅支持Linux、Windows、MacOSX這三大平臺外目前還支持樹莓派、安卓等設(shè)備平臺。隨著目前瀏覽器都已經(jīng)支持HTML5,Processing目前也推出了自己的基于HTML5做開發(fā)的P5.js版本。當(dāng)然對我來說可能更喜歡的是Processing可以通過串口等很方便的與Arduino結(jié)合做出很多好玩的內(nèi)容。比如下圖這個隨處可見的雷達(dá)應(yīng)用就是非常出名的Processing與Arduino結(jié)合的作品。
這里引入一個之前的學(xué)生向我提問的對話：
學(xué)生問：“為啥不用Photoshop、Illustrator、Flash等這類專業(yè)的設(shè)計軟件，而用Processing呢？”
我答：“使用這類軟件時，很有可能在你還沒有察覺的情況下，自己就已經(jīng)陷入了這些企業(yè)設(shè)計的工具的功能限制里，你的想象力會局限在一個框架內(nèi)，如果你使用編程語言自己編寫，這樣不僅作品的內(nèi)容是藝術(shù)，編程的形式及創(chuàng)作過程也可以被認(rèn)為是一種藝術(shù)?！?/p>
當(dāng)然選擇Processing還有可能是因為它的便捷性，上面展示的這個效果用AE來做還是比較麻煩的，但是我用Processing的話，三分鐘就可以寫出這個代碼，并且使用起來也很方便。
其實(shí)我也不能特別準(zhǔn)確的告訴你什么是Processing，因為Processing太特殊了。它也是一個全新的“材料”，和雕塑家手中的木頭、石頭不同，它是全新的。從藝術(shù)角度來說，它是一種全新的媒介，與電影、攝像、繪畫這些傳統(tǒng)的媒介不同的是，它更加獨(dú)特，不僅可以生成動態(tài)表單、處理手勢、定義行為，還可以模擬自然系統(tǒng)以及整合其他各種媒介。
抽象動畫師和程序員Larry Cuba：“我的每一部電影都是在不同的系統(tǒng)中使用不同的編程語言制作出來的，一種編程語言能給予你表達(dá)一些想法的力量，但同時也限制了你表達(dá)其他想法的能力。”
Processing編程可以結(jié)合各種各樣的編程語言。Processing不一定需要你擅長編程、數(shù)學(xué)這些專業(yè)知識。只要你有想象力，就可以用它做出不同的內(nèi)容。它還可以和Arduino結(jié)合在一起做出很多有趣的交互裝置。另外，Processing的程序代碼是開放的，使用者可依照自己的需要自由裁剪出最合適的使用模式。Processing的應(yīng)用千變?nèi)f化，但你會看到它們都遵守開放原始碼的規(guī)定。我認(rèn)為Processing和Arduino一樣很適合藝術(shù)類研究生、本科甚至中小學(xué)生學(xué)習(xí)，而且很可能比現(xiàn)在我們大力推廣的Python還要適合。
感覺還是沒有能夠講清楚Processing到底是什么，能夠做什么。（可能也是我沒有完全了解吧！）還是在下文放一下我找到的Processing作品，雖然不知道你現(xiàn)在能不能理解什么是Processing，但我相信，隨著學(xué)習(xí)的深入，慢慢你就能夠了解什么是Processing了。
Processing的由來
首先，Processing是由Casey Reas與Ben Fry共同創(chuàng)造的。
(左Casey Reas和右Ben Fry在奧地利林茲電子藝術(shù)節(jié))
他們是麻省理工學(xué)院媒體實(shí)驗室旗下美學(xué)與運(yùn)算小組(Aesthetics & Computation Group)的成員。他們是受到當(dāng)時在媒體實(shí)驗室美學(xué)與計算小組任教的John Maeda開發(fā)的Design by Numbers語言啟發(fā)改進(jìn)創(chuàng)造的Processing。
(Design by Numbers界面)
(John Maeda作品《Infinity Wide》)
Casey Reas和Ben Fry創(chuàng)造Processing是為了讓使用編程做交互式圖形更容易，這主要受到Design By Numbers語言的影響。他們在2001年開始有了開發(fā)一個這樣的軟件的想法，他們計劃制作一種像畫草圖一樣容易的編程軟件，并且它能夠互動地全屏展示出來。之后，Processing經(jīng)歷了很長的發(fā)展過程，之后的幾年里推出了內(nèi)測版和公測版。從2008年11月1.0版本問世到今天，在全世界范圍內(nèi)，每天都有上萬人下載Processing。
(Casey Reas作品)
(Ben Fry作品)
Processing能做什么
我從網(wǎng)絡(luò)上找了一些Processing不同類型的例子大家可以看一看。
數(shù)據(jù)可視化
數(shù)據(jù)視覺化（Data Visualization）是一門對數(shù)據(jù)進(jìn)行視覺化表達(dá)的應(yīng)用學(xué)科，旨將各種屬性或包含各種變量的抽象數(shù)據(jù)轉(zhuǎn)化為具象的視覺圖像。數(shù)據(jù)視覺化的主要目的是通過圖形化手段進(jìn)行清晰、有效的信息傳遞。數(shù)據(jù)視覺化并不意味著為了功能而設(shè)計成無聊的功能性圖表，也不意味著是為了美學(xué)形式而設(shè)計成炫目華麗的畫面。為了有效地傳達(dá)信息，美學(xué)形式和功能需要齊頭并進(jìn)，通過對海量的復(fù)雜數(shù)據(jù)進(jìn)行分析，并以非常直觀的視覺手段進(jìn)行表達(dá)。然而，設(shè)計師常常無法取得美學(xué)形式和功能之間的平衡，以至于創(chuàng)造出一些華麗的可視化圖表，卻犧牲了信息的有效傳遞。
《New York talk exchange》這個作品可以用數(shù)據(jù)可視化的方式展示紐約與世界各大城市之間的數(shù)據(jù)交換。
《We feel fine》這個作品可以在網(wǎng)絡(luò)搜集所有包含“I feel”和“I am feeling”的句子然后記錄下來。
生成藝術(shù)
生成藝術(shù)（Generative Art）通過計算機(jī)體現(xiàn)了自然與人工的結(jié)合、隨機(jī)性與計劃性的統(tǒng)一，有望實(shí)現(xiàn)大批量個性化的生產(chǎn)、有計劃隨機(jī)運(yùn)作和非指定的仿真過程。在這一過程中，設(shè)計師只要設(shè)定生成藝術(shù)算法公式，然后交給計算機(jī)處理就可以了。但這一算法的特征是：最后生成的結(jié)果是設(shè)計師所無法預(yù)料的，并且同一算法的不同時間段運(yùn)算所產(chǎn)生的結(jié)果也是不同的，具有很強(qiáng)的隨機(jī)性。紐約大學(xué)的Philip Galanter解釋：“藝術(shù)家應(yīng)用計算機(jī)程序，或一系列自然語言規(guī)則，或一個機(jī)器，或其他發(fā)明物，產(chǎn)生出一個具有一定自控性的過程，該過程的直接或間接結(jié)果是一個完整的藝術(shù)品”。
《哥本哈根全球氣候大會logo》設(shè)計師可以在Processing中運(yùn)用算法公式編寫程序，再由計算機(jī)按照算法公式隨機(jī)“創(chuàng)作”出作品，算法在兩次運(yùn)算后生成的結(jié)果也不會完全一樣。哥本哈根氣候大會的標(biāo)志就是生成藝術(shù)作品，靜態(tài)圖形和動態(tài)視頻兩部分都在Processing中生成，代碼生成不斷交織的線條，象征地球環(huán)境與氣候的變化，視覺效果讓人耳目一新。
《Solar》是一首歌的視覺效果。
《ElectroPlastique》是他使用Processing創(chuàng)作的，是和音樂一同展現(xiàn)的，畫面由程序制定的規(guī)律生成有機(jī)形態(tài)。
《Happy Place》
互動藝術(shù)
互動藝術(shù)的最大特點(diǎn)是能夠讓觀眾參與其中，并感應(yīng)觀眾的行為和做出反應(yīng)，在當(dāng)今時代，互動藝術(shù)是和計算機(jī)技術(shù)結(jié)合的綜合系統(tǒng)。觀眾和機(jī)器之間的“對話”是雙向的、循環(huán)往復(fù)的，形成了一個信息交流的系統(tǒng)。
《Messa di Voce》它是將聲音與視覺相互結(jié)合的互動裝置。作品是兩個口技表演藝術(shù)家參與的現(xiàn)場表演，當(dāng)人發(fā)出聲音的時候，在屏幕上飛出小球或者水波，如同從人的嘴里傳出的一樣，現(xiàn)場效果非常奇妙。傳感器能精確捕捉到人發(fā)聲的位置，將人的聲音轉(zhuǎn)換為視覺元素，創(chuàng)作藝術(shù)家為Golan Levin和ZachLieberman。實(shí)施流程為：聲音-傳感器-控制器-程序-輸出-承載體。
《Sur la table》桌子上方安裝了攝像頭，可以捕捉到桌面上的物體色彩，當(dāng)觀眾把一些物品放置到桌面上時，攝像頭將影像傳輸給計算機(jī)，在Processing中將視頻按照很窄的范圍處理，輸出看到的畫面效果如同流水般運(yùn)動。當(dāng)觀眾移動物品時，產(chǎn)生的拉伸影像也會變動。
《Delay Mirror》是瑞典斯德哥爾摩互動設(shè)計學(xué)院一位學(xué)生的作品，作品構(gòu)建了一個虛擬的“鏡子”，由顯示屏、攝像頭、計算機(jī)等組成。與平常的鏡子不同的是，當(dāng)觀眾靠近鏡子的時候，所看到的不是即時出現(xiàn)的影像，而是3 秒鐘之前的樣子，觀眾感到很奇妙的超現(xiàn)實(shí)，似乎鏡子里是另外一個自己。這是由于用程序?qū)⑤斎氲挠跋裱訒r了，最后輸出到屏幕上。
第零步下載安裝
剛才舉了這么多例子。那么開始第零步，下載安裝Processing IDE吧！首先打開Processing的官網(wǎng)。https://Processing.org/在這里你可以點(diǎn)擊Download選擇下載普通版本，或者下載p5、android、樹莓派等其他版本。
在下載界面中可以根據(jù)你的操作系統(tǒng)下載最新版本。或者選擇Stable Releaes以前的穩(wěn)定版本下載。當(dāng)然你也可以選擇Pre-Releases未發(fā)布的測試版本超前體驗。當(dāng)然我建議你直接下載最新的普通版本就好了。具體怎么下載解壓安裝我就不再贅述。以后的教程目前以windows 10系統(tǒng)舉例（大家多打賞我就換mac）對了目前教程用的版本是3.5.4可能下一篇就換新的了我會及時更新大家注意。
解壓以后我們直接點(diǎn)擊Processing.exe就可以運(yùn)行Processing的開發(fā)環(huán)境（IDE）。對了（如果打開是英文的可以點(diǎn)擊File→Preferences→Language選擇中文然后點(diǎn)擊“ok”再重啟IDE即可。）
IDE的基本使用其實(shí)不用太講解，基本包含五個區(qū)域。我下面簡單講解了一下各個區(qū)域的內(nèi)容與功能。
菜單
菜單欄提供了基本上所有的功能。你打開、保存、導(dǎo)出、設(shè)置、幫助這些都在這里面。詳細(xì)重要功能以后我會慢慢講給大家。
工具欄
三角形圖標(biāo)：編譯代碼，打開顯示窗口，運(yùn)行程序
方形圖標(biāo)：終止運(yùn)行中的程序
最右邊“java”的地方是選擇不同的模式。比如目前是java模式、我還可以變成安卓或者其他模式。
文件管理標(biāo)簽
相當(dāng)于一個一個的程序列表（Processing稱之為草圖），每個程序會自動按照年+月+日+編號命名。
文件管理器
你寫程序的地方一般我們稱之為代碼編寫區(qū)，但是官方翻譯為文件管理器。
文本控制臺與消息區(qū)
在下面可以切換顯示程序信息（大小、錯誤等）也可以顯示println輸出的內(nèi)容。
第一個程序
認(rèn)識了基本的界面操作后，我們現(xiàn)在可以真正的開始Processing的學(xué)習(xí)了。為了有儀式感我們先寫一個最經(jīng)典的小程序。
所有語言的第一個程序《Hello,world》
不過，剛才那個程序貌似不能體現(xiàn)出Processing的特點(diǎn)。大家可以把這個程序抄一下，然后試著編譯運(yùn)行，看看會有什么效果呢？編寫好程序后點(diǎn)擊三角形運(yùn)行按鈕運(yùn)行。
void setup() {size(1080, 720);}void draw() {if (mousePressed) {fill(0);} else {fill(255);}ellipse(mouseX, mouseY, 80, 80);}如果你成功運(yùn)行了這個程序，你就會看到這樣的效果可以隨著你的鼠標(biāo)生成白色填充的圓形，當(dāng)你點(diǎn)擊鼠標(biāo)后顯示黑色填充圓形。
到此，恭喜你你已經(jīng)入門Processing的學(xué)習(xí)了。我們下節(jié)課將開始學(xué)習(xí)Processing世界基本的法則，同時開始學(xué)習(xí)基本的2D圖像。
參考資料：
[1]譚亮. Processing互動編程藝術(shù)[M]. 電子工業(yè)出版社, 2011.
[2]Casey Reas,Ben Fry. Processing語言權(quán)威指南[M]. 電子工業(yè)出版社, 2019.
總結(jié)
以上是生活随笔為你收集整理的Processing入门教程-Processing的“前世今生”的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【PC工具】常用USB转串口芯片CP21
- 下一篇： 逆向学习技术!拆解驱动器，学习布局走线技