CHE-YU WU / LAB
一年的創作現場
沿著聲音、記憶與教學，走進這一年持續發生的實驗。
2016-09-09 — 2017-09-0933 筆公開紀錄
紅線：來源關聯 麻線：共同主題 移到紙上看關係名稱
完整紀錄 ↓這裡依月份往下讀，每張卡下面的小標是它的關係，點一下會跳到另一筆紀錄
2016 · 10
2016 · 11
2017 · 全年
2017 · 01
2017 · 03
2017 · 04
2017 · 05
2017 · 06
2017 · 07
2017 · 08
完整紀錄
逐一閱讀
每筆紀錄保留日期依據、公開來源與關係說明。
動畫互動網頁程式入門：即時作品集合系統上線
Hahow 第一門課《動畫互動網頁程式入門》的課程頁更新日誌寫著 11/7 新增即時作品集合系統，並記下已經超過一百件同學繳交作品與練習，同一則更新也寫到 11/15 之前已上線 85 單元共 1230 分鐘。這個收作業的網站是後來媒體報導裡提到的客製化作業收集機制。
- 課程營運
- 學生作品
動畫互動網頁程式入門：全部單元上線完畢
課程頁更新日誌記下 1/17 全部單元上線完畢。依 Hahow 公開 API，這門課共 13 章，影片總長 104726 秒，也就是 29 小時左右，課程頁另標示突破 8000% 集資成果與超過 4000 人一同學習。
- 線上課程
- 交付
動畫互動網頁程式入門：課程共筆開放共同編輯
課程頁更新日誌寫著 1/26 新增課程共筆，內容包含學習目錄與推薦時間、課程勘誤補充、推薦書籍，並註明持續新增、可以一起編輯。課程的維護因此從單向影片轉成學生能一起改的文件。
- 共筆
- 課程營運
2017 awiclass 同學作品集網站
兩門 Hahow 課程的課程頁都把同學作品集連到 2017.awiclass.monoame.com，第一門課對應 proj/1，第二門課對應 proj/2。站名掛在墨雨設計的網域下，頁面標題寫著 Hahow 動態互動網頁程式入門，收的是學生交上來的作品與練習。
- 學生作品
- 教學工具
來源與相關紀錄
- 動畫互動網頁程式入門：即時作品集合系統上線 · 同一套收作業的網站 (來源關聯)
- Animated-Web-Course：動態網頁程式設計課程的配套工具 · 同一套作品集系統的後端 (來源關聯)
動畫互動網頁特效入門：募資上線與直播說明
Hahow 公開 API 記下第二門課《動畫互動網頁特效入門（JS/CANVAS）》的募資起算時間為 2017-05-18。同一天的直播預告寫著睽違了一年，今天不來點寇汀，來點新課程吧，並說明這次重點放在 JS、Canvas 與 Vue.js，當晚十點整直播即時說明課程與解答問題，預告裡也提到上一堂課有超過兩千八百人參與。
- 募資
- Canvas
來源與相關紀錄
- 動畫互動網頁特效入門正式上線 · 同一門課的正式上線 (策展主題)
- 群眾觀點：用 50 個小時，與 4300 位同學一起自己動畫互動網頁自己做 · 報導這次募資的文章 (來源關聯)
動畫互動網頁特效入門：募資期間結束
Hahow 公開 API 把第二門課的募資截止時間記為 2017-06-17。募資期間的媒體報導寫著專案上線一天湧入 500 人支持，不到一個月累積超過 1300 人報名，文章結尾標示課程倒數最後 2 天。
- 募資
- 學生人數
來源與相關紀錄
- 群眾觀點：用 50 個小時，與 4300 位同學一起自己動畫互動網頁自己做 · 同一段募資期的報導 (來源關聯)
動畫互動網頁特效入門正式上線
Hahow 公開 API 記下第二門課的上線時間為 2017-08-16，共 8 章，影片總長 185106 秒，約 51 小時。課程頁把內容分成四大系列單元，寫著以 2300 分鐘帶你走遍網頁特效的世界，四個階段分別是 HTML 與 CSS、JavaScript 程式與動畫、數學與物件導向下的 Canvas 互動運算藝術、Vue.js 整合應用，另有 VueX 與 Vue-router、GSAP、D3.js、Three.js 四個解鎖加碼單元。
- 線上課程
- Canvas
老闆來點寇汀：從 Illustrator 插圖到互動動畫，捷運地景音樂網站
直播講解如何在 Illustrator 裡製作場景、設定動畫觸發，並實際示範捷運地景音樂網站的互動製作。影片說明寫著要讓蔥油餅阿伯展現獨門絕技。這支是這一季裡觀看數較高的一支，YouTube 頁面標示 10882 次觀看。
- SVG 動畫
- Illustrator
老闆來點寇汀：用 Vue.js 組件做動態飯店房間清單
直播做一個房間選擇器，可以增減房間、調整打折數、分別訂房，並動態顯示結帳結果。影片說明寫著會講解 Vue.js 組件概念、屬性與方法的繼承，從零開始刻出一個訂房前端頁面。YouTube 頁面標示 10961 次觀看。
- Vue.js
- 元件
老闆來點寇汀：來用可怕的三角函數做網頁吧 Part 1
從抽象的數學走到實際的動畫。直播講解三角函數基礎概念、如何理解數學在程式中的應用，並體驗一些基礎三角函數應用手法。影片說明附上第二集連結，也附上 Hahow 第一門課的連結。
- 三角函數
- 動畫原理
來源與相關紀錄
- 老闆來點寇汀：用 Vue.js 組件做動態飯店房間清單 · 同一季週四寫程式系列 (策展主題)
- 老闆來點寇汀：用數學土炮畫一個時鐘 · 同一組的第二集 (來源關聯)
老闆來點寇汀：用數學土炮畫一個時鐘
接續上一集，直播講解如何理解三角函數用於繪圖或網頁動畫，以及如何製作一個動態的時鐘。影片說明附上 CodePen 範例連結。
- 三角函數
- Canvas
來源與相關紀錄
- 老闆來點寇汀：來用可怕的三角函數做網頁吧 Part 1 · 同一組的第二集 (來源關聯)
- 老闆來點寇汀：讓我們畫個偵測敵人用的雷達圖吧 · 接續同一條 Canvas 介面線 (來源關聯)
老闆來點寇汀：Vue.js 組件與即時關鍵字反白
直播講解資料載入、Vue 組件、map 與 filter，以及正規表達式的一些概念，並用雜學校的資料當範例，順帶講自己做這個功能遇到的雷點。影片說明附上 CodePen 範例連結。
- Vue.js
- 資料處理
老闆來點寇汀：讓我們來操控地圖顯示對應天氣吧
直播講解如何在 Illustrator 中把地圖的資料附在 SVG 上，在網頁中動態載入，並用 Vue.js 切換顯示的天氣資料。影片說明附上 CodePen 範例，以及後來補寫的直播筆記連結。YouTube 頁面標示 13270 次觀看，是這一季裡觀看數最高的一支。
- 資料視覺化
- SVG
老闆來點寇汀：讓我們來快速寫個漂浮感的輪播吧
直播講解輪播在網站裡很常用，但座標計算與更新很繁瑣，於是示範如何用 Vue.js 串連資料快速打造輪播，並分享一些常用小技巧。影片說明附上 CodePen 範例連結。
- Vue.js
- 介面元件
來源與相關紀錄
- 老闆來點寇汀：讓我們來操控地圖顯示對應天氣吧 · 同一季週四寫程式系列 (策展主題)
- 老闆來點寇汀：讓我們畫個偵測敵人用的雷達圖吧 · 同一季週四寫程式系列 (策展主題)
老闆來點寇汀：讓我們畫個偵測敵人用的雷達圖吧
接續前一集用 Canvas 畫虛擬介面時鐘的概念，除了極座標之外，還牽涉多物件的更新與繪製，做出一個虛擬的雷達掃描介面。影片說明附上 CodePen 範例連結。
- Canvas
- 極座標
來源與相關紀錄
- 老闆來點寇汀：讓我們來快速寫個漂浮感的輪播吧 · 同一季週四寫程式系列 (策展主題)
- 老闆來點寇汀：用數學土炮畫一個時鐘 · 接續同一條 Canvas 介面線 (來源關聯)
老闆來點寇汀：來做 iOS 動態月曆結合待辦行程吧
直播講解用 Vue.js 處理月曆顯示的動態樣式，除了用資料計算與排版月曆之外，還善用計算屬性設定當天行程小點與假日顯示等樣式，時間夠的話再做點擊後編輯待辦事項。
- Vue.js
- 計算屬性
老闆來點寇汀：來做動態井字遊戲入門 Vue.js 吧
影片說明寫著苦思很久，想找一個不會太難又能講到東西的題目，於是想起小時候的回憶，用 Vue.js 實作遊戲邏輯，刻一個簡潔有力的介面。說明附上 CodePen 範例，以及一個串 Firebase 的多人遊玩版本。
- Vue.js
- 遊戲邏輯
來源與相關紀錄
- 老闆來點寇汀：來做 iOS 動態月曆結合待辦行程吧 · 同一季週四寫程式系列 (策展主題)
- 老闆來點寇汀：便利貼牆 PART2，串 Firebase 多人同時編輯 · 同一段串 Firebase 的實驗 (策展主題)
- vue-lazy-table：最少設定就能顯示複雜資料的 Vue 表格元件 · 同一段 Vue.js 密集期 (策展主題)
老闆來點寇汀：來做換色與快速整理的便利貼牆吧 PART1
影片說明寫著靈感總是來之匆匆，沒有好好記下來又是一陣絞盡腦汁，因此用 Vue 實作便利貼，並分享網頁上 drag and drop 的一些有趣應用。
- Vue.js
- 拖放
來源與相關紀錄
- 老闆來點寇汀：便利貼牆 PART2，串 Firebase 多人同時編輯 · 同一組的第二集 (來源關聯)
老闆來點寇汀：便利貼牆 PART2，串 Firebase 多人同時編輯
承接上一集的簡易版便利貼，這次除了調整細節與動畫之外，也串接 Firebase 資料庫，讓便利貼牆可以多人同時編輯分享。影片說明列出這次會分享 Vue.js 的資料操作與整理、transition 進出場動畫，以及串接 Firebase 保存資料與即時更新。
- Firebase
- 多人協作
來源與相關紀錄
- 老闆來點寇汀：來做動態井字遊戲入門 Vue.js 吧 · 同一段串 Firebase 的實驗 (策展主題)
- 老闆來點寇汀：來做換色與快速整理的便利貼牆吧 PART1 · 同一組的第二集 (來源關聯)
台北聲音地景計畫：捷運站體音樂徵選互動網站
官網作品頁把期間寫成 01/2017 到 03/2017，客戶列為豐collect音樂製作與臺北市政府捷運工程局。頁面說明這個案子與音樂製作方合作辦理 2017 年捷運地景音樂徵選，收集在地音樂家的作品，並在東門、松山機場、龍山寺等站點採集自然音、誦經聲與攤販的招呼聲。市府原本只要一個放報名資訊的簡單網站，他提案改成能把錄音播回給乘客聽的網站，讓那些平常被忽略的聲音重新被聽見。
- 聲音
- 公共委託
來源與相關紀錄
- 老闆來點寇汀：從 Illustrator 插圖到互動動畫，捷運地景音樂網站 · 同一個捷運地景音樂案子 (來源關聯)
- Unleash the Future：n3xtcon 品牌識別與網站 · 同一年的委託案 (策展主題)
工研院綠能所家庭用電家計簿：3D 場景與資料視覺化
官網作品頁把期間寫成 03/2017 到 05/2017，客戶是工研院綠能與環境研究所。頁面說明原本的網頁還帶著 Flash 與過時的互動視覺，於是改成 3D 場景，團隊做了五個 3D 房間，他負責網頁的體驗優化，用泡泡圖把全國用電資料視覺化，再引導使用者填表。前端用 Vue.js，填完表就能看到自己的用電視覺化結果。
- 資料視覺化
- 3D
來源與相關紀錄
- itri2017：工研院家庭用電家計簿的前端 repo · 同一個案子的公開 repo (來源關聯)
Unleash the Future：n3xtcon 品牌識別與網站
官網作品頁把期間寫成 06/2017 到 12/2017，客戶是洛杉磯的科技論壇 n3xtcon。頁面說明對方要一套能同時延伸到網站與線下印刷的完整形象，任務是從原本 logo 的四個三角形出發重做品牌。幾次提案後客戶選了重疊的概念，新 logo 是一條折疊並自我交疊的緞帶。網站採板塊與漂浮的概念，在深藍空間裡放螢光物件，並用 Pixi.js 做行星的動態效果。
- 品牌識別
- WebGL
Animated-Web-Course：動態網頁程式設計課程的配套工具
repo 描述寫著動態網頁程式設計課程。README 記下一支 parse_codepen API，用來抓 CodePen 的 og 圖與標題文字，傳入網址陣列就回傳網站的 og 資訊，並自動暫存解析過的網址加速載入。API 掛在 monoame.com 的 awi_class 路徑下，也就是同學作品集網站的後端。
- 課程工具
- CodePen
來源與相關紀錄
- 2017 awiclass 同學作品集網站 · 同一套作品集系統的後端 (來源關聯)
- Organic-Alpha：串前後端的 PHP 資料流腳本庫 · 同一天開的 repo (策展主題)
- 第 22 屆花旗聯合勸募活動動態網頁 · 同一個月的公開 repo (策展主題)
Organic-Alpha：串前後端的 PHP 資料流腳本庫
公開 repo，描述寫著一個以 PHP 資料流把前端與後端結合起來的函數式腳本庫。repo 只有 README 一行說明，沒有進一步文件。
- PHP
- 資料流
第 22 屆花旗聯合勸募活動動態網頁
公開 repo，README 寫著第 22 屆花旗聯合勸募活動動態網頁，並引了活動文案，講聯合勸募與花旗銀行長期匯集愛的星火。README 附上 CodePen 版本與當年的活動頁網址 citi2016.unitedway.org.tw。
- 活動網頁
- 委託案
zashare_website：雜學校網站
公開 repo，描述與 README 都只寫 zashare 雜學校網站。主要語言標為 JavaScript，最後一次推送就在開檔當天。雜學校是他這段時間反覆出現的客戶，直播裡也拿它的資料當範例。
- 雜學校
- 委託案
來源與相關紀錄
- 老闆來點寇汀：Vue.js 組件與即時關鍵字反白 · 同一個雜學校網站線 (策展主題)
- pacman_zashare：雜學校的小精靈網頁 · 同一個雜學校客戶線 (策展主題)
TaichungDigital2017：台中展覽網站
公開 repo，描述只寫 taichung exhibition，主要語言標為 Vue，最後一次推送在 2017-06-24。README 只有標題一行，展覽名稱與合作單位未能從公開頁面確認。
- 展覽網站
- Vue.js
itri2017：工研院家庭用電家計簿的前端 repo
公開 repo，主要語言標為 Vue，建立時間落在官網作品頁記的工研院案期間之內。README 只有兩行標題，沒有進一步說明。
- Vue.js
- 委託案
來源與相關紀錄
- 工研院綠能所家庭用電家計簿：3D 場景與資料視覺化 · 同一個案子的公開 repo (來源關聯)
- TaichungDigital2017：台中展覽網站 · 同一段接案期的 repo (策展主題)
vue-lazy-table：最少設定就能顯示複雜資料的 Vue 表格元件
公開 repo，描述寫著一個用簡單語法、以最少設定顯示複雜資料的 Vue 表格元件。README 的理由寫得很直白，後端有時給了太多型態的資料，懶得一一標欄位時，這個元件只要把資料傳進去就好，並示範最小設定下自動命名欄位。這是他這段時間的公開 repo 裡收到最多星星的一個，目前 6 顆。
- Vue.js
- 開源元件
DschoolNTU2017：台大創新設計學院網站
公開 repo，描述寫著 Dschool NTU Website，主要語言標為 Vue，最後一次推送在 2017-08-22。repo 沒有 README。
- 大學網站
- Vue.js
pacman_zashare：雜學校的小精靈網頁
公開 repo，README 標示是一個 Vue.js 專案，用 webpack 模板起的。主要語言為 JavaScript，最後一次推送在隔天。Hahow 第二門課的單元列表裡也有一個結合陣列與地圖製作小精靈的 CodePen 範例。
- 雜學校
- 網頁遊戲
來源與相關紀錄
- DschoolNTU2017：台大創新設計學院網站 · 同一個月的公開 repo (策展主題)
- zashare_website：雜學校網站 · 同一個雜學校客戶線 (策展主題)
TEDxNCUE「嚮」：跨領域結合創造可能性
TED 的官方活動頁把 TEDxNCUE 記在 2017 年 5 月 7 日下午 1:30 到 6:30，地點在彰化縣，主題譯為 Forward。他的場次題目是跨領域結合創造可能性，講的是用腦袋生活、分析解構再結合，錄影後來上到 TEDx Talks 頻道，長度 18 分 09 秒。
- 跨領域
- 演講
來源與相關紀錄
- 群眾觀點：用 50 個小時，與 4300 位同學一起自己動畫互動網頁自己做 · 同一段時間的對外身份 (策展主題)
群眾觀點：用 50 個小時，與 4300 位同學一起自己動畫互動網頁自己做
群眾觀點的報導，作者郭丞哲時任貝殼放大產品設計師。文章寫一年前的《動態互動網頁程式入門》帶領近 3000 位同學走入前端網頁，一年後的《動畫互動網頁特效入門》專案上線一天湧入 500 人支持，不到一個月累積超過 1300 人報名。文中稱他為交大學生、設計師、網頁全端雙棲工程師、墨雨設計創辦人，剛滿 22 歲，代表作列了台北聲音地景計畫、雜學校 ZaShare、複雜生活節，並寫到他今年初創立粉絲頁老闆來點寇汀吧，每週四 22:00 直播。文章把課程設計的切入點歸在成就感與讓你的產出能被看見，並記下兩個對抗低完課率的機制，贊助者專屬臉書社團與客製化的作業收集網站。
- 線上課程
- 報導
來源與相關紀錄
- 動畫互動網頁特效入門：募資上線與直播說明 · 報導這次募資的文章 (來源關聯)
- 動畫互動網頁特效入門：募資期間結束 · 同一段募資期的報導 (來源關聯)
- TEDxNCUE「嚮」：跨領域結合創造可能性 · 同一段時間的對外身份 (策展主題)