Processing - 讓程式碼說設計語言 | Hahow好學校線上課程
×

Processing – 讓程式碼說設計語言 | Hahow好學校線上課程

課程連結

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


學程式有什麼好處?

一、跨領域的趨勢

隨著科技進展,許多傳統產業也積極進行數位轉型,轉型過程勢必需要懂程式,又具備其他專業能力的人才,如天下雜誌的文章〈懂Prada、Zara也要懂程式〉,以及iThome〈設計感性和理工邏輯兼具,編程設計師掌中滑鼠就是針織橫編機的指揮棒〉

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

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

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

三、提升邏輯思考能力

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

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

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

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


Processing是什麼

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

原版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本身就是個有趣的學習目標,它著重於繪圖,每段程式碼都可以當成作品發表,一點都不會無聊,對初學者來說也容易獲得成就感。

Pro 55. Albert Einstein

Processing - 讓程式碼說設計語言 | Hahow好學校線上課程

62icon

Processing - 讓程式碼說設計語言 | Hahow好學校線上課程

三、零基礎也可以

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

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

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

四、大量網路資源

Processing是個熱門的程式語言,是國內外學校常見的課程內容之一。由於使用人數眾多,在Processing的網站上及論譠上,你可以輕鬆找得到許多優秀的範例,與網友的發問記錄,只要善用搜尋技巧,你遇到的問題大多能找到解答。

〈單元11範例〉

Processing - 讓程式碼說設計語言 | Hahow好學校線上課程

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

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

Processing - 讓程式碼說設計語言 | Hahow好學校線上課程

〈Pro 52. Bird〉

Processing - 讓程式碼說設計語言 | Hahow好學校線上課程

這堂課你可以做出

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

學員評價

對於Processing程式有非常詳細的講解、而也破除一般人對「程式很難」的迷思,寫程式也可以很簡單。

Processing是一個看得到的語言,根據老師教授的步驟寫出來,很有成就感,而且課程內容詳實,收穫很大。

Processing - 讓程式碼說設計語言 | Hahow好學校線上課程

學校的專題需要使用Processing, 但老師又沒有教得很詳細, 幸好我在這邊發現了這堂課! 我還沒開始正式上課,但剛才點了幾個單元, 確實都是我不清除的觀念及內容, 先給滿分評價了!

課程內容實用,老師教學方法用心, 帶領大家進入程式設計的基礎 使其不感到疑惑。

Processing - 讓程式碼說設計語言 | Hahow好學校線上課程

作品範例與說明

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

Processing - 讓程式碼說設計語言 | Hahow好學校線上課程

〈Pro 30. Tree〉

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

Processing - 讓程式碼說設計語言 | Hahow好學校線上課程

〈Pro 33. Animator〉

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

Processing - 讓程式碼說設計語言 | Hahow好學校線上課程

〈Pro 36. Box〉

三角函數的應用。

Processing - 讓程式碼說設計語言 | Hahow好學校線上課程

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

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

課程連結

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