🚨週年慶最後 24hr🚨 \\全站 83 折券+LINE Pay 13% // 🔥 把握最後 $899💰 只到午夜 23:59🥺
時
分
秒
午夜後全數歸 0⏰
登入/註冊
Processing - 讓程式碼說設計語言
0 seconds of 2 minutes, 12 secondsVolume 0%
Press shift question mark to access a list of keyboard shortcuts
鍵盤快捷鍵
播放/暫停空白鍵
音量增加↑
音量減少↓
快進 5 秒→
倒退 5 秒←
開啟/關閉字幕c
全螢幕/離開全螢幕f
靜音/取消靜音m
Decrease Caption Size-
Increase Caption Size+ or =
跳轉至%0-9
00:00
00:00
02:12
 
Aron

Processing - 讓程式碼說設計語言

Processing 程式入門課,教你透過程式語言創作出多種素材。透過 Processing 你能製作出圖片、GIF、影片、互動圖表、互動遊戲等素材,將檔案輸出後還能使用 Photoshop、Illustrator、AE 等軟體後製,透過 Processing 跨出程式語言學習的第一步。
查看更多
Hahow AI 學習升級
37.5 k 的人也在觀看
4.7
(11)

關於課程

課程包含

包含 1 章 35 單元、4 項作業

課程時長

7 時 29 分鐘

課程總人數

322 位同學

觀看限制

不限觀看次數,還會附贈完課證書

學習升級

Hahow AI 學習助教
無需額外付費
即時問答、重點整理、測驗理解,讓知識派上用場

最新消息

課程內容

會寫程式真的那麼重要嗎?

雖然程式教育已經納入108課綱,108課綱也已經正式上線,但有不少家長仍滿頭問號,會不會寫程式真的那麼重要嗎?對於已經升大學,甚至進入職場的你來說,學程式對我有什麼幫助?

在回答這個嚴肅的問題前,先讓我們來說個有點老,而且不是很好笑的笑話。

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

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

如果你的冰箱變大了,一次可以放兩隻動物,要放進第三隻動物時必須先清空冰箱,那會需要幾個步驟?

回顧一下我們剛做了什麼事

在上面短短的篇幅中,我們做了三件事:

  1. 確認目標,也就是將動物放進冰箱。
  2. 任務拆解,將大任務變成很多個小任務,像是開冰箱、放進動物、關冰箱。
  3. 規畫執行步驟,也就是流程控制。如果冰箱已經有動物了,要先清空才可以放入新的動物。

現在可以回答問題了

會寫程式真的那麼重要嗎?我認為,會不會寫程式一點都不重要,但是邏輯訓練很重要。邏輯能力好的人能將資訊拆解成小任務,釐清每個小任務間的因果與脈絡。抓脈絡的能力越好,理解能力越好,學習能力越強。

在傳統的教育中,邏輯思考能力很難教,因為沒有人可以潛入你的腦中,觀察你是怎麼想事情的。所以很多人說,寫文章是練習邏輯思考的好方法,因為書寫者必須統整腦中的想法後,透過長篇文字表達出來。

然而,除了整體脈絡外,用詞精準度也是文字表達非常重要的一環,失準的用字可能會讓正確的邏輯走味,造成邏輯訓練的成效降低。這也是為什麼許多人推崇以程式語言訓練邏輯能力,

因為寫程式和寫文章一樣,必須以文字記錄腦中的思考過程,而且程式語言通常有一定的語法規範,更加嚴謹,不會有用詞精準度的問題,使用者可以將更多的心力花在邏輯能力的訓練上。

有明確的邏輯就可以大量複製

學寫程式有一個相當迷人的地方,只要你寫好了邏輯架構,就可以持續的大量複製,並在程式中加入某些可調控的參數,也就是算謂的「運算思維」。

以上面冰箱的例子來說,我們可以把冰箱的容納上限變成10個、100個,或是增加判斷機制,把水裡游的放進冷凍庫,天上飛的放進冷藏。

Processing是什麼?

Processing是一套適合初學者的程式語言,它的強項在於視覺處理,可以拿來畫圖、修圖、設計海報。簡單來說,Processing就像是程式語言版的Photoshop!除此之外,它還可以用來做動畫及互動遊戲!

Processing非常適合程式新手,因為它的語法簡單,軟體操作也簡單。你只需要下載Processing的軟體,打開,可以開始學寫程式了!沒有複雜的系統設定,不用摸索一大堆軟體按鈕,甚至連安裝都不用。

Processing適合誰?

如果你是設計人,你可以用Processing發展全新的創作技法,像是拿來設計海報或動畫,展現傳統技法無法達成的複雜效果。把素材從After Effects丟到Processing,或是從Processing丟進After Effects都可以。

如果你是電商人或行銷人,你可能經常需要對大量圖片做重複動作,像是放Logo、押浮水印,或是調整圖片尺寸、轉檔等。這些耗時而且瑣碎的工作,都可以透過Processing達成自動化,又快又精準。當然,網路上也找得到免費軟體處理這些問題,但自己的工具自己造,不只客製化彈性高,而且帥。

如果你是PM,或是平常需要跟工程師溝通,卻經常聽不懂他們在講什麼,Processing也能幫上忙。你可以透過Processing這個簡單的程式語言,了解什麼是流程控制,什麼是迴圈,什麼是模組化。因為在大部份的程式語言中,這些概念都都通用。

〈Pro 52. Bird〉

黑色背景上的青白色流線,勾勒出展翅飛行的抽象鳥形,作為頁面視覺裝飾,不含文字資訊。

Processing也可以增加被動收入

如果你想透過程式,透過創作來賺點外快,或是所謂的不離職創業,Processing也是個很好的開始。現在有許多的商品製作平品,如灣得文創或62icon。你只要上傳圖片,就可以訂做客製化商品,像是零錢包、杯墊、帆布袋,你可以透過創作來獲取報酬,強化個人品牌。

62icon

深青綠色抽繩束口背包,包面覆蓋白色交錯線條與不規則紋理,搭配黑色繩帶與金屬扣環,置於白色背景前展示。

結束這堂課後

如果你想繼續在Processing打滾:

  1. Processing和Arduino有相當好的相容性。
  2. Processing有JavaScript版本p5.js,讓作品可以在網頁上執行;Processing也有Python版本。
  3. Processing的大量Library,像是做電腦視覺的OpenCV。

如果你想轉戰其他語言或平台:

  1. 許多軟體都能讓使用者自己寫程式擴充功能,像是After Effects、Cinema 4D的腳本(Scripts),或是Microsoft Excel中的VBA,具備程式基礎可以讓你在學習上更快上手。
  2. Processing因為簡單輕巧,適合作為開發動態圖像時的概念測試。

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

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

黑色背景上的紅色抽象幾何線框圖形,呈現旋轉交疊的立體結構與中央圓形留白,外圍疊有白色方框線條,作為頁面裝飾。

其他作品

〈單元11範例〉

由粉紅、灰色與白色矩形線條層層交疊形成的放射狀螺旋幾何圖案,向中央聚合,作為頁面裝飾背景。

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

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

黑色背景上的抽象幾何線條裝飾,青綠與黃綠色細線分別向上下兩側放射,於中央交會形成對稱的動態構圖。

〈Pro 30. Tree〉

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

黑色背景上,淡紫色粒子構成抽象的分枝植物形體,從中央向上蓬勃延展,底部連接一個發光的圓環,呈現數位藝術裝飾效果。

〈Pro 33. Animator〉

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

灰色背景上方有黑框白色圓形,下方以密集直條構成左右起伏、中間低落的波形裝飾,左下角帶有紅色圓點,畫面不含文字資訊。

〈Pro 36. Box〉

三角函數的應用。

黑色背景上的白色曲線與點狀線條交織,形成抽象的編織紋理裝飾,不含文字資訊。

〈展覽互動裝置 〉

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

講師經歷

哪些人適合這堂課?
1. 想學程式,但不知道怎麼入門的人。 2. 想學程式,但不知道學了程式可以幹嘛的人。 3. 想培養邏輯思考能力,但找不到方法的人。 3. 設計或藝術專長,希望能增加創作多元性的人。
你可以學到
圖片、GIF、影片、互動圖表、互動遊戲或是客製化商品。 Processing輸出的檔案也可以當成素材,丟到Photoshop、Illustrator或After Effects等軟體中處理。
上課前的準備
需要準備的工具 / 軟體(若購買課程前不清楚版本是否支援,請先留言與老師確認。)
Processing,可以免費下載。
需要具備的背景知識
1. 程式經驗當然不需要。 2. 有設計或動畫經驗者佳,可以增加舉一反三的能力;沒有也沒關係,並不影響學習。 3. 基本的數學觀念,如四則運算、向量和三角函數。  實際操作時,會再作一次基礎知識的講解,同學不用太緊張。  雖然這堂課大部份的計算都是交給電腦處理,但有一定的數學概念,比較能預期作品的樣  貌。
單元一覽
1 章 35 單元|總時長 449 分鐘
全部收合
1
本課程不分章節
影片單元
單元 1 - 課程開始之前
影片單元
單元 2 - 公告區
影片單元
單元 3 - 軟體下載及設置
06:22
影片單元
單元 4 - 基本繪圖
09:07
影片單元
單元 5 - 上點顏色吧
11:11
影片單元
單元 6 - 程式結構和數據類型
13:33
影片單元
單元 7 - 動畫Ⅰ
20:28
作業單元
作業 1 - 動畫Ⅰ 延伸作業
查看作業
影片單元
單元 8 - 動畫Ⅰ 作業討論
06:01
影片單元
單元 9 - 動畫Ⅱ
作業單元
作業 2 - 動畫Ⅱ 延伸作業
查看作業
影片單元
單元 10 - 動畫Ⅱ 作業討論
08:06
影片單元
單元 11 - 迴圈Ⅰ
14:37
影片單元
單元 12 - 迴圈Ⅱ
影片單元
單元 13 - 陣列Ⅰ
09:12
影片單元
單元 14 - 陣列 Ⅱ
12:11
影片單元
單元 15 - 綜合練習 - 殘影
27:12
影片單元
單元 16 - 輸出圖片序列
09:14
影片單元
單元 17 - 發佈到社群網站
17:49
影片單元
單元 18 - 更複雜的運算,三角函數
24:53
影片單元
單元 19 - 向量
13:01
影片單元
單元 20 - 向量Ⅱ
17:43
影片單元
單元 21 - 自定義函數
24:20
影片單元
單元 22 - 創造自己的物件
21:37
影片單元
單元 23 - 動態陣列
13:20
影片單元
單元 24 - 匯入圖片
14:22
影片單元
單元 25 - 粒子系統
19:40
影片單元
單元 26 - 粒子系統Ⅱ
05:46
影片單元
單元 27 - 安裝函式庫(Library)與聲音匯入
13:21
影片單元
單元 28 - 匯入向量檔
12:30
影片單元
單元 29 - 3D空間
11:50
影片單元
單元 30 - 遞迴與碎型
12:35
影片單元
單元 31 - 資料視覺化
11:34
影片單元
單元 32 - 更多互動
13:35
影片單元
單元 33 - 課程結束之後
作業單元
作業 3 - 畫一棵聖誕樹吧
查看作業
影片單元
單元 34 - Bonus 1-1. 儲存去背PNG
影片單元
單元 35 - Bonus 1-2. 儲存大尺寸圖片
04:14
作業單元
作業 4 - Bonus 1. 編織風格影像
查看作業
試看單元
播放試看影片
章節 1 - 本課程不分章節
單元 1 - 課程開始之前
試看影片
07:48
播放試看影片
章節 1 - 本課程不分章節
單元 9 - 動畫Ⅱ
試看影片
18:53
播放試看影片
章節 1 - 本課程不分章節
單元 12 - 迴圈Ⅱ
試看影片
14:16
播放試看影片
章節 1 - 本課程不分章節
單元 34 - Bonus 1-1. 儲存去背PNG
試看影片
09:13
課程評價
4.7
/ 5.0
11 則評價
普通
課程內容詳實但不講解仔細,講解方法生硬⋯部分甚至不如網上免付費的教學分享明瞭清淅⋯⋯缺乏多元性。
1 人覺得有幫助
kinkipikachu2020-03-10
非常有趣的課程
授課老師教得很清楚,整個課程的進行非常流暢,讓我受益良多。 也讓我了解到Processing是一套非常好玩的影像軟體,讓我再重拾了許久的數學公式。 期望老師後續能再開課,能與Arduino做結合。
查看更多
MARS2019-02-09
這堂課救了我!
學校的專題需要使用Processing, 但老師又沒有教得很詳細, 幸好我在這邊發現了這堂課! 我還沒開始正式上課,但剛才點了幾個單元, 確實都是我不清除的觀念及內容, 先給滿分評價了!
查看更多
徐韻婷2019-10-17
推!實用的課程~
以前認為邏輯很好、數學很好的人才可以寫程式,後來發覺這本來就是相輔相成的過程啊~ 即使不成為工程師,這堂課對於思考能力及資料搜尋能力都是很好的訓練,在工作上也很有幫助~
meifen19802021-12-19
講解清晰
老師講解非常清楚, 每個步驟都能夠輕鬆跟著做, 示範操作的速度不會太快, 讓完全沒經驗的初學者也可以跟得上喔!

意猶未盡嗎?

關於講師

Aron
1堂課程
3篇文章
322位學生
以前用MIX這個名字在網路打滾,後來改為Aron。工業設計系畢業,曾任職知名品牌行銷企劃,做點設計,寫文案也寫網站;目前擔任零售業數據分析師。最近開始玩雙截棍、單輪車和Python量化投資。
前往講師頁面
精選學生作業

購課前問答

日期最新
日期最新
日期最舊
愛心數
annesheep
2019-09-13
老師想請問您的課程內容是著重在動畫特效的教學嗎?還是也有基礎的製作各種圖案的教學,就是是全面性的教學嗎?((我現在才剛接觸processing所以不是很了解😂
(已編輯)
Aron
授課老師
2019-09-17
是全面性的教學喔,會從基礎觀念和語法開始講起,再慢慢進階到動畫和其他特效,沒有程式經驗也沒關係。
回覆
我也想問
高郁涵
2019-02-10
老師~想請問這個跟canvas的差別是什麼 我還沒學canvas 但是不是跟這能做出的效果有點像
Aron
授課老師
2019-02-10
是的,兩者都著重在繪圖上,但canvas主要用於網頁,還會牽涉到HTML和CSS,東西比較雜;Processing相對就單純許多。另外,Processing比較容易讓新手獲得成就感,我覺得這滿重要的。 所以妳如果是想學習網頁方面的程式,可以直接往canvas的方向走;如果沒有明確的方向,只是單純想接觸看看,我會建議Processing喔。 在Youtube上面搜尋「Canvas 教學」就會有一些教學影片,可以和這堂課試看的單元比較看看~
(已編輯)
Aron
授課老師
2019-02-10
之前Hahow系統有改版,有一些試看的單元被取消掉了,我現在沒辦法調整,可以參考我之前上傳Youtube的這個。 https://www.youtube.com/watch?v=Y0yuo1t2CvA&ab_channel=MIX
高郁涵
2019-02-11
謝謝老師的回覆~
回覆
我也想問
momo Chang
2018-07-12
(已編輯)
回覆
我也想問
Tim Liao
2018-05-31
老師你好請問本堂課學習完 此種軟體的語言結果 能夠移植到其他主流引擎嗎 例如unity 或是unreal
Aron
授課老師
2018-06-05
如果要直接移植的話可能會有困難喔,但程式邏輯是相通的,大部份情況下可以改寫成Unity或Unreal 如果你確定想往互動遊戲的方向走的話,建議直接從Unity入手,應用範圍和線上資源其實都比Processing還要多;這堂課比較適合對程式有興趣,但不確定是否要深入研究的人,可以快速入門並有作品產出
回覆
我也想問
Wei-Chun Cheng
2016-12-26
請問課程簡介中的範例都是上課過程中會實際操作到的嗎?
Aron
授課老師
2016-12-28
你好,上面的範例大約有一半會出現在課程中。 如果對其他沒提到的範例有興趣的話, 我可以另外提供檔案或是講解噢~
(已編輯)
回覆
1 人想問
購買單堂課

NT$1,200
有什麼優惠可以用?
小蛙幫你找最佳優惠
登入看看 有什麼優惠用

相關標籤