processing動態代碼大全_做一張動態海報需要多少步？

人們習慣性地把程序員跟設計師分成兩種不同性質的人，好像程序員就不會有美感，設計師邏輯思維就一定會很弱，但最近幾年我們發現越來越多的程序員學設計，設計師學編程的跨界故事。

新媒體藝術家，邱偉豪也是其中一員，放棄程序員的穩定高薪職業，只為探索創意的無限可能。

本期分享會精彩回顧，除了經驗分享外，他還會用兩個案例向大家展現：只修改一行代碼，可以有多少種視覺呈現？做一張動態海報需要多少步？

?本期文章干貨滿滿，推薦大家閱讀收藏?

?Hello Meetup NO.77?

?分享嘉賓?

▼

目前在加州大學圣塔芭芭拉分校 Media Arts and Technology 專業讀 PhD (博士)學位。作品主要包括數據可視化，可交互視覺藝術，可交互裝置等。擁有計算機專業的本科背景，師從新媒體藝術先驅、古根海姆獎獲得者George Legrady。

個人作品網站：q-wh.com

01計算機背景自學設計跨界思維激起新創意偉豪一直探索科技與設計的可能性，在他的作品中，我們能感受到編程與設計、理性與感性的碰撞。他認為編程就是現代的畫筆，更精確、更有效率，如果你會使用它。自寫軟件，實現多屏幕互動Chameleon●

Chameleon 是一個由偉豪自主開發的分布式高清圖形渲染系統，能夠在大規模超高分辨率多顯示器上，進行動態視覺計算，這也是偉豪的研究生畢業生項目。這種多屏幕的創作方式，不僅成本低，擁有無損分辨率，還可無限擴大，近年也受新媒體創作者的歡迎。

在這個系統中，即便是有N臺分立的顯示單元(樹梅派+屏幕)，用起來也能和一臺電腦一樣，操作更為簡單，更容易運用到設計創作當中。

展示視頻 ?

從150000+照片中發現世界規律Exposure & Light●

這是一個數據可視化項目，也是互動的裝置。里面的基本數據是，24小時內在全球照片共享平臺 Flickr 上發布的20萬+張照片。偉豪通過設計算法，將照片按照拍攝時間和日期排列在世界地圖上。通過算法分析，將低曝光的圖像涂上藍色，隨著曝光的增加，逐漸向紅色、橙色、黃色遞進。

每張圖片都會以矩形光環出現，觀眾只需觸摸屏幕，就可以查看不同時間和區域中具體的照片。

數據可視化很有趣的一點，就是在可視化中發現出乎意料的規律。不同的曝光程度，可以反映出當天每個地區不同的光照程度，Fliker 在不同地區用戶的活躍以及使用時間等。

Exposure & Light 展示視頻 ?

編程不會自動讓你的作品酷炫作品做得好還是要靠設計很多同學會把：編程 =?酷炫的作品連接起來，但其實，偉豪認為編程不會自動讓你的作品酷炫，作品做得好不好，還是要靠創意和設計。

那究竟編程對于創作/設計會有什么幫助？偉豪通過自身的經歷，從四個部分向大家分享。

交互性：作品與觀眾產生聯系，作品不再是預制作的，而是隨著觀眾的互動變化的。作者的創作與觀眾的參與共同成就最終的結果。

處理效率：計算機比人效率高，將重復性高的工作托付交給計算機，可以讓創作者專注在更有價值的地方。

Flight Patterns，數據可視化全球飛機的飛行路線和時間，人工是做不到這種多量次的數據運算的。跨界能力：從編程的角度來看，媒介之間的界限幾乎不存在圖像、聲音、文字、機械運動都可以統一看作是數據。創意編程創作，歸根結底是數據的提取、計算與再現。

虛擬圖像與現實環境的交互，并不存在界限

自定義工具：創作者可以根據自己的需求，量身定制自己的工具。一方面可以提升創作的體驗，另一方面，工具的制作本身也是一種創作，往往一個新的工具會帯來一種新的創作形式以及一系列的新作品。

Box，用2D 投影實現3D效果，配合機械臂的使用，實現新的創作方式

在平面設計設計當中，還能實現自動排版、動態海報、參數化設計等。

不要狹隘的把編程視覺簡單理解成用編程去生成圖像，它是一種移植性很強的東西。如果你平時有一些奇奇怪怪的想法，編程可以幫你迅速的實踐你的想法。

只要學會編程原理學什么語言都快

相比視覺呈現的學習，偉豪認為學會編程原理，更重要。只要懂原理，學什么語言都快。

那么初學者應該怎樣入門創意編程？在偉豪看來，學習編程最主要的方式可以分為：案例學習、語言學習、思維學習，學習并不是一次性的，而是找到精髓，舉一反三，這也是本次課程我們所要跟大家強調的。

為此，偉豪向我們深入拆解了兩個案例：

同一組數據，有多少種視覺表達？

The Bach-Project

Tim Rodenbr?ker

?●

在 The?Bach-Project 中，Tim Rodenbr?ker?把巴赫的《 C大調前奏曲》的樂譜，解譯為純數字結構(數據)，并且排列在二維網格中。

Tim?Rodenbroeker 通過角度分析、繪制線條等算法，將數字結構轉化為視覺圖形，這也是巴赫計劃的原理。

接下來，我們嘗試使用同一組數據，賦予不同的視覺算法，會發生什么？如果單個數字表示圓的直徑，通過修改一行代碼，我們可以得到：

同樣還是那組數據，如果單個數據表示顏色的明暗，我們還可以得到：

如果把單個數據(0-6)，表示骰子的一面，“0”表示一個黑色的方格，就算變成這樣：

如果只是把數字簡單地轉換角度，可以看到：

同樣的原理，我們也可以在很多藝術作品中看到。藝術大師，池田亮司創作的 test pattern [N°12] ，通過改變同一組數據中線條的粗細程度，實現視覺形式的不同。

所以，同樣是使用同一組數據，我們可以生成的視覺形式是多樣的，天馬行空的想法都能實現。

做一張動態海報，需要多少步？

Programming?Posters

Tim Rodenbr?ker

?●

偉豪認為，當我們看見一個案例，首先需要想到的是：

使用的數據是什么？
數據是如何變成視覺的？
我需要用的怎樣的編程指令？

接下來我們通過三步，教大家如何理解、創作案例中的動態海報。

第一步：

使用的數據是什么？

大家可以看到，案例中圖形呈現規律波動的狀態，可以讓我們聯想到：Sin 函數，我們來驗證一下。

如果我們使用 Sin 函數控制小球的運動軌跡：

讓 Sin 函數的y軸坐標映射小球的直徑變化：

讓 Sin 函數，控制小球的x軸的運動軌跡變化：

以上可以看到，Sin函數，讓單個小球有多種運動的變化，好像慢慢有點苗頭了。

第二步：

數據如何變成視覺？

我們繼續用 Sin 函數試試看，就以上而言，我們同時控制10個小球的話：

小球根據 X 軸運動，因為十個小球運動狀態不一，每個小球之間就會有距離變化的效果。

根據 Y 軸軌跡運動

X+Y 軸運動，大家可以看到，這已經與案例中的視覺呈現(軌跡運動)很相似了，也就是說這是案例中動態海報背后的數據原型。

第三步：

我需要用怎樣的編程指令？

以上兩步說的還是原理部分，當我們弄清楚原理后，怎樣才能作出結合圖形的視覺效果？我們嘗試以小球為中心的正方形，比喻為鏡頭，截取“a“字母的某個部分，我們可以得到：

隱藏背后“a”字母，小球依然在x軸運動，“鏡頭”可以看到：

十個小球同時在 X 或 Y 軸運動：

所以，當十個小球同時在 X+Y 軸運動，這也是案例所呈現的基本視覺效果：

其實所有案例都可以使用以上的拆解方法，在基本原理上加入額外的算法呈現，可以讓圖形更富創造力。

關于創作、Processing、教學的疑問

這里你都能找到答案

關于創作?

Q：數據可視化在實際中的運用除了美以外，會運用在？

邱偉豪：數據可視化本身有藝術/創意方向，也有功能性強的。功能性的話，強調數據可視化一般數據量很大，而且可以根據數據的類型自定義視覺模型，達到最好的呈現效果。

Q：Processing 和視覺傳達專業結合，能應用到那些方面呢？

邱偉豪：如果是視覺傳達，那你可以做可交互的視覺設計、會比較符合當今的趨勢一點。也可以做一些學術上的研究，通過編程去分析視覺傳達。

邱偉豪作品之一，HSL Transformation：將2d圖像生成3d模型，也能將 3d 模型渲染成 2d 圖像

Q：編程創作是趨勢嗎？像現在用各種軟件做的平面作品，以后交互作品是不是會應用得更多呢？

邱偉豪：我覺得是趨勢，現在海報很多都拿C4D做了。也有交互的燈光箱，我覺得編程學習以后會讓你的設計如虎添翼，不是說要取代你的設計知識。

Q：考慮平面上的延伸以及入門難度等方面，processing 和 p5.js 哪個會更適合呢？這兩者最大的區別又是什么呢？

邱偉豪：processing 入門難度會更低一點。Processing 會和其他語言更相通一些，所以如果你還要學習其他的東西，processing 會更合適。如果你確定專攻網頁端，那 p5.js 適合你。

邱偉豪作品之一，interactive-bubble：泡泡互動體驗

?關于 Processing?

Q：Processing 所做出來的非交互性視角與 AE 相比有什么區別么？

邱偉豪：有區別 processing 是實時的，AE 是渲染的，交互性是最大優勢。當然你學會編程了可以再使用 Houdini、blender ，有時候作品呈現的結果會比 AE 好。

Q：是不是做裝置可以應用這個軟件？

邱偉豪：可以的。事實上很多裝置都是 Processing + Arduino，并且兩者的語法和界面很相似。

Q：Processing 可以結合 blender、c4d、zbrush 這些建模軟件嗎？

邱偉豪：都可以的，只要你懂得兩種軟件、那你就可以寫他們的連接代碼。

Q：processing 可以應用到移動端軟件上面嘛，比如說游戲？

邱偉豪：我建議是如果想做移動端，可以嘗試用網頁，也可以學習 Andriod 或者 IOS 開發，Openframeworks 和 IOS 是無縫連接。語法比 Processing 難一點。

Machinery Interference，創作者：邱偉豪、羅捷亮

互動體驗裝置，通過相機捕捉的觀眾的面孔，創造一個抽象的雕塑，裝置通過從真實世界的圖像中創造出一個虛擬的場景，模糊了真實與虛幻之間的界限。

關于課程?Q：課程中做的作品對于申請國外學校會有幫助嗎？邱偉豪：有幫助的。尤其是相關專業。這方面的學生比較少。如果你做的很對口申請很有幫助。Q：數學基礎不是很好怎么辦？邱偉豪：不需要太好的數學知識、目前只是用到了三角函數；課程中我還講了一下平拋運動呢，沒準比高中老師講的好哦。Q：剛入門編程的同學，會很糾結有那么多語言，到底學哪個好？邱偉豪：給大家的建議是，一定要學編程背后的思想，當你有了這種思想后，學任何語言都會很快。而 Processing 是設計師入門編程的很好的語言，文檔對初學者很友好，有問題查文檔就可以解決。而本期課程重點在于學習創意編程領域的基礎，你可以學習各種多媒體的數據表達和創意編程的思想，對于 Processing 來說，上完這門課程你可以達到中級的使用水平，接下來需要的是多做案例，持續提升。

Q：課程能教到什么程度？

邱偉豪：市面上大部分的視覺創作分析拆解，找出解決方案，找出自己不足的地方，然后去網上搜索解決辦法。假如能認真跟著課程學習，能到 Processing 中級水平，并能舉一反三，繼續學習其他語言。