用嶄新的方式說故事 - 什麼是互動設計？
越來越多的互動藝術在我們周圍，如果你有去過一些台灣的藝文展覽或博物館，總會有幾件展品特別吸引你的注意力——
比如去年曾經來台展過的 Team Lab，建構了大型的虛擬世界，讓人們可以在其中玩耍，拍打發亮的大球，坐下的地方長出鮮豔的花朵，觸碰牆上的中文字，就化為山水鳥魚，或掃描自己畫的彩繪魚，讓他活靈活現的游進牆上的海洋世界中，不僅是視覺上的饗宴，更讓我們在各種活潑的互動中，能夠有有趣的感覺，覺得「哇！好像夢境一般好好玩！」
互動設計在很多廣告、品牌推廣跟更廣泛的設計產業，都有商業與藝術上的應用，雖然在台灣可能還沒發展興盛，但近年來台灣的設計風氣逐漸蓬勃，也開始有越來越多的展覽、活動或公司嘗試用不同的互動，讓廣告不再只是廣告，而是跟觀眾互動的遊戲或設計來呈現品牌或提升參與度，結合軟體跟硬體，在功能之外，尋找人對世界最原始的感動跟好奇心。
這些嶄新的設計手法，容易讓品牌本身更容易取得使用者的關注，讓使用者在互動的過程中，對你想傳達的想法跟故事，有更強烈的印象跟共鳴，比如讓使用者跟虛擬世界中的魚群互動、揮揮手便能在白牆上留下五彩的海浪， 用圖像或動畫來解釋抽象的概念，或創造想像與現實不同的世界，除了吸引使用者的好奇心，藉由探索去理解世界，也能讓想要傳達的故事更精彩。
互動設計都用些什麼軟體呢？
互動設計產業有非常多的軟體，生態系也很龐大，通常在同一件作品中，應用到兩、三個以上的平台彼此串連很常見，比如有時候需要使用 p5.js 做視覺化＋MaxMSP 處理前置資料，或使用 openFrameworks / Unity 或 Unreal 做 3D 模擬，從外部輸入感測到的骨架資料生成動態藝術，近期來比較正式在業界常使用的軟體為 Touch Designer。雖然軟體的種類很多很複雜，但是橫跨所有相關互動開發的核心概念，便是 Creative Coding。
Creative Coding - 程式創作
Creative Coding 顧名思義是結合程式加創意，狹義上看起來是用程式寫一些看起來很有藝術感的圖形，廣義上是可以用程式，將世界上的各種事物賦予互動跟連結起來，創造出新的現象、關聯與有趣的呈現，所以用程式偵測走在路上的人群，轉換成五線譜之後播放成音樂，或是比較商業的演唱會背景，擷取歌手的影像做後製，結合動態設計，變成即時的互動背景，跟著聲音的大小、人的位置、時間等做變化，或投影在建築物上，即時運算出來的移動錯覺效果，這些都是程式創作能應用的範疇。
想到寫程式，你想到什麼工作？是在做些什麼事情呢？ 如果在你腦中的畫面，是坐在電腦桌前的工程師，寫著千篇一律的功能解 bug，那這堂課就是要顛覆你的想像，工程師才不只有寫寫扣，整天逛 stack overflow⋯⋯
帶你了解如何把程式跟藝術、互動設計、音樂、創作以及遊戲結合，從生活中的各處獲得靈感、草稿跟創意發想，進一步學會用程式實作互動設計。
大家好，我是吳哲宇。幾年前我開設了 動態互動網頁程式入門、特效入門 課程，從設計的角度教學網頁開發，讓設計師與工程師都能一窺好看的互動網頁後面的奧秘，而這堂互動藝術程式創作入門，想要帶著大家打破程式與網頁刻頁面、寫功能的印象，更進一步的開眼界開始創作！
解放領域之間的圍籬，從這堂課開始！
這堂課不僅是一堂技術課，而是一個契機，想改變千篇一律的設計/工程師生活嗎？作為設計師想要用全新的技術手法創作，作為工程師想要自己的作品跟網頁技術有趣，不僅是切版做做 landing page，雖然網路上有很多技術相關的Youtube 與免費資源，但整合領域知識、概念、技術，帶給你不同的視野，是這堂課想要與你一起達到的目標。
揭開多媒體互動設計的面紗， 一起成為兼具技術與創意的數位工作者
我希望這堂課程，能打開你的視野，把技術當成像呼吸一樣自然的創作工具，藉此踏入數位藝術程式創作的領域，任自己想像的組合應用，不管是作為純粹興趣、還是想要嘗試多媒體互動設計領域的你，讓你體驗怎麼成為一個數位藝術家，成為既有有趣想法又有技術能力的成為獨一無二的創作者。
Creative Coding | 課程內容介紹
這堂課將使用 p5.js - 一套專門給為藝術家的程式框架，他來自於 Processing， 讓設計師跟藝術家能夠用簡單的語法，快速組織複雜的程式，用更少的時間跟精力實踐想法。
這是由全世界的科技藝術家跟工程師一起經營的社群跟工具，若是要入門互動設計或Creative Coding，以 p5.js 為開始了解概念後，會更容易上手其他相關的創作軟體，從這門課程對於亂數、視訊處理、即時模擬、物件互動有基礎之後，會更容易了解其他複雜的作品如何實現。
這堂課將以「背景知識＋創意發想＋實作演練＋課後練習」四大核心，看見能用在哪裡、怎麼用，接著直接紮實的用精緻有趣的範例，帶你上手程式語法與創作！
如果沒有程式基礎怎麼辦？
上這堂課程式並不需要程式基礎，但如果你有程式基礎會如魚得水，能嘗試更多有趣的互動跟進階技巧！在國外我們互動設計科系有相當大比例的學生，來前並沒有學習過程式開發，但在一個學期過後，就學會了怎麼用用程式來創作。這次會從基礎的程式語法教起，快速又清楚的用一個個範例帶大家熟悉語法，也有手邊可以隨時參照的文件，只要懂的如何解決問題、參考跟化為自己的東西，就能順利上手，所以不用害怕，也很歡迎設計與想創作的同學來修課，探索各種不同的音訊視訊媒體使用互動，做出有趣的互動作品。
這堂互動藝術課程，將會讓你學到：
- 認識程式與互動藝術產業應用，開啟對工程跟設計的想像
- 學會使用 p5.js 開發互動介面，整合繪圖、音訊、視訊、文字、3D、互動與機器創作完整的作品
- 將創作輸出應用在個人品牌或網站、主視覺或海報，甚至互動裝置、遊戲與教材製作等場景，讓你對進修的資源與路線更有方向
沒有程式基礎也不必擔心，一起跨出你的第一步！
這堂課可以帶給你兼具設計與程式的能力，對於喜歡設計的人而言，可以讓自己的作品不只美美的，或是用程式做到跟執行不太可能用人手重複的規則與韻律，制定規則後，讓系統自己產生跟模擬，創造不可預期的設計成果。
很多技術問題常常是有固定答案的，透過程式創作的訓練，讓自己嘗試不是結果導向的創作，如果動了其中一個環節，最後會有什麼有趣的意外產出，如何蒐集日常中的零感，刺激自己產生很多天馬行空的點子，也許其中一個就會打中人心，成為下一個專案或作品的靈感來源。
一起將你的創意和想法以技術來實現吧！
有設計基礎的你，可以奠基在設計的美感上，實作出更多互動的作品，不僅更可以了解設計與工程的緊密關聯，也可以用程式做到跟執行不太可能用人手重複的規則與韻律，制定規則後，讓系統自己產生跟模擬，創造不可預期的設計成果！
有工程基礎的你，相信對「結果導向」的思維不陌生。在這堂課程中，跟著我們一起探索程式在藝術創作的世界，透過創作練習培養新的思考方式。
Creative Coding | 課程單元規劃
這堂課程預計分為五大章節、長度為 700 分鐘，會以一個一個帶入用到的技巧跟不同的媒材，也會帶大家看很多科技藝術範例刺激想法，會是一門理論與實作並重的課。
每一個主題都會有一個課後作業，讓大家練習用課程中學到的技巧應用創作，最後有一個 Final Project 由學生自行決定內容，我會參與討論，讓大家做出自己想嘗試的作品。
每個章節規劃約為 25-40 分鐘，內容會分拆到單元內，長度大為 5-10 分鐘，希望改良上一堂課負擔太重的感受，讓大家不會太累又學得到東西，有多餘的心力可以消化跟應用課程內容，單元內容會根據製課過程微調內容提及的順序。
第 1 章 - 基礎繪製與色彩第 2 章 - 創作生成式藝術第 3 章 - 互動系統與模擬第 4 章 - 進階影音互動與即時資料應用第 5 章 - 程式創作的後續應用課程後你將有能力做出
互動動態海報與視覺 - 利用圖形、色彩、繪製技巧來產生動態視覺
章節 9 韻律、隨機性與噪聲 - 詩意與自然模擬 ▌章節 11 物件導向與向量 - Class 粒子系統
章節 6 增添色彩－玩耍色彩與留下痕跡
生成式設計與繪圖機器 - 設定規則、系統，生成預期之外的藝術創作
章節 6 增添色彩－玩耍色彩與留下痕跡
章節 9 韻律、隨機性與噪聲 - 詩意與自然模擬
章節 5 條件:迴圈與互動 - 建構創作規則
建構華麗的粒子模擬視覺 - 熟悉噪聲、粒子與物理
章節 6 增添色彩－玩耍色彩與留下痕跡 ▌章節 9 韻律、隨機性與噪聲 - 詩意與自然模擬
載入資料 / API ，轉化資料成為視覺化的呈現介面或互動
章節 14 - 資料視覺化與API - 將資料轉化成藝術
結合進階繪圖技巧與疊色，創造科幻感的介面
章節 5 條件:迴圈與互動 - 建構創作規則
解構音訊與像素，結合視訊串流與影音跟使用者互動
章節 13 - 使用者影音互動 - 即時串流聲音與影片 ▌
結合故事與敘述，讓自己的故事活起來
章節 8 函數與物件互動 - 建構無法預測的小世界
章節 7 進階繪圖 - 畫布操作與編織複雜圖形
章節 3 基礎圖形繪製 - 從點線面到塗鴉
製作實驗性的工具與概念驗證 - 疾病傳播模擬
章節 8 函數與物件互動 - 建構無法預測的小世界
結合即時音訊、視訊做互動遊戲
章節 13 - 使用者影音互動 - 即時串流聲音與影片
會教學如何將創作結合到品牌網站、輸出海報與影片
章節 15 - 發表作品 - 輸出與使用至不同平台
章節 15 - 發表作品 - 輸出與使用至不同平台
整合品牌官網案例效果： 墨雨設計
你一定也可以做得到，看看網頁入門與特效入門的同學作品吧！
學習前兩門「動態互動網頁程式入門」與「動態互動網頁特效入門」課程的同學中有很大一部分都沒有程式與設計基礎，但是在課程結束之後他們也都有能力做出讓人眼睛一亮的網頁作品，快來看看吧：Hahow 動畫互動網頁程式 / 特效入門同學作品集
課程解鎖活動
若於 2020/05/06 23:59 前，募資人數達標，則依照相應的募資比例，將解鎖下列課程：
1000% 加碼章節 - 文本分析：了解文字的藝術（使用 Rita.js）- 已解鎖釋出2000% 加碼章節 - 物理模擬：讓物件自然的落下碰撞 (使用Matter.js) - 已解鎖釋出3000% 加碼章節 - 3D世界與物件：p5的WebGL應用 - 已解鎖釋出4000% 加碼章節 - 合成聲音：創造聲響與互動 (Tone.js / p5.sound)5000% 加碼章節 - 結合實體世界：結合 Arduino 進行創作互動裝置解鎖課程將於開課後 2 個月內上線。
關於講師
吳哲宇，墨雨設計創辦人，互動設計師、藝術家、講師、全端工程師，目前於紐約大學進修整合數位媒體碩士。
「動態互動網頁程式入門」、「動態互動網頁特效入門」講師，引領超過一萬名同學進入互動網頁開發的大坑。在系上擔任 Creative Coding 研究助理與助教快兩年，喜歡新奇古怪的事物，想脫離網頁的限制，更自由的結合各種媒體與技術創作互動設計。
從動畫與平面設計起家，持續做到整體品牌形象 CI 設計到 UI/UX APP 介面設計，目前專攻網頁動畫與互動，研究如何以網頁的技巧實踐 MotionGraphics的精神，以設計的角度主宰網頁，讓網頁不只是能用、資訊呈現，更要有趣、好玩。
講師作品集：https://cheyuwu.com/
墨雨設計：https://monoame.com/
講師經歷
- 荒物聲響互動實驗音樂展 - 技術支援與界面開發
- 台大創新設計學院 D-school 中文網站 設計 / 開發
- HHMuseum 兒童博物館串聯網站開發
- 工研院綠能所 家庭用電家計簿 網頁設計 / 開發
- 雜學校 2015-2017 官網開發
- n3xtcon 識別設計 / 前後台網頁暨系統開發
- 捷運局台北聲音地景計畫 網頁設計/ 前後台網頁暨系統開發
- 台北智慧城市黑客松評審團超級大獎
- Selinko & RemyMartin 限量合作酒款APP界面設計
- 聯合報國際美容展 2015/2016 前後台網頁暨系統開發
- 2015世界健康大會 前後台網頁暨系統開發
- 第五屆～第九屆宏碁數位創作獎 首獎+評審團超級大獎
問題回覆與作業設計
這堂課將會有 3-5 的程式創作的練習，預計約為兩週批改一次並回覆大家的問題。最後的大專案，會分成發想、實驗、迭代三個部分，帶領同學討論、實作自己想嘗試的專案，這些作業都沒有標準答案，大家可以儘管嘗試，做出自己的作品！
如何購買三人同行？（活動已結束）
詳細的教學請詳閱《3 人同行方案購買與兌換課程方式》
STEP 0｜首先，你需要先找好另外 2 位學習好夥伴，並選出一位夥伴作為「購買人」
STEP 1｜購買人請於課程頁面點選「馬上預購」，進入「課程購買頁面」
STEP 2｜選擇付款資訊第二項「兌換 3 人同行 一人 NT$ 1,333 」
STEP 3｜填寫「收取另外兩組課程兌換序號的 Email 信箱」（購買人信箱）
STEP 4｜選擇「付款方式」與「發票選項」並按下「送出」
STEP 5｜完成付款後，購買人即可進入「我的課程」頁面，於「我修的課」區塊，確認課程！並請千萬記得另外 2 位好夥伴還在等待他們的課程兌換序號喲～快去信箱收信吧！
注意事項｜3 人同行方案為特殊優惠方案，僅限募資期間，無法與 Hahow Point、Coupon、合購優惠等項目併用。
