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

新媒體藝術家，邱偉豪也是其中一員，放棄程序員的穩(wěn)定高薪職業(yè)，只為探索創(chuàng)意的無限可能。

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

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

?Hello Meetup NO.77?

?分享嘉賓?

▼

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

個人作品網(wǎng)站：q-wh.com

---

01計算機背景自學設計跨界思維激起新創(chuàng)意偉豪一直探索科技與設計的可能性，在他的作品中，我們能感受到編程與設計、理性與感性的碰撞。他認為編程就是現(xiàn)代的畫筆，更精確、更有效率，如果你會使用它。自寫軟件，實現(xiàn)多屏幕互動Chameleon●Chameleon 是一個由偉豪自主開發(fā)的分布式高清圖形渲染系統(tǒng)，能夠在大規(guī)模超高分辨率多顯示器上，進行動態(tài)視覺計算，這也是偉豪的研究生畢業(yè)生項目。這種多屏幕的創(chuàng)作方式，不僅成本低，擁有無損分辨率，還可無限擴大，近年也受新媒體創(chuàng)作者的歡迎。在這個系統(tǒng)中，即便是有N臺分立的顯示單元(樹梅派+屏幕)，用起來也能和一臺電腦一樣，操作更為簡單，更容易運用到設計創(chuàng)作當中。

展示視頻 ?

從150000+照片中發(fā)現(xiàn)世界規(guī)律Exposure & Light●這是一個數(shù)據(jù)可視化項目，也是互動的裝置。里面的基本數(shù)據(jù)是，24小時內(nèi)在全球照片共享平臺 Flickr 上發(fā)布的20萬+張照片。偉豪通過設計算法，將照片按照拍攝時間和日期排列在世界地圖上。通過算法分析，將低曝光的圖像涂上藍色，隨著曝光的增加，逐漸向紅色、橙色、黃色遞進。每張圖片都會以矩形光環(huán)出現(xiàn)，觀眾只需觸摸屏幕，就可以查看不同時間和區(qū)域中具體的照片。數(shù)據(jù)可視化很有趣的一點，就是在可視化中發(fā)現(xiàn)出乎意料的規(guī)律。不同的曝光程度，可以反映出當天每個地區(qū)不同的光照程度，Fliker 在不同地區(qū)用戶的活躍以及使用時間等。

Exposure & Light 展示視頻 ?

02

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

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

交互性：作品與觀眾產(chǎn)生聯(lián)系，作品不再是預制作的，而是隨著觀眾的互動變化的。作者的創(chuàng)作與觀眾的參與共同成就最終的結(jié)果。

處理效率：計算機比人效率高，將重復性高的工作托付交給計算機，可以讓創(chuàng)作者專注在更有價值的地方。Flight Patterns，數(shù)據(jù)可視化全球飛機的飛行路線和時間，人工是做不到這種多量次的數(shù)據(jù)運算的。跨界能力：從編程的角度來看，媒介之間的界限幾乎不存在圖像、聲音、文字、機械運動都可以統(tǒng)一看作是數(shù)據(jù)。創(chuàng)意編程創(chuàng)作，歸根結(jié)底是數(shù)據(jù)的提取、計算與再現(xiàn)。虛擬圖像與現(xiàn)實環(huán)境的交互，并不存在界限

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

Box，用2D 投影實現(xiàn)3D效果，配合機械臂的使用，實現(xiàn)新的創(chuàng)作方式

在平面設計設計當中，還能實現(xiàn)自動排版、動態(tài)海報、參數(shù)化設計等。

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

03

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

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

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

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

同一組數(shù)據(jù)，有多少種視覺表達？

The Bach-Project

Tim Rodenbr?ker

?●

在 The?Bach-Project 中，Tim Rodenbr?ker?把巴赫的 《 C大調(diào)前奏曲》的樂譜，解譯為純數(shù)字結(jié)構(gòu)(數(shù)據(jù))，并且排列在二維網(wǎng)格中。

Tim?Rodenbroeker 通過角度分析、繪制線條等算法，將數(shù)字結(jié)構(gòu)轉(zhuǎn)化為視覺圖形，這也是巴赫計劃的原理。

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

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

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

如果只是把數(shù)字簡單地轉(zhuǎn)換角度，可以看到：同樣的原理，我們也可以在很多藝術作品中看到。藝術大師，池田亮司創(chuàng)作的 test pattern [N°12] ，通過改變同一組數(shù)據(jù)中線條的粗細程度，實現(xiàn)視覺形式的不同。所以，同樣是使用同一組數(shù)據(jù)，我們可以生成的視覺形式是多樣的，天馬行空的想法都能實現(xiàn)。

做一張動態(tài)海報，需要多少步？

Programming?Posters

Tim Rodenbr?ker

?●

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

• 使用的數(shù)據(jù)是什么？

• 數(shù)據(jù)是如何變成視覺的？

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

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

第一步：

使用的數(shù)據(jù)是什么？

大家可以看到，案例中圖形呈現(xiàn)規(guī)律波動的狀態(tài)，可以讓我們聯(lián)想到：Sin 函數(shù)，我們來驗證一下。

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

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

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

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

第二步：

數(shù)據(jù)如何變成視覺？

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

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

根據(jù) Y 軸軌跡運動

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

第三步：

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

以上兩步說的還是原理部分，當我們弄清楚原理后，怎樣才能作出結(jié)合圖形的視覺效果？我們嘗試以小球為中心的正方形，比喻為鏡頭，截取“a“字母的某個部分，我們可以得到：隱藏背后“a”字母，小球依然在x軸運動，“鏡頭”可以看到：十個小球同時在 X 或 Y 軸運動：

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

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

04

關于創(chuàng)作、Processing、教學的疑問

這里你都能找到答案

關于創(chuàng)作?

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

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

Q：Processing 和視覺傳達專業(yè)結(jié)合，能應用到那些方面呢？

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

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

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

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

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

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

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

?關于 Processing?

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

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

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

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

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

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

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

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

Machinery Interference，創(chuàng)作者：邱偉豪、羅捷亮

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

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

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

邱偉豪：市面上大部分的視覺創(chuàng)作分析拆解，找出解決方案，找出自己不足的地方，然后去網(wǎng)上搜索解決辦法。假如能認真跟著課程學習，能到 Processing 中級水平，并能舉一反三，繼續(xù)學習其他語言。Spindle，邱偉豪，數(shù)據(jù)可視化作品

最畢設?Hellomeetup本次邱老師分享會當然不止這些內(nèi)容

更多內(nèi)容，可報名回顧

●

編程的計算性思維，也是對創(chuàng)作思維的一種擴充，跨界的思維，往往激發(fā)出新的想法與創(chuàng)意。

最畢設為你定制了一門零基礎系統(tǒng)入門課，每節(jié)課除了扎實的編程基礎教學，還有創(chuàng)意思維的啟發(fā)，還會帶你一邊學習一邊完成完整的項目。

2 分鐘帶你了解本期課程

課程咨詢

購買入口

編輯：關

-

未經(jīng)授權(quán) 請勿轉(zhuǎn)載(不免費授權(quán))

歡迎指正和投稿：media@zuibishe.com

總結(jié)

以上是生活随笔為你收集整理的processing动态代码大全_做一张动态海报需要多少步？的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。