作為一名交互設計師應該如何學習 Processing?


processing官網上有大量推薦書。我一定要提Daniel Shiffman的兩本書,因為實在太好了。

先說我看過的,第二本

此書簡直是我讀過所有技術書籍中的翹楚。從最最基本的物理運動講起,一步一步教你用代碼寫一個有自我意識的生態系統!而且,此書完全免費The Nature of Code(Donate plz)。讀此書一半,你已可以開發憤怒的小鳥,讀完全書,AI的大門已入。全書淺顯易懂(老外寫書一慣特點),結構緊湊。最重要的是,此書封面太棒了,一流平設水準,甩大部分技術類書籍封面數條街,甩國內各類書.....當時完全因為封面而讀,繼而愛上此書(不好意思跑題了)。

跑遠了,回來說基礎的。 Shiffman第一本書

不好意思。因為講的是代碼基礎,沒有看過。但是此書封面依然一流水準,紋理字體排版配色都恰到好處(不好意思又跑題了)。不過以第二本書Shiffman的寫作風格來看,一定是事無巨細,非常細緻的講解Processing的各個部分的基礎知識。強烈推薦題主以此書作為入門讀物。

另外國內貌似流行這本作為入門

沒有看過。但是被諸多人士推薦,應該值得一看吧。國內應該會有相關中文資源。封面也很不錯啊,processing感撲面而來(不過意思再次跑題)

最後,還要提一本。

是不是突然發現怎麼封面如此混亂。原因是,此書主題在於用數據生成視覺,此書封面是生成的,而且封面只是生成結果的一部分。(那些彩色線後面,連著更多內容呢)。此書主要就是各種視覺實例。由簡至繁,包含了許多絢麗實例的細緻說明和源碼,非常豐富,非常詳細。另外,開篇給了幾十個相關的藝術作品。

當然http://processing.org上論壇http://forum.processing.org/里藝術家、設計師、程序員們也都是非常熱心的,有問題儘管問。
另外OpenProcessing每天都會有大家上傳的作品。
最後,關注Vimeo的processing Group(需翻牆)https://vimeo.com/groups/processing

學習路線的話 Shiffman黃皮入門 + Generative Design,技術層面已可以假裝Visual Artist了.

另外,以前還翻過數據可是化的一本,O"Reilly的

感覺不像專門寫processing的,以processing為工具,某城市交通還是環境數據為例,講解各種可視化方法。假如項目設計可視化,可以以此本為參考,不厚。

至於Processing和Arduino的結合,我自己經驗有限,僅停留在官網文檔階段,就不添亂了。

最後,分形視覺方面,參考deviantART的分形組mandelbulb3d on deviantART以及MandelBulb 3D的論壇fractalforums.com

以上。


對交互設計不甚了解,主要從個人經驗談一下如何學Processing。與本題下其它幾位本身就是軟體工程相關領域出身的答主不同,我在學習Processing之前是完全沒有編程經驗的,所以上一句話里的經驗可以理解為」零基礎學Processing「的經驗。

首先,不藉助任何書籍和教程是完全可以自學Processing的。Processing的IDE里集成了很多例子(file/example),這些例子非常系統,覆蓋了Processing的幾乎個個方面,照著例子敲一遍,就能快速熟悉Processing。但此方法更適合有其它語言編程經驗的程序員,不適合零基礎學習者,原因有二:
1. 對於本來就不熟悉Processing的學習者來說,這就像在大霧裡走路,不知道學習的這些函數命令能用在何處,也不清楚自己位於整個學習過程的哪個階段。
2. 這些例子只是為了向你展示用法,所以例子本身很無趣。

然後,對於初學者,當然推薦跟著一本入門書籍來學啦。

我是看的這本書入的門:

這是一本不錯的入門書籍,深入淺出,從Processing的歷史開始講起,講到分形,物體運動,互動等,知識點覆蓋得全面而細緻。
我的評價:中規中矩的教科書。

學完上述這本《Processing-Creative Coding and Computational Art》入門之後,我選擇了Danial Shiffman的《The Nature of Code》進行進階學習,讀這本書的時候我跟本題下另一位答主葛振東的感覺一樣——寫的太好了。書中語言完全是生活語言,讀書過程彷彿就是跟鄰居家知心大哥哥聊天,輕鬆愉快。照著一本書寫得好,那麼該書作者的其它書也寫得好的慣例來推斷,Danial Shiffman寫的這本Processing入門書籍也錯不了:

寫這個答案之前我也特意試讀了這本書的幾個小節,試讀感受跟我之前的猜測差不太多:
語言輕鬆愉快(試讀感受),比方說該書開篇第一句話就是:
This book tells a story. It is a story of liberation.這本書講了一個故事,一個關於解放的故事。
知識點覆蓋全面(看該書目錄得到的結論)。

另外一本書是這本:

這本書的作者是Processing語言的開發者,所以權威性毋庸置疑。
這本書更像是一本Procssing的技術文檔,語言風格比較嚴謹(嚴肅?)。
我反正是拿這本書當字典用,遇到不會的地方時去這本書里查一下。
另外:這本書的內容順序也是由淺入深,所以也可以當教材。
但這本書有一個非常巨大的優勢:它有中文版。詳情可以去看本問題下另一個答主張靜(同時也是本書譯者)的答案。

綜上,上面三本入門書籍的共同優點是內容全面,深入淺出。
出於喜歡Shiffman語言風格的原因,我更傾向於推薦第二本《Learning Processing》當做零基礎入門自學教材。

另外一個答主推薦了這本書:

但我不推薦把這本書作為零基礎學習者的起步教材,從深入和淺出兩個方面看,它做得都不如上面三本書。
這本書最大的優點是:作者用Processing畫的畫(Generative Art)太漂亮了,是所有我看過的Processing相關書籍里最漂亮的。所以如果你的學習方向是Generative Art 一定要來這本書里來找找靈感。
我的評價:舉個不恰當的比喻,這本書更像是一個藝術家的作品集,外加該藝術家自述優秀設計作品後面的方法論。

其它幾本書:

這本書很薄,講的東西也非常基礎。大致翻過,這本書的定位應該是幫助Arduino學習者學習基本的Processing用法。
這本書一個很大的優勢是有中文版

國內作者寫的Processing入門教材貌似只有一本《Processing互動編程藝術》,我在書店粗略翻過,寫的不好,不推薦,也不上圖了。


最後說一下網站:
作品社區:在照著一本入門書學習的過程中常去社區看看別人作品找找靈感也對學習非常有促進作用,最常見的是OpenProcessing ,很多人把自己寫的作品傳上去,裡面有很多驚艷的作品,而且每個作品都能看到代碼,可以通過閱讀其他人的優秀代碼來提高自己。

交流論壇:學習過程中若是遇到問題,在Processing官網http://www.processing.org右上角搜索框里輸入你的問題,基本上都能找到答案,Processing社區發展了這麼多年,基本上你能遇到的問題都有人問過並答過。


除了排名第一的答案推薦的兩本Daniel Shiffman的書之外,最重要的還有這本書:

推薦幾個帶有實例和code的藝術家的站:
Complexification
http://zenbullets.com
Generative Art (AbandonedArt.org)
http://www.wblut.com/constructionsite/很重要的互動藝術project聚合站點:
CreativeApplications.Net
http://www.csismn.com/
http://eyeofestival.com/


好幾位高票答主都提到了Daniel Shiffman,我也是非常喜歡這哥們的風格!
看他在Youtube上的視頻都非常的逗逼,還有他的Coding Challenges欄目也很好玩,我第一次看一個人編程會看出緊張的電視劇感,也是6。

首先強烈推薦看他的YouTube頻道:https://www.youtube.com/channel/UCvjgXvBlbQiydffZU7m1_aw

為了方便大家我把他p5.js的Tutorial和Processing的Tutorial傳到Bilibili了:
http://www.bilibili.com/video/av7987273/

針對收藏控(比如我)們,我把視頻傳到百度網盤了:
https://pan.baidu.com/s/1bDgcn8

可能有的同學會問p5.js是什麼鬼,我來簡單介紹一下
首先看一下官網p5.js | home的介紹

Hello! p5.js is a JavaScript library that starts with the original goal of Processing, to make coding accessible for artists, designers, educators, and beginners, and reinterprets this for today"s web.

Using the original metaphor of a software sketchbook, p5.js has a full set of drawing functionality. However, you"re not limited to your drawing canvas, you can think of your whole browser page as your sketch! For this, p5.js has addon libraries that make it easy to interact with other HTML5 objects, including text, input, video, webcam, and sound.

p5.js is a new interpretation, not an emulation or port, and it is in active development. An official editing environment is coming soon, as well as many more features!

簡單翻譯一下核心內容:

p5.js是一個JavaScript庫,它的初衷和Processing是一致的,即讓藝術家、設計師、教育工作者和初學者能更容易地接觸編程,並重新詮釋今天的互聯網。
p5.js有著完整的圖形繪製功能,然而p5.js並不僅僅局限於繪製圖形,你還可以將整個瀏覽器都想像成你的畫布。對於此,p5.js有著額外的庫讓你可以輕鬆地和其它HTML5元素進行交互,比如文字、輸入、視頻、攝像頭、聲音等。

再簡單一點去理解,就是processing程序是運行在本地的,p5.js和Processing語法及功能基本一致但是是在網頁上運行的。

利用p5.js可以製作很多在線的交互和展示性作品,如果你是個設計師不妨在自己的網站上放點p5.js的作品,用戶訪問時就可以直接玩到了,會比單純的視頻或者圖文介紹更生動。

放個小小的例子,我們網站用p5.js、p5.play和Blockly做了一個類似http://code.org的功能,玩遊戲學編程,大家可以體驗一下:
PinoBlock在線圖形化編程 | 每顆豆創客

如果你對p5.js感興趣的話可以私信我,最近想聚集一批對p5.js、processing和Arduino感興趣的小夥伴們一起交流一下。


《Processing語言權威指南》 瑞斯 (Casey Reas), 弗萊 (Ben Fry), 張靜, 譚亮, 等

作為 Processing 藍皮書的中文版的主要譯者,不知羞恥得推薦下這本書。
眼尖的同學可能好奇為啥封面和英文版的不一樣啊?
這是因為出版社找不到高清的原版封面了,於是鹵煮我自己魯了一個……

本著鹵煮一如既往的通通開源的精神,這個封面也是開源的
processing-portfolio/handbook_preface

鹵煮開源了一堆 Processing 項目,有惡趣味遊戲,也有商業項目,感興趣的自取
vinjn/processing-portfolio


人民郵電出版社旗下圖靈教育剛剛出版了Daniel Shiffman的The Nature of Code的中譯本《代碼本色:用編程模擬自然系統》。本書適合遊戲開發者、交互設計師、物理學愛好者及所有對計算機模擬和互動編程感興趣的程序員。

關注這個問題的很多讀者肯定是Daniel Shiffman的粉兒,如果有想請教Daniel Shiffman問題的,請戳圖靈社區 : 閱讀 : 《代碼本色:用編程模擬自然系統》作者Daniel Shiffman訪談問題有獎徵集(圖靈訪談),出版方想做個Daniel Shiffman的訪談,正在收集問題,歡迎各位提問。


我在QUT學交互設計,
這學期在學關於Processing的課程 Programming for visual artists and designers.

以下摘自Lecturer的書目推薦, 希望能幫到你

Resource materials

There are tons of great Processing resources online, more than can
possibly be summarised in this single page. The best starting place is
the Processing web site itself: Processing.org

The following is recommended to support KIB205:

  • Reas, C. and B. Fry (2007) Processing : a programming handbook for visual designers and artists. Cambridge, MA: MIT Press.

However, there is no need to purchase this text as the library provides access an electronic version. AND more importantly there is a wealth of support materials available online.

The processing web site has a number of excellent tutorials which we will use to support tutorials. And there the examples pages is a good start, and we use several of these in class. The processing wiki and the forum are also good places to find additional support.

Other references include:

  • Bohnacker, H., B. Gross and J. Laub, (2012) Generative Design:
    Visualize, Program, and Create with Processing. Princeton Architectural
    Press, New York.
  • Fry, B. (2008) Visualizing data. Sebastopol, CA: O』Reilly Media, Inc
  • Gelernter, D. H. (1998) The aesthetics of computing. London: Weidenfeld Nicolson
  • Maeda, J. (1999) Design by numbers. Cambridge, MA: MIT Press
  • Maeda, J. and Massachusetts Institute of Technology Media Laboratory (2004) Creative code. London: Thames Hudson
  • Maeda, J. (2006) The laws of simplicity. Cambridge, MA: MIT Press
  • Reas, C. and B. Fry (2007) Processing: a programming handbook for visual designers and artists. Cambridge, MA: MIT Pres
  • For other text books see : https://www.processing.org/books/

國內最藝術的的processing網站http://iprocessing.cn

國內最藝術的的processing網站http://iprocessing.cnhttp://iprocessing.cn

站內有processing書籍、教程、最新的processing IDE軟體下載,有專業的工作室推薦,有求助專區,求助專區做到有問必答,還有每周一練的習題,歡迎大家加入我們的群150772264


雖然不知道具體的應用之處,但是剛一接觸就喜歡上了,努力學習中……


先隨便找一個語言把編程學了,Processing 自然就會了。

但是 Processing 其實是個很醜陋的玩意,真的要學么…… 我覺得還不如學學 Mathematica~~

話說之前我給我們 collaboration 設計 logo,我用了 Processing,而且用了一個 OpenGL 的 shader... 然後由於顯存不夠,圖片不能超過某個尺寸,但是這年頭你懂的,一張圖片不到 4K 的尺寸都不好意思出來溜達,所以最後我放棄了。當然這個也不能說是 Processing 的錯吧,OpenGL 的限制,我認了。但是你作為一個專門畫圖用的系統,也不想個辦法繞過這個限制么,比如實現個 CPU 上的 shader 什麼的,或者乾脆實現自己的 shader 語言然後根據情況翻譯成 GLSL 或者在 CPU 上執行…… 所以發現有這個限制的時候我還是震精的………………


英語過了四級的話,看官網的example,tutorial,看自帶的reference文檔。有些書就別買了,比如什麼互動編程,把reference文檔給機器翻譯了一遍就出書的人,也是臉都厚到手術刀卷韌


剛剛抄襲的別人的程序,準備一會看看

今天借了圖書館三本書,開心開心


求大神給個程序讓我好交期末作業


推薦閱讀:

從交互設計的角度為一座1000層的大樓設計電梯按鈕?

TAG:交互設計 | Processing編程語言 |