CHE-YU WU / LAB
求學時期的創作現場
沿著動畫、音樂與程式，走進那幾年留下的公開紀錄。
2013-09-09 — 2016-09-0924 筆公開紀錄
紅線：來源關聯 麻線：共同主題 移到紙上看關係名稱
完整紀錄 ↓這裡依月份往下讀，每張卡下面的小標是它的關係，點一下會跳到另一筆紀錄
2013 · 09
2013 · 10
2013 · 11
2014 · 09
2014 · 12
2015 · 03
2015 · 05
2015 · 09
2015 · 11
2015 · 12
2016 · 全年
2016 · 03
2016 · 04
2016 · 05
2016 · 06
2016 · 07
2016 · 09
完整紀錄
逐一閱讀
最新的在最上面，往下越舊。每筆紀錄保留日期依據、公開來源與關係說明。
動畫互動網頁程式入門正式上線
Hahow 公開 API 的 publishTime 是 2016 年 9 月 1 日，與預計開課日相同。這門課後來成為他三門 Hahow 課程裡學生最多的一門；課程頁在 2026 年顯示的購買人數超過一萬三千。同一個學年裡，這門課的作品集合系統與全部單元上線的紀錄，在 2016 到 2017 的牆上。
- 線上課程
- 教學
- 來源
- 前往原始頁面 ↗︎
- Hahow 課程頁 ↗︎
- Hahow public course API ↗︎
- 相關紀錄
- → 動畫互動網頁程式入門：Hahow 第一門課募資上線 · 同一門課上線 (來源關聯)
- → 課程綱要與範例都寫在 CodePen 上 · 這些範例要教的那門課 (來源關聯)
Abstract：倫敦藝術大學短期課程的運算視覺識別
官網作品頁把期間寫成 07/2016 到 08/2016，說明這是他在倫敦藝術大學短期課程完成的作品：題目是把一首指定的音樂視覺化，他用網頁特效技術把音樂變成粒子，加入物理的運動路徑概念與重力、斥力和滑鼠互動，每次播放都會產生獨一無二的視覺識別。他寫這是自己最喜歡的作品之一。Hahow 課程頁的「其他作品」也列了 Abstract（將音樂轉成視覺形式），網頁的存檔在 2017 年 3 月，標題還留著 CodePen 的字樣。
- 音樂視覺化
- 粒子
- 來源
- 前往原始頁面 ↗︎
- cheyuwu.com ↗︎
- monoame.com/graphic_course/（2017-03 Wayback 存檔） ↗︎
- Hahow 課程頁「其他作品」 ↗︎
- 相關紀錄
- → 肆意留詩 #1 焦慮：新詩視覺化 · 同一個夏天的另一件視覺化 (策展主題)
- → 動畫互動網頁程式入門：Hahow 第一門課募資上線 · 同一個夏天 (策展主題)
課程綱要與範例都寫在 CodePen 上
第一門課的綱要本身就是一支 CodePen：「動畫互動網頁程式入門-課程綱要」建於 2016 年 6 月 30 日，募資期間放在課程頁上，累積上萬次瀏覽。開課前的 8 月，範例一支支跟著出現：「Project1」8 月 30 日、「Demo2-5」8 月 27 日、「Animated Web Design #Example-1」8 月 15 日，最後一支的頁面上寫著「吳哲宇（Che-Yu Wu），墨雨設計，創立墨雨設計，從平面設計、動畫玩到網頁前後端開發」。課程頁「課程單元總覽」裡的作業連結，指的就是這些 pen。
- CodePen
- 教材
- 來源
- 前往原始頁面 ↗︎
- CodePen：動畫互動網頁程式入門-課程綱要 ↗︎
- CodePen：Project1 ↗︎
- CodePen：Demo2-5 ↗︎
- CodePen：Animated Web Design #Example-1 ↗︎
- Hahow 課程頁 ↗︎
- 相關紀錄
- → 動畫互動網頁程式入門：Hahow 第一門課募資上線 · 課程頁連到的綱要與範例 (來源關聯)
- → 動畫互動網頁程式入門正式上線 · 這些範例要教的那門課 (來源關聯)
肆意留詩 #1 焦慮：新詩視覺化
2016 年 6 月 monoame.com/poem/1/ 的存檔，頁面標題「肆意留詩 #1 焦慮」，詩是「焦慮 是時鐘裡有 六十 支秒針」，落款「作者：默金 互動視覺：墨雨設計」。Hahow 課程頁的「其他作品」把它列為「新詩視覺化」。這是他最早把文字做成互動視覺的嘗試之一，在官網的 Sketch 與每日創作之前。
- 互動視覺
- 詩
- 來源
- 前往原始頁面 ↗︎
- monoame.com/poem/1/（2016-06-09 Wayback 存檔） ↗︎
- Hahow 課程頁「其他作品」 ↗︎
- 相關紀錄
- → Abstract：倫敦藝術大學短期課程的運算視覺識別 · 同一個夏天的另一件視覺化 (策展主題)
動畫互動網頁程式入門：Hahow 第一門課募資上線
Hahow 公開 API 把《動畫互動網頁程式入門 (HTML/CSS/JS)》的募資期間記為 2016 年 6 月 3 日到 7 月 3 日，課程頁的更新日誌寫 7/4「課程募資期間圓滿結束」，募資門檻是 50 人。課程頁的介紹寫給設計師與沒有程式基礎的人：用 Codepen 邊打邊看，從網頁元素、Sass 到 Vue.js 與互動鋼琴。他當時是交大電機系的學生。
- 線上課程
- 募資
- 來源
- 前往原始頁面 ↗︎
- Hahow 課程頁 ↗︎
- Hahow public course API ↗︎
- 相關紀錄
- → 動畫互動網頁程式入門正式上線 · 同一門課上線 (來源關聯)
- → 課程綱要與範例都寫在 CodePen 上 · 課程頁連到的綱要與範例 (來源關聯)
- → Abstract：倫敦藝術大學短期課程的運算視覺識別 · 同一個夏天 (策展主題)
複雜生活節 2016：講者第 28 號「#墨雨設計 吳哲宇」
活動網站 complexfestival.info 的存檔，記 5 月 28 日的複雜生活節，「共計 32 名精選講者分享」，講者資料第 28 號是「#墨雨設計 吳哲宇」，自我介紹寫：從小玩到大什麼都可以玩過一遍的交大三年級學生，從動畫起家一路玩到大學，在學校裡同時當過鋼琴社長與創立了學聯會行銷部，做了顆超級大聖誕樹之後宣告煙火綻放的歸零，重新開始成立了墨雨設計。這個網站也是他做的：CodePen 上「複雜生活節 Complex Festival」建於 5 月 11 日。
- 演講
- 墨雨設計
TEDxHsinchu 2016：資訊部部長與大會網站
TEDxHsinchu 2016 官網的存檔，團隊名單寫「資訊部 部長：吳哲宇」，設計部部長是後來拍下交大聖誕祭開幕式的郭翊慶；主題「HSINCHU × 2016 × BIG VISION」。CodePen 上一支叫「tedcss」的 pen 建於 2016 年 5 月 13 日，是大會網站的樣式。
- TEDx
- 網站
- 來源
- 前往原始頁面 ↗︎
- tedxhsinchu.com 團隊名單（2016-06-27 Wayback 存檔） ↗︎
- CodePen：tedcss ↗︎
- 相關紀錄
- → 交大聖誕祭「光之舞曲」：一棵會跟著音樂閃的聖誕樹 · 同一群人的前一個活動 (策展主題)
Dyverse Studio 歧響音樂：工作室網站
2016 年 8 月的存檔，網站標題「Dyverse Studio 歧響音樂」，寫工作室創立於 2016 年、承襲多元的音樂風格；頁面原始碼裡留著他的信箱。CodePen 上「Dyverse Studio Index」建於 2016 年 5 月 7 日，另有 3 月的「DYVERGE STUDIO」與 7 月的「Dyverse Studio 0719」三個版本。Hahow 課程頁的「其他作品」列了 Dyverse Studio 音樂工作室，網站現在還在線上。
- 網站
- 音樂工作室
翔虹 AutoCAD 技術中心官網改版
翔虹是他父親的 AutoCAD 教學公司；官網履歷記他 2014 年 5 月到 2016 年 6 月在那裡做製圖與 AutoLISP 開發，Hahow 課程頁的個人經歷寫「翔虹 AutoCAD 技術中心 網頁與管理系統開發」。CodePen 上的「翔虹新官網」建於 2016 年 4 月 16 日，「翔虹 後台」建於 5 月 19 日；2016 年 8 月的存檔裡，www.autocad.tw 的所有圖片都指向 monoame.com。這個網站現在還在線上。
- 網站
- 翔虹
智慧城市黑客松實踐家評審大獎：雜訊空投
經濟部工業局主辦的智慧城市黑客松，官網記 2016 年 3 月 12 日到 13 日在 TAF 空總創新基地，454 位參賽者組成 105 隊，3 月 25 日結合智慧城市展頒獎。官方得獎名單的實踐家評審大獎（獎金 50 萬）是「49、雜訊空投」，那就是他的隊伍；官網履歷把這一場記為第一屆智慧城市黑客松首獎與評審團大獎，Hahow 課程頁的個人經歷寫「台北智慧城市黑客松評審團超級大獎」。名單只列隊名，把隊名和他連起來的是他本人。
- 黑客松
- 智慧城市
自學者之夜：自學平面設計的旅程
官網履歷的演講清單裡最早的一場：2016 年「自學者之夜」，題目是自學平面設計的旅程。沒有活動頁與錄影留下來，只有履歷上的一行。
- 演講
- 自學
靠北交大 2.0：匿名留言板的新版介面
十二秒的影片，標題只有「ｆｂｂｂ」，畫面是瀏覽器裡的「靠北交大 2.0」：一個人坐在筆電前的插圖與一個發文框。2016 年 6 月的存檔留著頁面上的字：「你想靠北什麼？送出靠北 靠北交大 v2.0」。Hahow 課程頁的「其他作品」列了靠北交大 2.0。靠北交大是交大學生的匿名留言板，這是他做的新版介面。
- 網頁
- 交大
monoame.com：墨雨設計工作室的第一個官網
網路檔案館 2015 年 11 月 19 日的存檔，是目前找得到最早的墨雨設計官網：作品頁只列一件「蜂鳥 Hummi Bird」，標語是 Design your life, Design what Inspire your sight；關於頁寫「墨雨設計（MONOAME DESIGN）跨足各領域平面、CI、網站設計，以多元的視野與專業，為您創造不同凡響的作品」。他在 CodePen 上留著一支「Monoame Index Old 2015」，2016 年 3 月建立，是這版首頁的原始碼。官網履歷把墨雨互動設計記為 2014 年創辦。
- 墨雨設計
- 網站
遺忘的藍色島嶼 Forgotten Blue
兩分多鐘的曲子，說明是一段短詩：回憶鹹鹹的像是海風，有些記憶像島嶼，在藍色的大海中逐漸為波浪吞沒。畫面是藍底上白色波浪組成的島。
- 創作
- 音樂
- 來源
- 前往原始頁面 ↗︎
- Che-Yu Wu 吳哲宇 on YouTube ↗︎
- 相關紀錄
- → 致。回憶裡的你：編曲、口白與剪輯 · 頻道上前一首歌 (策展主題)
交大電機之夜：裝置藝術小機器人測試
四十七秒的測試影片，畫面是投影在牆上的「5/17 交大電機之夜」字樣與兩個黃色方塊小機器人。沒有其他說明；這是 2015 年 5 月電機系晚會用的裝置。
- 裝置
- 交大
- 來源
- 前往原始頁面 ↗︎
- Che-Yu Wu 吳哲宇 on YouTube ↗︎
- 相關紀錄
- → 交大聖誕祭「光之舞曲」：一棵會跟著音樂閃的聖誕樹 · 同一個校園的下一件裝置 (策展主題)
Selinko × Remy Martin：NFC 驗真酒瓶的活動 App 介面
官網作品頁把期間寫成 03/2015 到 05/2015，客戶是比利時新創 Selinko 與人頭馬。頁面說明這是為中國市場做的活動 App：因為假酒氾濫，Selinko 在瓶蓋放了開瓶即毀的 NFC 晶片，掃描就知道瓶子有沒有被重複使用。他提案延伸人頭馬的視覺，做了動態概念的情緒板，最後交出簡約現代的介面；另一個挑戰是酒瓶的 3D 模型與動畫，客戶要求做到與真瓶幾乎一樣。Selinko 2015 年 7 月 1 日的新聞稿宣布這款 Rémy Martin Centaur Connected app，作品頁嵌的宣傳影片由製作公司 Ouat 上傳到 Vimeo。
- 介面設計
- 3D
致。回憶裡的你：編曲、口白與剪輯
說明寫演唱與詞曲周俞希，編曲、口白與剪輯吳哲宇，附整首歌詞。畫面是秋天林道上的一個人影，片名疊在中央。兩分半的音樂影片，他負責的是編曲與影像。
- 編曲
- 音樂影片
- 來源
- 前往原始頁面 ↗︎
- Che-Yu Wu 吳哲宇 on YouTube ↗︎
- 相關紀錄
- → 遺忘的藍色島嶼 Forgotten Blue · 頻道上前一首歌 (策展主題)
交大聖誕祭「光之舞曲」：一棵會跟著音樂閃的聖誕樹
影片說明寫這是交大學聯會行銷部「微笑企劃」第二階段的活動，讓樂曲與燈光相互配合，期望路過的師生慢下腳步。官網作品頁寫他帶著行銷部六個人，買 Arduino、拆掉燈串原本的控制盒接上自己的控制板，把七層燈光編排到一首曲子上，聖誕夜在圖書館前的演出吸引了五百多位學生。蘋果日報 12 月 22 日的即時新聞寫網友稱這是「技術宅的浪漫」，樹是向系主任要來的 4.5 公尺高。這支測試影片累積三萬七千多次觀看。
- Arduino
- 交大
- 來源
- 前往原始頁面 ↗︎
- Che-Yu Wu 吳哲宇 on YouTube ↗︎
- cheyuwu.com ↗︎
- 蘋果日報 2014-12-22（PTT 轉錄） ↗︎
- 點燈開幕式全程（郭翊慶 上傳） ↗︎
- Proj.Smile 微笑企劃 Facebook ↗︎
- 相關紀錄
- → 交大電機之夜：裝置藝術小機器人測試 · 同一個校園的下一件裝置 (策展主題)
- → 複雜生活節 2016：講者第 28 號「#墨雨設計 吳哲宇」 · 他後來怎麼說這棵樹 (策展主題)
- → TEDxHsinchu 2016：資訊部部長與大會網站 · 同一群人的前一個活動 (策展主題)
台北國際美容展：兩年的網站、票務與會員系統
官網作品頁把期間寫成 09/2014 到 09/2015，客戶是聯合報。頁面說明這是台灣最大的美容展，他設計網頁並建了票務系統，一年內做了四輪視覺與網頁改版，把國際品牌的美妝設計語彙帶進原本保守的台灣展會；連續兩年負責展覽網站，後來又做了會員系統，憑證件領免費門票、記錄參觀習慣，協助約兩萬名持證觀眾的入場驗證。2015 年 11 月 monoame.com 首頁的存檔正是「第 25 屆台北國際美容化妝品展」網站的測試版，頁尾寫「網站設計與開發：墨雨設計」。
- 網站
- 委託
- 來源
- 前往原始頁面 ↗︎
- cheyuwu.com ↗︎
- 美容展網站測試版（monoame.com 2015-11 Wayback 存檔） ↗︎
- Hahow 課程頁個人經歷 ↗︎
- 相關紀錄
- → monoame.com：墨雨設計工作室的第一個官網 · 同一個網域上的工作室官網 (策展主題)
- → Selinko × Remy Martin：NFC 驗真酒瓶的活動 App 介面 · 同一年的委託案 (策展主題)
鏘：陳啟昌 25 周年回顧音樂會宣傳片
一分多鐘的動態影像，說明寫「11/30 星期六 6:30 開演（6:00 免票入場）At 蘆洲功學社音樂廳」。畫面是金色書法體的「鏘」字與「陳啟昌 25 週年回顧音樂會」。他在建中口琴社三年，這支是他為口琴演奏家的音樂會做的宣傳片。
- 動態影像
- 口琴
Joker：2013 年 11 月的一首創作
說明只有「20131105 創作」。一分二十秒，畫面是一束聚光燈下站在球上的小丑剪影，四周是黑色的人影。這是大一上學期留在頻道上的一首曲子。
- 編曲
- 創作
UDN TV《為自己按讚》第一集：數位創作，吳哲宇與林自均
聯合報系 udn.tv 的節目《為自己按讚》，第一集主題「數位創作」，兩位受訪者是吳哲宇與林自均。二十五分鐘的節目由頻道「為自己按讚」上傳，說明只有一行「udn.tv【為自己按讚】第一集 數位創作／吳哲宇．林自均」。他剛上大學一個多月，節目談的是高中時期一路得獎的數位創作。官網履歷把這一集列在報導裡。
- 電視
- 專訪
體感簡單滑鼠撰寫：用深度攝影機控制游標
一分鐘的螢幕錄影，畫面左邊是程式碼，右邊是深度攝影機的灰階人影，標題寫「體感簡單滑鼠撰寫」。沒有其他說明；這是大一那年秋天用 Kinect 一類的深度攝影機做的輸入測試。
- 體感
- Kinect
- 來源
- 前往原始頁面 ↗︎
- Che-Yu Wu 吳哲宇 on YouTube ↗︎
- 相關紀錄
- → 語音辨識 API 可愛介面：對著瀏覽器說話的小實驗 · 同一個秋天的另一個輸入實驗 (策展主題)
語音辨識 API 可愛介面：對著瀏覽器說話的小實驗
一分多鐘的螢幕錄影，標題寫「語音辨識 API 可愛界面 XDDD」，畫面是瀏覽器裡一個動漫風格的對話介面，說話就會轉成文字。大一那年秋天的小實驗，沒有其他說明。
- 網頁實驗
- 語音
- 來源
- 前往原始頁面 ↗︎
- Che-Yu Wu 吳哲宇 on YouTube ↗︎
- 相關紀錄
- → 體感簡單滑鼠撰寫：用深度攝影機控制游標 · 同一個秋天的另一個輸入實驗 (策展主題)