Processing - 讓程式碼說設計語言
×

Processing – 讓程式碼說設計語言

課程連結

Hahow好學校 《 Processing – 讓程式碼說設計語言》


學程式有什麼好處?

一、跨領域的趨勢

隨著科技進展,許多傳統產業也積極進行數位轉型,轉型過程勢必需要懂程式,又具備其他專業能力的人才,如天下雜誌的文章〈懂Prada、Zara也要懂程式〉

二、程式可以自動化重複單調的工作

如果你是個股票投資者,你可以寫一支程式,自將每天的交易資料抓到你的電腦裡,方便你作後續分析。

如果你是個大量使用Excel的上班族,你可能不知道,在Excel中有一個神祕的功能叫巨集(Macro),所有你在Excel中執行的功能,都可以透過巨集自動化,不只速度超快,而且不會出錯。

三、提升邏輯思考能力

很多人說寫程式可以提升邏輯思考能力,卻總讓新手半信半疑。
我們先來說個有點老,而且不是很好笑的笑話。

如果你要把一隻鯨魚放進冰箱,需要幾個步驟?
答案是三個,打開冰箱,把鯨魚放進去,再關上冰箱。

那如果你要把一隻大象放進冰箱,需要幾個步驟?
答案是四個,打開冰箱,把鯨魚拿出來,把大象放進去,然後關上冰箱。

所以鯨魚和大象和程式有什麼關係?沒關係,但跟這個思考流程有關係。
寫程式時很重要的一點,就是將一個大任務切分成很多小任務,如同上面開冰箱的步驟。將任務拆解後,接下來要評估每個小任務的先後順序、可行性及可能遭遇的困難,確認後才開始執行,將每個小任務各個擊破。而上述的「任務拆解」及「先後順序判斷」都是邏輯能力的實際運用。


Processing是什麼

Processing是在2001年發表的程式語言,專為視覺藝術而生,可以做圖片、做動畫、做互動遊戲,也可用於自動化的影像處理。

原版Processing是建構在Java上的程式語言,但困難度遠低於Java。
p5.js則是Processing的JavaScript版本,可以運用在網頁上。
Processing.py是Processing的Python版本。
Processing for Android可以在Android系統上執行。
Processing for Pi可以連結樹莓派(Raspberry Pi)。

這堂課會以原版Processing作為教材及範例,但之後也會陸續補上其他版本的Code。


為什麼選擇Processing

一、不需要一堆複雜的設定

在一些程式語言中,光是一開始的設定就會讓初學者失去信心及興趣,不只要裝軟體,還要裝套件、要注意版本相容性巴拉巴拉,連有經驗的老手都覺得麻煩。

以上這些問題在Processing中完全不存在,雖然還是要下載軟體,但下載後就可以直接使用,沒有複雜的設定,且Processing的操作介面簡單,就像是Windows裡面的筆記本,你不用先了解軟體功能再來學寫程式。

以上這些問題在Processing中完全不存在,雖然還是要下載軟體,但下載後就可以直接使用,沒有複雜的設定。

如果你使用的是p5.js,那你連軟體都不用下載,可以直接在網頁上開始寫程式,寫完後還可以跟朋友分享,超級方便!

下圖是p5.js的網頁版編輯器。


二、新手容易獲得成就感

我自己使用過的程式語言超過五種,平心而論,Processing真的算超級容易入門,它也是我第一個學習的程式語言。

在挑選程式語言時,許多初學者常擔心過程過於枯燥乏味,因此會試著尋找遊戲化的程式教學平台,希望透過闖關、競賽或積分的方式增加學習樂趣。相較之下,Processing著重於繪圖,每段程式碼都可以是一個作品,一點都不會無聊,對初學者來說也容易獲得成就感。

三、多語言版本

許多完全沒有程式經驗的新手,想學JavaScript做網頁動態設計,或是學Python做數據分析,卻經常卡關。主要原因在於,前者需要額外學習HTML和CSS,學習門檻較高;後者需要真實資料才能實際運用,資料怎麼來?有了資料後怎麼用?都是困難點之一。

如果你還沒有明確目標,只是想學一門程式語言看看,那不妨從Processing開始,之後再依個人規劃進行延伸。

你可能會問,學新的程式語言有那麼簡單嗎?
當然沒有,但如果你問身邊的工程師朋友,他們可能會跟你說,程式語言有幾個超級基本而且相通的概念,如變數、資料型態、流程控制、Function和物件,這些概念在課程中都會詳細說明

四、大量網路資源

在Processing的網站上及論譠上,可以輕鬆找得到許多優秀的範例,與網友的發問記錄。只要善用搜尋技巧,你遇到的問題大多能找到解答。

〈單元11範例〉

Processing - 讓程式碼說設計語言

〈畢業專題主視覺 動態呈現〉

用Processing做出的粒子系統。發射器在兩側端點,
同時發射不同速度的粒子,當粒子移動到轉折點時,
會改變行進方向,往中心移動。

Processing - 讓程式碼說設計語言

〈Pro 52. Bird〉

Processing - 讓程式碼說設計語言

這堂課你可以做出

  1. 平面作品 – 可以是卡片,也可以是作品集封面。
  2. GIF – 透過其他工具輸出GIF,並進行壓縮處理。
  3. 影片 – 輸出成影像序列,再匯入影片剪輯軟體。
  4. 互動式圖表 – 用來呈現資料視覺化(Data Visualization)。
  5. 互動遊戲 – 透過滑鼠或鍵盤互動。
  6. 客製化商品 – 將作品輸出成高解析度圖片,作為印刷使用。


這些東西都可以當成個人作品發表,
而不只是軟體或網站的測試原型。

Pro 55. Albert Einstein

Processing - 讓程式碼說設計語言

62icon

Processing - 讓程式碼說設計語言

作品範例與說明

〈Pro 27. Olympic〉
After Effects中,可以用Mask或其他技巧完成下面效果;
在Processing中,則是取得每一個點的座標位置後,再進行運算。

Processing - 讓程式碼說設計語言

〈Pro 30. Tree〉

程式應用中相當有趣的一個類別,是模擬自然生態。
無論是樹木的生長,或是候鳥飛翔,都可以透過程式碼的編寫來完成。

Processing - 讓程式碼說設計語言

〈Pro 33. Animator〉

透過Processing寫出動畫編輯器,進一步了解動畫軟體中的運作原理。

Processing - 讓程式碼說設計語言

〈Pro 36. Box〉

三角函數的應用。

Processing - 讓程式碼說設計語言

〈105級高師工設畢製發表-鑄型 〉

Processing可以和Leap Motion感應器作結合,做出自己的互動遊戲。
Leap Motion本身也相當適合作為展場中的互動媒介。

上完這堂課,然後呢?

如果你想繼續在Processing打滾
– Processing和Arduino有相當好的相容性。
– Processing的JavaScript版本,p5.js和Processing.js,讓作品在網頁上執行。
– Processing的Python版本
– Processing的大量Library,像是做電腦視覺的OpenCV。

如果你想轉戰其他語言或平台
– 像是開發After Effects的腳本(Scripts),並上傳至相關平台販售。
– 累積自己的外掛函式庫。
– Processing因為簡單輕巧,適合作為動態圖像的概念測試。
  只要熟悉這堂課的內容,轉戰其他領域會容易許多,如下圖。

〈Pro 37. Knitting〉在Cinema 4D中,透過Python計算三角函數,並渲染後的作品。

Processing - 讓程式碼說設計語言

課程連結

Hahow好學校 《 Processing – 讓程式碼說設計語言》