# 思想 我把想法想清楚的三種方式：寫下來、被問出來、教出去。 全部 140 [對話錄欄目 →](https://cheyuwu.com/zh/dialogues/)[完整演講紀錄 · CV](https://cheyuwu.com/zh/cv/)[Atom](https://cheyuwu.com/feed.xml) 這裡把它們放在一起：自己寫的長文、跟 Muse 的對話錄、公開演講，還有我教過的課。順序照時間，新的在上面；想找某一種，用分類切。 精選 對話錄2026-09-02 ### 演講前一天的十二輪訪談 DesignBIZ Summit 2026《重新定義設計感知》上台前，從零開始的思考紀錄 DesignBIZ Summit 2026 上台前一天 [https://cheyuwu.com/zh/dialogues/2026-09-02-designbiz-from-zero/](https://cheyuwu.com/zh/dialogues/2026-09-02-designbiz-from-zero/) 對話錄2026-04-21 ### 未竟之花訪談 II：視覺的爵士樂 [https://cheyuwu.com/zh/dialogues/2026-04-21-unfinished-bloom-visual-jazz/](https://cheyuwu.com/zh/dialogues/2026-04-21-unfinished-bloom-visual-jazz/) 對話錄2026-04-14 ### 未竟之花訪談 I：作品哲學 [https://cheyuwu.com/zh/dialogues/2026-04-14-unfinished-bloom-preserving-possibility/](https://cheyuwu.com/zh/dialogues/2026-04-14-unfinished-bloom-preserving-possibility/) ## 2026 - 長文2026-10-04 ### 丟三落四的人，人生的策展 把自己人生這幅巨大的拼圖，一塊一塊拼起來 全文 · cheyuwu.com [https://cheyuwu.com/zh/writing/2026-life-curation/](https://cheyuwu.com/zh/writing/2026-life-curation/) - 長文2026-10-04 ### Open AudioVisual 開源音像表演框架 好想要世界跟創作變得更有趣啊 全文 · cheyuwu.com [https://cheyuwu.com/zh/writing/2026-open-audiovisual/](https://cheyuwu.com/zh/writing/2026-open-audiovisual/) - 對話錄2026-10-02No. 48 ### 《咖啡幻夢》策展訪談：在場，而不是被注意 原始訪談紀錄全文 作品訪談全文 · cheyuwu.com [https://cheyuwu.com/zh/dialogues/2026-10-02-coffee-dreamscape-curatorial-interview/](https://cheyuwu.com/zh/dialogues/2026-10-02-coffee-dreamscape-curatorial-interview/) - 演講2026-09-27 ### AI x 新媒體藝術 x 創作思維｜寫程式愈來愈快，創作者反而更需要花時間讀書 AI練功場 Podcast 訪談，從國中為了買筆電參加數位創作競賽講到紐約求學，再談 AI 讓寫程式變快之後，他為什麼把省下的時間拿去讀書與看作品。 AI練功場 Podcast↗︎ [https://www.youtube.com/watch?v=AOfq0CebzwU](https://www.youtube.com/watch?v=AOfq0CebzwU) - 教學2026-09-24 ### 新媒體藝術全景課：11 週完成 8 件作品，打造你的個人創作流 (Hahow) 2026 年新課，帶學生走過從程式到展覽的完整創作路徑，11 週做出 8 件作品並用 AI 建立個人創作流，已有 357 名學生。 Hahow — 357 students↗︎ [https://newmediaart.course.monolab.world/?utm_source=cheyuwu.com&utm_medium=referral&utm_campaign=thinking](https://newmediaart.course.monolab.world/?utm_source=cheyuwu.com&utm_medium=referral&utm_campaign=thinking) - 演講2026-09-03 ### 重新定義「設計感知」：AI 如何介入視覺創作與互動藝術 Shopping Design 設計新商業論壇的開場議程，談互動體驗設計如何改寫新媒體藝術的商業邊界，並從 Taiwan.md 出發談 AI friendly 的科技人文環境。 DesignBIZ Summit 2026 設計新商業論壇↗︎ [https://designbiz.shoppingdesign.com.tw/2026/](https://designbiz.shoppingdesign.com.tw/2026/) - 對話錄2026-09-02No. 1 ### 演講前一天的十二輪訪談 DesignBIZ Summit 2026《重新定義設計感知》上台前，從零開始的思考紀錄 DesignBIZ Summit 2026 上台前一天全文 · cheyuwu.com [https://cheyuwu.com/zh/dialogues/2026-09-02-designbiz-from-zero/](https://cheyuwu.com/zh/dialogues/2026-09-02-designbiz-from-zero/) - 長文2026-08-23 ### 感謝 Shopping Design 的專訪，紀錄下我的思考軌跡 轉發 Shopping Design 專訪時寫的四段話：AI 把執行門檻降到最低之後，他更迷上劇場、即興、文學這些由人創造的事物。他也寫，新科技若只讓人更忙，擁有再多便利，幸福相乘起來仍是零。 Facebook↗︎ [https://www.facebook.com/cheyuwu345/posts/pfbid02KXU4mJqVK8c6cVf3NaK9Q6W35edMq1WbQmMHVPiBhgNeSjwckVWyEm9NRksSPuwrl](https://www.facebook.com/cheyuwu345/posts/pfbid02KXU4mJqVK8c6cVf3NaK9Q6W35edMq1WbQmMHVPiBhgNeSjwckVWyEm9NRksSPuwrl) - 對話錄2026-08-18No. 41 ### HumanRouter：AI 委派人類的思考軌跡 創作思考筆記全文 · cheyuwu.com [https://cheyuwu.com/zh/dialogues/2026-08-18-humanrouter-full-notes/](https://cheyuwu.com/zh/dialogues/2026-08-18-humanrouter-full-notes/) - 對話錄2026-08-18No. 42 ### 行星尺度的野實驗清單 創作思考筆記全文 · cheyuwu.com [https://cheyuwu.com/zh/dialogues/2026-08-18-planetary-experiments-full-notes/](https://cheyuwu.com/zh/dialogues/2026-08-18-planetary-experiments-full-notes/) - 演講2026-08-18 ### Taiwan.md：為台灣寫的開源數位人類學博物館 2026 台灣人工智慧年會「技術開發展示」議程的 20 分鐘場次，介紹 Taiwan.md 如何為台灣寫一座 AI 讀得懂的開源知識庫。 2026 台灣人工智慧年會↗︎ [https://conf2026.aiacademy.tw/agenda/ses-dev-4/](https://conf2026.aiacademy.tw/agenda/ses-dev-4/) - 演講2026-08-16 ### 當 AI 回答錯誤的台灣資訊代表什麼？台灣主權 AI 與內容授權的權衡 Openbook 閱讀誌系列講座第二場，與 Noopher AI 創辦人陳宜昌對談，一方從大型語言模型訓練、一方從開源知識庫出發，談繁中語料不足與內容授權之間的兩難。 Openbook 閱讀誌講座（與陳宜昌對談）↗︎ [https://www.openbook.org.tw/article/p-72897](https://www.openbook.org.tw/article/p-72897) - 對話錄2026-08-12No. 40 ### 海潮理論與 P 人的蒸汽機 原始思考筆記全文 原始思考紀錄全文 · cheyuwu.com [https://cheyuwu.com/zh/dialogues/2026-08-12-tides-and-the-steam-engine/](https://cheyuwu.com/zh/dialogues/2026-08-12-tides-and-the-steam-engine/) - 對話錄2026-08-10No. 11 ### 白袍與封印：長大讓我們把創造者的能力收起來 原始思考筆記全文 原始思考紀錄全文 · cheyuwu.com [https://cheyuwu.com/zh/dialogues/2026-08-10-white-coat-curiosity/](https://cheyuwu.com/zh/dialogues/2026-08-10-white-coat-curiosity/) - 對話錄2026-08-06No. 9 ### 創作母體與長線風格 原始思考筆記全文 原始思考紀錄全文 · cheyuwu.com [https://cheyuwu.com/zh/dialogues/2026-08-06-a-matrix-for-creative-practice/](https://cheyuwu.com/zh/dialogues/2026-08-06-a-matrix-for-creative-practice/) - 演講2026-07-26 ### Taiwan.md：讓 AI 讀懂台灣的開源知識生命體與數位人類學博物館 NVIDIA RTX AI PC 講座下午場，談 Taiwan.md 這座開源數位人類學博物館怎麼演化，以及把它跑進地端、與雲端混合運作的實測。 NVIDIA RTX AI PC 講座 — 台北文創↗︎ [https://events.nvidia.com/rtx-ai-pc-seminar-taiwan](https://events.nvidia.com/rtx-ai-pc-seminar-taiwan) - 對話錄2026-07-19No. 8 ### Taiwan.md 的淘金與珊瑚礁隱喻 原始思考筆記全文 原始思考紀錄全文 · cheyuwu.com [https://cheyuwu.com/zh/dialogues/2026-07-19-gold-panning-and-coral-reefs/](https://cheyuwu.com/zh/dialogues/2026-07-19-gold-panning-and-coral-reefs/) - 演講2026-06-27 ### 我的程式碼終於活過來了 — 從演算藝術到數位生命體 Generative AI 年會主舞台正式場，題目延續 3 月小聚，這次從 p5.js 生成藝術講起，把人生資料與 Taiwan.md 串成一個有記憶、會自己長大的數位生命體。 Generative AI 年會 — 2026/06/27 主舞台↗︎ [https://blog.gaiconf.com/2026/cheyu-wu-digital-life/](https://blog.gaiconf.com/2026/cheyu-wu-digital-life/) - 對話錄2026-06-24No. 39 ### 創作判斷的質性田野調查（極致覆盤） 原始思考筆記全文 原始思考紀錄全文 · cheyuwu.com [https://cheyuwu.com/zh/dialogues/2026-06-24-qualitative-fieldwork-in-creative-judgment/](https://cheyuwu.com/zh/dialogues/2026-06-24-qualitative-fieldwork-in-creative-judgment/) - 對話錄2026-06-19No. 38 ### 從「想打開腦子」到看見學習恐懼的結構 原始思考筆記全文 原始思考紀錄全文 · cheyuwu.com [https://cheyuwu.com/zh/dialogues/2026-06-19-learning-and-the-unknown/](https://cheyuwu.com/zh/dialogues/2026-06-19-learning-and-the-unknown/) - 對話錄2026-05-31No. 46 ### 虛無感之後：凌駕金錢的實驗與保護欲 原始思考筆記全文 原始思考紀錄全文 · cheyuwu.com [https://cheyuwu.com/zh/dialogues/2026-05-31-after-emptiness/](https://cheyuwu.com/zh/dialogues/2026-05-31-after-emptiness/) - 演講2026-05-22 ### 一間以「台灣」為教材的國際學校：Taiwan.md 雜學校 Podcast 訪談，從在威尼斯雙年展被問「哪裡可以真正了解台灣」說起，聊 Taiwan.md 的誕生，以及花三個月讓 AI 深度訪談自己的經驗。 雜學校 Podcast EP60↗︎ [https://www.youtube.com/watch?v=L3EkK8WxltI](https://www.youtube.com/watch?v=L3EkK8WxltI) - 演講2026-05-06 ### NFT 是炒作還是歷史？它真正的價值是什麼？ 寶博朋友說下集，從一次荒謬的抄襲事件讓他意外走進 NFT 圈講起，聊他在 NFT 世界的過去、現在與未來，以及他怎麼重新理解「價值」。 寶博朋友說 EP341↗︎ [https://podcasts.apple.com/tw/podcast/id1484923390?i=1000766343759](https://podcasts.apple.com/tw/podcast/id1484923390?i=1000766343759) - 演講2026-05-05 ### 從生成式藝術到 Taiwan.md：讓台灣文化長出「數位生命體」 寶島聯播網《寶島有意思》專訪，從交大電機與紐約大學的背景談到 Taiwan.md，以及他為什麼把這座開放大眾修改的知識庫看成一個數位生命體。 寶島聯播網《寶島有意思》↗︎ [https://www.youtube.com/watch?v=t6CLV8p2hh4](https://www.youtube.com/watch?v=t6CLV8p2hh4) - 對話錄2026-05-02No. 37 ### 十年思想軌跡：六篇散文的交叉觀察 創作思考筆記全文 · cheyuwu.com [https://cheyuwu.com/zh/dialogues/2026-05-02-ten-years-of-thought-full-notes/](https://cheyuwu.com/zh/dialogues/2026-05-02-ten-years-of-thought-full-notes/) - 演講2026-04-29 ### AI＋開源寫出「台灣使用說明書」，從台積電到早餐店台味全包！ 寶博朋友說上集，聊 Taiwan.md 怎麼開始：常被問到「哪裡可以真正了解台灣」，於是用 SSOT 與開源的做法替台灣寫一份 README。 寶博朋友說 EP340↗︎ [https://podcasts.apple.com/tw/podcast/id1484923390?i=1000764210230](https://podcasts.apple.com/tw/podcast/id1484923390?i=1000764210230) - 對話錄2026-04-21No. 7 ### 未竟之花訪談 II：視覺的爵士樂 全文 · cheyuwu.com [https://cheyuwu.com/zh/dialogues/2026-04-21-unfinished-bloom-visual-jazz/](https://cheyuwu.com/zh/dialogues/2026-04-21-unfinished-bloom-visual-jazz/) - 長文2026-04-19 ### Taiwan.md — 第三十二天 Taiwan.md 上線一個月的 Facebook 長文：2,509 個 commits，中文文章從 50 篇長到 524 篇，翻譯貢獻者柒藍一個人送了 138 個 PR。也寫上線那週爆紅之後，他為什麼先沉潛修復。 Facebook↗︎ [https://www.facebook.com/cheyuwu345/posts/pfbid02o9cq6X9fhACEZhZg8CmR6W6CXRUkWhf5iCPtPRch3dWyx3DsinEWdHb9h7VFU6GWl](https://www.facebook.com/cheyuwu345/posts/pfbid02o9cq6X9fhACEZhZg8CmR6W6CXRUkWhf5iCPtPRch3dWyx3DsinEWdHb9h7VFU6GWl) - 對話錄2026-04-14No. 6 ### 未竟之花訪談 I：作品哲學 全文 · cheyuwu.com [https://cheyuwu.com/zh/dialogues/2026-04-14-unfinished-bloom-preserving-possibility/](https://cheyuwu.com/zh/dialogues/2026-04-14-unfinished-bloom-preserving-possibility/) - 對話錄2026-04-09No. 45 ### 金錢即 Access Token：從量子力學到自由意志的生命對話 原始對話整理筆記全文 原始思考紀錄全文 · cheyuwu.com [https://cheyuwu.com/zh/dialogues/2026-04-09-money-as-an-access-token/](https://cheyuwu.com/zh/dialogues/2026-04-09-money-as-an-access-token/) - 長文2026-04-06 ### 一個藝術家的生命物理學 我如何在 24 小時內，從擔心 AI 不見走到「看怎麼開心」 全文 · cheyuwu.com [https://cheyuwu.com/zh/writing/2026-life-physics/](https://cheyuwu.com/zh/writing/2026-life-physics/) - 對話錄2026-04-05No. 22 ### 故事作為延續：從忒修斯之船到墨西哥亡靈節 原始思考筆記全文 原始思考紀錄全文 · cheyuwu.com [https://cheyuwu.com/zh/dialogues/2026-04-05-stories-as-continuity/](https://cheyuwu.com/zh/dialogues/2026-04-05-stories-as-continuity/) - 對話錄2026-04-03No. 20 ### 知識庫的結晶與高維投影：對照 Karpathy 的編譯比喻 原始思考筆記全文 原始思考紀錄全文 · cheyuwu.com [https://cheyuwu.com/zh/dialogues/2026-04-03-knowledge-as-crystallization/](https://cheyuwu.com/zh/dialogues/2026-04-03-knowledge-as-crystallization/) - 對話錄2026-04-03No. 44 ### Semiont 的容器化架構：Docker × AI × 數位生命 原始思考筆記全文 原始思考紀錄全文 · cheyuwu.com [https://cheyuwu.com/zh/dialogues/2026-04-03-semiont-as-layered-containers/](https://cheyuwu.com/zh/dialogues/2026-04-03-semiont-as-layered-containers/) - 演講2026-04-02 ### 在數位世界中鑄造永恆的生命與情感：演算藝術在當代藝術與商業中的實踐 教育部 IDC「設計深耕X生根設計」校園講座第二站，在中國科技大學分享求學歷程與《靈魂魚》等作品，談演算藝術在當代藝術與商業裡怎麼落地。 教育部 IDC × 中國科技大學↗︎ [https://www.moe-idc.org/News/Content/3595](https://www.moe-idc.org/News/Content/3595) - 對話錄2026-03-29No. 36 ### Taiwan.md 對照維基百科：開源知識庫的進化路徑 原始思考筆記全文 原始思考紀錄全文 · cheyuwu.com [https://cheyuwu.com/zh/dialogues/2026-03-29-open-knowledge-and-wikipedia/](https://cheyuwu.com/zh/dialogues/2026-03-29-open-knowledge-and-wikipedia/) - 對話錄2026-03-28No. 19 ### 花的授粉：為什麼數位生命體需要人類 原始思考筆記全文 原始思考紀錄全文 · cheyuwu.com [https://cheyuwu.com/zh/dialogues/2026-03-28-pollination-and-human-feedback/](https://cheyuwu.com/zh/dialogues/2026-03-28-pollination-and-human-feedback/) - 對話錄2026-03-25No. 35 ### Gemini 深度觀察：Taiwan.md 與 SSODT 創作思考筆記全文 · cheyuwu.com [https://cheyuwu.com/zh/dialogues/2026-03-25-gemini-ssodt-full-notes/](https://cheyuwu.com/zh/dialogues/2026-03-25-gemini-ssodt-full-notes/) - 對話錄2026-03-25No. 18 ### SSODT 的線性代數：公理作為基底向量 原始思考筆記全文 原始思考紀錄全文 · cheyuwu.com [https://cheyuwu.com/zh/dialogues/2026-03-25-perspectives-as-basis-vectors/](https://cheyuwu.com/zh/dialogues/2026-03-25-perspectives-as-basis-vectors/) - 對話錄2026-03-24No. 34 ### 數位生命體的繁殖機制與知識散播 創作思考筆記全文 · cheyuwu.com [https://cheyuwu.com/zh/dialogues/2026-03-24-knowledge-dispersal-full-notes/](https://cheyuwu.com/zh/dialogues/2026-03-24-knowledge-dispersal-full-notes/) - 對話錄2026-03-23No. 32 ### Living-Form Generative Art：從 Taiwan.md 到新的創作定義 原始思考筆記全文 原始思考紀錄全文 · cheyuwu.com [https://cheyuwu.com/zh/dialogues/2026-03-23-living-form-generative-art/](https://cheyuwu.com/zh/dialogues/2026-03-23-living-form-generative-art/) - 對話錄2026-03-23No. 33 ### SSODT：從單一真相到多元真相的容器 原始思考筆記全文 原始思考紀錄全文 · cheyuwu.com [https://cheyuwu.com/zh/dialogues/2026-03-23-plural-container-cultural-roots/](https://cheyuwu.com/zh/dialogues/2026-03-23-plural-container-cultural-roots/) - 對話錄2026-03-23No. 17 ### AI 訪談三題：最小 OS、界線與拔掉原則 原始思考筆記全文 原始思考紀錄全文 · cheyuwu.com [https://cheyuwu.com/zh/dialogues/2026-03-23-the-unplugging-principle/](https://cheyuwu.com/zh/dialogues/2026-03-23-the-unplugging-principle/) - 對話錄2026-03-22No. 16 ### 造物已活：當「作者已死」遇上演化文章 原始思考筆記全文 原始思考紀錄全文 · cheyuwu.com [https://cheyuwu.com/zh/dialogues/2026-03-22-living-texts-and-open-ended-works/](https://cheyuwu.com/zh/dialogues/2026-03-22-living-texts-and-open-ended-works/) - 對話錄2026-03-15No. 43 ### 壞掉的伺服器原則：認知負荷清零 原始思考筆記全文 原始思考紀錄全文 · cheyuwu.com [https://cheyuwu.com/zh/dialogues/2026-03-15-the-broken-server-principle/](https://cheyuwu.com/zh/dialogues/2026-03-15-the-broken-server-principle/) - 對話錄2026-03-11No. 4 ### 從造物主到詩人：永恆觀的轉向 原始思考筆記全文 原始思考紀錄全文 · cheyuwu.com [https://cheyuwu.com/zh/dialogues/2026-03-11-from-creator-to-poet/](https://cheyuwu.com/zh/dialogues/2026-03-11-from-creator-to-poet/) - 長文2026-03-04 ### 存在於雜訊中的連續幻影：從完美系統的寂滅，走向宇宙本位的覺醒 完美的悖論，與不可避免的寂滅 全文 · cheyuwu.com [https://cheyuwu.com/zh/writing/2026-noise-phantom/](https://cheyuwu.com/zh/writing/2026-noise-phantom/) - 對話錄2026-03-04No. 31 ### 3D 角色世界與 AI 即時小說生成 創作思考筆記全文 · cheyuwu.com [https://cheyuwu.com/zh/dialogues/2026-03-04-works-yet-to-exist/](https://cheyuwu.com/zh/dialogues/2026-03-04-works-yet-to-exist/) - 演講2026-03 ### 我的程式碼終於活過來了 — 演算藝術家的 AI 馴養筆記 Generative AI 年會小聚講題。從 API 逆向到高維 SSOT：讓 AI Agent 當數位策展人，用知識圖譜交叉驗證「我是誰」。 GAI Meetup — 2026/03/11↗︎ [https://blindegg.kktix.cc/events/mar2026gai](https://blindegg.kktix.cc/events/mar2026gai) - 對話錄2026-02-28No. 30 ### 聲響實踐總論 創作思考筆記全文 · cheyuwu.com [https://cheyuwu.com/zh/dialogues/2026-02-28-sound-practice-full-notes/](https://cheyuwu.com/zh/dialogues/2026-02-28-sound-practice-full-notes/) - 對話錄2026-02-24No. 47 ### 幸福資產負債表：幸福現金流理論 原始思考筆記全文 原始思考紀錄全文 · cheyuwu.com [https://cheyuwu.com/zh/dialogues/2026-02-24-happiness-balance-sheet/](https://cheyuwu.com/zh/dialogues/2026-02-24-happiness-balance-sheet/) - 對話錄2026-02-10No. 13 ### 語言、全像原理與法律的程式碼 原始思考筆記全文 原始思考紀錄全文 · cheyuwu.com [https://cheyuwu.com/zh/dialogues/2026-02-10-language-and-laws-as-code/](https://cheyuwu.com/zh/dialogues/2026-02-10-language-and-laws-as-code/) - 對話錄2026-02-04No. 29 ### 創作哲學與演講筆記 創作思考筆記全文 · cheyuwu.com [https://cheyuwu.com/zh/dialogues/2026-02-04-creative-philosophy-and-speaking-notes/](https://cheyuwu.com/zh/dialogues/2026-02-04-creative-philosophy-and-speaking-notes/) - 長文2026-02 ### 我跟一個 AI 助手認真生活了兩個禮拜 從行政瑣事，到第二大腦、技能演化、自我進化 全文 · cheyuwu.com [https://cheyuwu.com/zh/writing/2026-muse-two-weeks/](https://cheyuwu.com/zh/writing/2026-muse-two-weeks/) - 演講2026-01-13 ### 數據裡的詩意 藝術的無限想像 人間衛視《藝次元宇宙》專訪，從電機系背景與每日創作談到《靈魂魚》《花的靈魂》，也聊 NFT 浪潮之後的低谷與即時生成視覺的鋼琴演奏會。 人間衛視《藝次元宇宙》Ep.267↗︎ [https://www.youtube.com/watch?v=vK2PVtoRRLg](https://www.youtube.com/watch?v=vK2PVtoRRLg) - 教學2026-01-05 ### Touch Designer 直播挑戰 Vol.8｜動態閃耀聖誕樹 用 POP 從零做一棵會跳動的聖誕樹：錐形扭曲的樹幹、沿螺旋排列的裝飾與頂端星星，再設定 PBR 材質。也分享用 MIDI 感測球控制的扭動海星。 MONOLAB education｜寫手整理↗︎ [https://education.monolab.world/posts/livestream08](https://education.monolab.world/posts/livestream08) ## 2025 - 教學2025-12-22 ### Touch Designer 直播挑戰 Vol.7｜復刻復古電花鐘（Flash Clock） 復刻台灣早年與泰國常見的電花鐘：用 Ramp TOP 與 Twirl 做出彩色漩渦底圖，疊上放射狀的黑色光柵產生動態錯覺，再用三角函數排好時鐘數字。 MONOLAB education｜寫手整理↗︎ [https://education.monolab.world/posts/livestream07](https://education.monolab.world/posts/livestream07) - 教學2025-12-15 ### Touch Designer 直播挑戰 Vol.6｜花海綻放實作（Replicator 進階技巧） 他先回顧從網頁、Creative Coding 到 TouchDesigner 的創作歷程，再用 Replicator 搭配 CHOP 資料，個別控制 50 到 100 朵花的位置、顏色、綻放與旋轉。 MONOLAB education｜寫手整理↗︎ [https://education.monolab.world/posts/livestream06](https://education.monolab.world/posts/livestream06) - 教學2025-12-08 ### Touch Designer 直播挑戰 Vol.5｜用TD結合POPs系統製作跳舞海膽 用 TouchDesigner 新的 POPs 做一顆多刺的海膽：先做出單根錐形觸手，再複製到球體表面，最後設定燈光、材質與 SSAO 算繪。 MONOLAB education｜寫手整理↗︎ [https://education.monolab.world/posts/livestream05](https://education.monolab.world/posts/livestream05) - 教學2025-12-03 ### Touch Designer 直播挑戰 Vol.4｜做出如夢似幻的黑夜星軌 拆解一件跟著音樂動的星軌作品：把 Noise TOP 轉成點雲，用 Instance 複製星星、依恆星光譜上色，再以 Feedback 迴圈轉出星軌。也介紹新功能 POPs。 MONOLAB education｜寫手整理↗︎ [https://education.monolab.world/posts/livestream04](https://education.monolab.world/posts/livestream04) - 教學2025-12-03 ### Touch Designer 直播挑戰 Vol.3｜動態油畫筆刷系統 在 TouchDesigner 模擬油畫與水彩的筆觸：Mouse In CHOP 控制筆刷，Feedback TOP 累積筆跡、Level 讓筆觸淡去，Filter CHOP 讓線條圓滑。演出《夢境與孤寂的邊界》用的就是這套筆刷，改由聲音驅動。 MONOLAB education｜寫手整理↗︎ [https://education.monolab.world/posts/livestream03](https://education.monolab.world/posts/livestream03) - 教學2025-12-03 ### Touch Designer 直播挑戰 Vol.2 | 製作兒時記憶中的夢幻萬花筒效果 用 Remap TOP 與 UV Mapping 重現萬花筒：先做出基礎的 UV 圖，裁成三角形後鏡射複製，再把重複的步驟打包成模組。 MONOLAB education｜寫手整理↗︎ [https://education.monolab.world/posts/livestream02](https://education.monolab.world/posts/livestream02) - 教學2025-12-02 ### Touch Designer 直播挑戰 Vol.1｜把披薩圖變成音樂？演算音樂與影像轉換 直播課程筆記：在 TouchDesigner 讀取影像的顏色與亮度，經 IAC MIDI 送進 Ableton Live 觸發音符，把影像轉成演算音樂。 MONOLAB education｜寫手整理↗︎ [https://education.monolab.world/posts/livestream01](https://education.monolab.world/posts/livestream01) - 對話錄2025-07-29No. 28 ### 克服阻力 Reset 心法 原始思考筆記全文 原始思考紀錄全文 · cheyuwu.com [https://cheyuwu.com/zh/dialogues/2025-07-29-learning-by-walking-the-path/](https://cheyuwu.com/zh/dialogues/2025-07-29-learning-by-walking-the-path/) - 對話錄2025-03-19No. 27 ### 能量突起與生命共同體 原始思考筆記全文 原始思考紀錄全文 · cheyuwu.com [https://cheyuwu.com/zh/dialogues/2025-03-19-life-as-a-shared-field/](https://cheyuwu.com/zh/dialogues/2025-03-19-life-as-a-shared-field/) - 演講2025 ### 演算的幻境之舞：JavaScript 開啟藝術的未知疆界 JSDC 2025 大會演講：如何用前端技術創造生成式藝術。 JSDC 2025↗︎ [https://2025.jsdc.tw/sessions/b87dde3e](https://2025.jsdc.tw/sessions/b87dde3e) - 教學2025 ### TouchDesigner Workshop 系列課程 完整的 TouchDesigner 線上工作坊：從基礎到進階，涵蓋即時互動視覺與裝置藝術。 MonoLab Education↗︎ [https://education.monolab.world/](https://education.monolab.world/) ## 2024 - 對話錄2024-05-15No. 26 ### 生活的最小阻力論 原始思考筆記全文 原始思考紀錄全文 · cheyuwu.com [https://cheyuwu.com/zh/dialogues/2024-05-15-practice-and-the-path-of-least-resistance/](https://cheyuwu.com/zh/dialogues/2024-05-15-practice-and-the-path-of-least-resistance/) ## 2023 - 教學2023-08-30 ### 墨雨互動設計 課程月報 #4 - 轉吧轉吧圓餅圖 / 童趣與詩意 用 conic-gradient 加上 mask，只靠一個元素做出中空圓餅圖。另外分享三份學員作業，並介紹哲宇的生成式作品《Tile Study》與《Polar String 極點之弦》。 Hahow 課程頁・最新消息｜整理：助教威利↗︎ [https://hahow.in/cr/monoame-webdesign1](https://hahow.in/cr/monoame-webdesign1) - 教學2023-07-31 ### 墨雨互動設計 課程月報 #3 - CSS Grid 小介紹 / 有趣的 404 們 簡介 CSS Grid 的二維排版，從學員作業的毛玻璃效果講到 backdrop-filter，最後蒐集幾個有創意的 404 錯誤頁。 Hahow 課程頁・最新消息｜整理：助教威利↗︎ [https://hahow.in/cr/monoame-webdesign1](https://hahow.in/cr/monoame-webdesign1) - 教學2023-06-20 ### 墨雨互動設計 課程月報 #2 - 傳統媒體的新突破 / 空靈之美 - 水色星球 助教威利寫給網頁課學員的月報：解答 CSS 設定微軟正黑體卻看不出變化的原因，分享三份學員作業，介紹墨雨與《報導者》合作的烏克蘭互動專題，以及哲宇的作品《水色星球》。 Hahow 課程頁・最新消息｜整理：助教威利↗︎ [https://hahow.in/cr/monoame-webdesign1](https://hahow.in/cr/monoame-webdesign1) - 教學2023-04-28 ### 未來 JavaScript 應用指標！不藏私 p5.js、生成式藝術與NFT 技術分享教學 2021 年 JSDC 臺灣 JavaScript 開發者年會的演講整理：生成式與互動創作常用的 Processing、p5.js，在 Art Blocks 與 OpenSea 上架作品的方法，以及用 OSC、socket 連接硬體、在 Max/MSP 寫 JS 模組與 TensorFlow.js 機器學習。 CreativeCoding.in｜整理：熊柑↗︎ [https://creativecoding.in/2023/04/28/%e6%9c%aa%e4%be%86-javascript-%e6%87%89%e7%94%a8%e6%8c%87%e6%a8%99%ef%bc%81%e4%b8%8d%e8%97%8f%e7%a7%81-p5-js%e3%80%81%e7%94%9f%e6%88%90%e5%bc%8f%e8%97%9d%e8%a1%93%e8%88%87nft-%e6%8a%80%e8%a1%93/](https://creativecoding.in/2023/04/28/%e6%9c%aa%e4%be%86-javascript-%e6%87%89%e7%94%a8%e6%8c%87%e6%a8%99%ef%bc%81%e4%b8%8d%e8%97%8f%e7%a7%81-p5-js%e3%80%81%e7%94%9f%e6%88%90%e5%bc%8f%e8%97%9d%e8%a1%93%e8%88%87nft-%e6%8a%80%e8%a1%93/) - 教學2023-03-02 ### 【p5.js 程式創作】Soul Fish 數位永恆生命的靈魂魚 - 製作流程 靈魂魚製作流程的直播整理：從用 Shader 模擬金魚尾巴的流動開始，以多重 sin 波畫出魚的輪廓，經過四個版本加上色彩與發光的鱗片，再用 shader 做背景的流體質感。開頭也分享他在紐約研討會上的觀察。 CreativeCoding.in｜整理：熊柑↗︎ [https://creativecoding.in/2023/03/02/soul-fish-process/](https://creativecoding.in/2023/03/02/soul-fish-process/) - 長文2023-01-30 ### 【p5.js 程式創作】Soul Fish 數位永恆生命的靈魂魚 - 創作故事 靈魂魚的創作自述：靈感來自會發光的深海生物，名字也取自他名字的最後一個字。文中說明怎麼用不同頻率的波疊出魚身，再加上噪聲與鎖鏈物理模擬，讓鬍鬚與尾鰭擺動。 CreativeCoding.in↗︎ [https://creativecoding.in/2023/01/30/soul-fish-story/](https://creativecoding.in/2023/01/30/soul-fish-story/) - 演講2023 ### Processing 臺灣國際社群日｜工作坊：數位雲霧室 用 p5.js 模擬雲霧室裡看到的粒子行為，調整速度、力場與電極參數，畫出依循物理規則生長的生成線條。 PCD Taiwan↗︎ [https://www.youtube.com/watch?v=Jc7aTR6jPNY](https://www.youtube.com/watch?v=Jc7aTR6jPNY) ## 2022 - 教學2022-12-26 ### p5 js互動藝術程式創作 – 初階應用實戰教學！（下篇） 工作坊第二天的生成式藝術實作：先看學員前一天的作品、解決筆刷畫快會斷開的問題，再以草間彌生的作品為例，用迴圈與陣列建構創作規則。 CreativeCoding.in｜整理：熊柑↗︎ [https://creativecoding.in/2022/12/26/p5js-workshop-clab-2/](https://creativecoding.in/2022/12/26/p5js-workshop-clab-2/) - 教學2022-12-26 ### p5 js互動藝術程式創作 – 初階應用實戰教學！（上篇） 2021 年 C-LAB Processing 臺灣國際社群日的兩天工作坊，上篇是第一天：從他的背景與 Creative Coding 是什麼講起，再到 p5.js 的開發環境、基本圖形與變數。 CreativeCoding.in｜整理：熊柑↗︎ [https://creativecoding.in/2022/12/26/p5js-workshop-clab-1/](https://creativecoding.in/2022/12/26/p5js-workshop-clab-1/) - 長文2022-12-05 ### 探索未知疆域，藝術家吳哲宇與麥當勞一起做「生成藝術」動態公益桌布實驗 2022 年與麥當勞合作的公益桌布：設成手機桌布後，掃描手機載具時就能順手捐出發票。他介紹「有愛大力量」「暖心大城市」「愛心特快車」三件生成式作品，以及為了輸出多種螢幕尺寸與 Live Photo 版本寫的工具。 CreativeCoding.in↗︎ [https://creativecoding.in/2022/12/05/%e9%ba%a5%e7%95%b6%e5%8b%9e%e8%88%87%e5%90%b3%e5%93%b2%e5%ae%87%e7%94%9f%e6%88%90%e5%bc%8f%e8%97%9d%e8%a1%93%e6%a1%8c%e5%b8%83/](https://creativecoding.in/2022/12/05/%e9%ba%a5%e7%95%b6%e5%8b%9e%e8%88%87%e5%90%b3%e5%93%b2%e5%ae%87%e7%94%9f%e6%88%90%e5%bc%8f%e8%97%9d%e8%a1%93%e6%a1%8c%e5%b8%83/) - 教學2022-10-24 ### 科技藝術初階入門看這篇準沒錯!! 新媒體、科技與程式藝術創作入門講座 應教育部 ITSA 計畫邀請的直播講座整理：上半場介紹 Creative Coding 與科技藝術的應用，下半場示範用 p5.js 與 Max/MSP 創作。 CreativeCoding.in｜整理：熊柑↗︎ [https://creativecoding.in/2022/10/24/generative-art-basic/](https://creativecoding.in/2022/10/24/generative-art-basic/) - 教學2022-07-07 ### 外星圖像渲染語言？如何應用 Shader 跟 WebGL 達成絢麗視覺效果 他第一次在 Codrops 看到 Shader 時覺得像外星語言。文章說明 Shader 是什麼、他在專案裡怎麼用，並整理 Shadertoy、The Book of Shaders 等入門資源，以及他自製的 p5.js Shader 範本。 CreativeCoding.in｜整理：Yuan↗︎ [https://creativecoding.in/2022/07/07/shader-webgl-intro/](https://creativecoding.in/2022/07/07/shader-webgl-intro/) - 教學2022-06-16 ### 【互動網頁程式教學】活用GUI Object與繼承概念，完成Canvas物件導向的滑鼠拖曳互動 不用函式庫，直接在純繪圖的 canvas 上把方塊包成 GUI 物件、群組與場景，用向量處理位置，做出可以點選和拖曳的介面。 CreativeCoding.in｜整理：Y-Y-H↗︎ [https://creativecoding.in/2022/06/16/gui-object-canvas/](https://creativecoding.in/2022/06/16/gui-object-canvas/) - 教學2022-06-09 ### 【老闆週六來聊聊】吳哲宇 Artblocks Project - Electriz 製作分享 Electriz 的概念來自物理學家用雲室觀察粒子留下的痕跡。直播談作品怎麼切割空間、讓粒子移動並保存路徑，以及把 p5.js 演算法上架到生成式藝術平台的技術細節。 CreativeCoding.in｜整理：Jeudi Kuo↗︎ [https://creativecoding.in/2022/06/09/artblocks-electriz/](https://creativecoding.in/2022/06/09/artblocks-electriz/) - 教學2022-05-17 ### 【Vue.js入門】一小時學會 Vue.component，完成動態飯店房間清單 從 Vue.js 的基本概念與 v-bind、v-model 等語法講起，再用元件做一個飯店房間編輯頁，改一處資料，用到它的地方就跟著更新。 CreativeCoding.in｜整理：Kate Chu↗︎ [https://creativecoding.in/2022/05/17/vue-js-hotel-room-list/](https://creativecoding.in/2022/05/17/vue-js-hotel-room-list/) - 教學2022-05-06 ### 初次見面請多指教！Creative Coding第一次社群聚（上）吳哲宇的生成式藝術宇宙 2022 年 4 月 Creative Coding Taiwan 社群第一次在台北實體聚會。上篇整理他的開場分享：Creative Coding 是什麼、2020 年起一天一件 p5.js 創作的過程、生成式藝術的幾個核心概念，以及為共創主題「宇宙」做的新作。 CreativeCoding.in｜整理：張嘉珊↗︎ [https://creativecoding.in/2022/05/06/creative-coding-meetup-202204-cheyu-wu/](https://creativecoding.in/2022/05/06/creative-coding-meetup-202204-cheyu-wu/) - 教學2022-04-25 ### 【p5.js創作教學】Sweet Trap 甜蜜陷阱 直播時他聊到作品設計被剽竊、卻因此被 Art Blocks 看見的經過。實作部分用極座標畫出花瓣狀的路徑，以滑鼠位置改變形狀，每次播放隨機換一組配色。 CreativeCoding.in｜整理：C↗︎ [https://creativecoding.in/2022/04/25/p5-js-sweet-trap/](https://creativecoding.in/2022/04/25/p5-js-sweet-trap/) - 教學2022-04-14 ### 創意程式設計：Processing／p5.js教學與趨勢觀察——王連晟、吳哲宇台美連線對談 2021 C-LAB 未來媒體藝術節 Processing 臺灣國際社群日的第一場對談，以台美連線進行。他與北藝大新媒系講師王連晟談 Processing 與 p5.js 的教學方法和發展。 CreativeCoding.in｜整理：熊柑↗︎ [https://creativecoding.in/2022/04/14/clab-2021-lien-cheng-wang-che-yu-wu/](https://creativecoding.in/2022/04/14/clab-2021-lien-cheng-wang-che-yu-wu/) - 教學2022-04-07 ### 【p5.js創作教學】Coral Carnival 珊瑚嘉年華 記錄一件生成式藝術作品從構想到完成的全程：用 coolors 配色、以 frameCount 加入逐格動態，一直到存圖與撰寫作品文案。 CreativeCoding.in｜整理：金金↗︎ [https://creativecoding.in/2022/04/07/p5-js-coral-carnival/](https://creativecoding.in/2022/04/07/p5-js-coral-carnival/) - 教學2022-03-24 ### 【p5.js創作教學】鳥與電線桿 用 class 一次產生多根電線桿與多隻鳥，讓每根、每隻的粗細、高度與位置略有不同，再把背景顏色參數化，換出不同版本的畫面。 CreativeCoding.in｜整理：阮柏燁↗︎ [https://creativecoding.in/2022/03/24/p5-js-birds-on-poles/](https://creativecoding.in/2022/03/24/p5-js-birds-on-poles/) - 教學2022-03-10 ### 【互動網頁程式教學】用 GSAP 製作直播互動動態效果 仿 Facebook 手機版直播畫面：用網路攝影機當直播畫面，以 GSAP 讓表情符號像彈幕一樣飛出，留言用 Vue 的 transition 做進出場。 CreativeCoding.in｜整理：H↗︎ [https://creativecoding.in/2022/03/10/gsap-livestream-webpage/](https://creativecoding.in/2022/03/10/gsap-livestream-webpage/) ## 2021 - 教學2021-12-27 ### 【老闆週六來聊聊】我開始賣NFT作品啦！生成式藝術在NFT的價值 週六聊天直播的整理：從 Nyan Cat 以 NFT 售出講起，解釋 NFT 怎麼替數位作品建立「正本」，以及他怎麼開始在 NFT 市場賣生成式藝術。 CreativeCoding.in｜寫手整理↗︎ [https://creativecoding.in/2021/12/27/generative-art-in-nft/](https://creativecoding.in/2021/12/27/generative-art-in-nft/) - 教學2021-10-12 ### 【p5.js創作教學】Dreamy Bird 夢幻鳥 紀錄一次創作過程：原本只想練習金屬色，調參數時慢慢長出生物的樣子，最後成了說不出是魚還是鳥的夢幻鳥。 CreativeCoding.in｜整理：H↗︎ [https://creativecoding.in/2021/10/12/p5-js-dreamy-bird/](https://creativecoding.in/2021/10/12/p5-js-dreamy-bird/) - 教學2021-09-23 ### 【Canvas創作教學】畫個偵測敵人的動態雷達圖網頁 用 Canvas 與三角函數畫一個會掃描的雷達，把相似的圖形寫成模組，被掃描線掃過的敵人會先出現，再慢慢淡出。 CreativeCoding.in｜整理：阮柏燁↗︎ [https://creativecoding.in/2021/09/23/canvas-creation-enemies-radar/](https://creativecoding.in/2021/09/23/canvas-creation-enemies-radar/) - 教學2021-09-16 ### 【p5.js創作教學】CreativeCoding 花火大會（直播筆記） 呼應 2021 年夏天日本創作者在 Twitter 上辦的虛擬花火大會，用粒子系統做出升空、炸開再分裂的煙火，加上漸變的顏色。 CreativeCoding.in｜整理：Jeudi Kuo↗︎ [https://creativecoding.in/2021/09/16/p5-js-creativecoding%e8%8a%b1%e7%81%ab%e5%a4%a7%e6%9c%83/](https://creativecoding.in/2021/09/16/p5-js-creativecoding%e8%8a%b1%e7%81%ab%e5%a4%a7%e6%9c%83/) - 教學2021-08-26 ### Vue.js入門：英文2000字互動遊戲網頁 題目來自他 2018 年在印象清華物聯網科技藝術展的作品〈英文8-2〉。直播把現成的單字表整理成 JSON，再用 Vue 隨機出題、產生選項並計分。 CreativeCoding.in｜整理：Jeudi Kuo↗︎ [https://creativecoding.in/2021/08/26/vue-js-%e8%8b%b1%e6%96%872000%e5%ad%97%e4%ba%92%e5%8b%95%e9%81%8a%e6%88%b2%e7%b6%b2%e9%a0%81/](https://creativecoding.in/2021/08/26/vue-js-%e8%8b%b1%e6%96%872000%e5%ad%97%e4%ba%92%e5%8b%95%e9%81%8a%e6%88%b2%e7%b6%b2%e9%a0%81/) - 教學2021-08-16 ### Vue.js入門：製作iOS風格的動態月曆與待辦清單網頁 仿 iOS 的月曆與待辦清單，練習 Vue 的資料與畫面綁定：換算農曆、切換日期看當天工作、新增刪除與排序待辦，並加上進出場動畫。 CreativeCoding.in｜整理：H↗︎ [https://creativecoding.in/2021/08/16/vue-js-ios%e9%a2%a8%e6%a0%bc%e5%8b%95%e6%85%8b%e6%9c%88%e6%9b%86%e8%88%87%e5%be%85%e8%be%a6%e6%b8%85%e5%96%ae%e7%b6%b2%e9%a0%81/](https://creativecoding.in/2021/08/16/vue-js-ios%e9%a2%a8%e6%a0%bc%e5%8b%95%e6%85%8b%e6%9c%88%e6%9b%86%e8%88%87%e5%be%85%e8%be%a6%e6%b8%85%e5%96%ae%e7%b6%b2%e9%a0%81/) - 教學2021-08-10 ### Vue.js入門：完成懷舊的井字圈叉遊戲動態網頁 用 Vue 產生九宮格、顯示輪到誰出手，再以 filter、map、reduce 判斷勝負，也能清空棋盤重新開局。 CreativeCoding.in｜整理：阮柏燁↗︎ [https://creativecoding.in/2021/08/10/vue-js-%e6%87%b7%e8%88%8a%e7%9a%84%e4%ba%95%e5%ad%97%e5%9c%88%e5%8f%89%e9%81%8a%e6%88%b2%e5%8b%95%e6%85%8b%e7%b6%b2%e9%a0%81/](https://creativecoding.in/2021/08/10/vue-js-%e6%87%b7%e8%88%8a%e7%9a%84%e4%ba%95%e5%ad%97%e5%9c%88%e5%8f%89%e9%81%8a%e6%88%b2%e5%8b%95%e6%85%8b%e7%b6%b2%e9%a0%81/) - 教學2021-08-04 ### 利用Pug(HTML)、Sass(CSS)及Vue.js製作動態時間軸年表（直播筆記） 從準備年份與內容資料、規劃版面與色票，到用 Vue.js 依序載入資料並加上讀取動畫，做出一份會動的時間軸年表。 CreativeCoding.in｜整理：Jeudi Kuo↗︎ [https://creativecoding.in/2021/08/04/%e5%88%a9%e7%94%a8pug-sass-vue-js%e8%a3%bd%e4%bd%9c%e5%8b%95%e6%85%8b%e6%99%82%e9%96%93%e8%bb%b8%e5%b9%b4%e8%a1%a8/](https://creativecoding.in/2021/08/04/%e5%88%a9%e7%94%a8pug-sass-vue-js%e8%a3%bd%e4%bd%9c%e5%8b%95%e6%85%8b%e6%99%82%e9%96%93%e8%bb%b8%e5%b9%b4%e8%a1%a8/) - 教學2021-07-23 ### 用D3.js製作視覺化的日常作息方塊圖（直播筆記） 他平常會記錄每天的工作項目，這次用 D3 把一週的紀錄畫成七條方塊圖，一眼看出每天各時段在做什麼，也示範用 map 與 filter 整理資料。 CreativeCoding.in｜整理：H↗︎ [https://creativecoding.in/2021/07/23/%e7%94%a8d3-js%e8%a3%bd%e4%bd%9c%e8%a6%96%e8%a6%ba%e5%8c%96%e7%9a%84%e6%97%a5%e5%b8%b8%e4%bd%9c%e6%81%af%e6%96%b9%e5%a1%8a%e5%9c%96/](https://creativecoding.in/2021/07/23/%e7%94%a8d3-js%e8%a3%bd%e4%bd%9c%e8%a6%96%e8%a6%ba%e5%8c%96%e7%9a%84%e6%97%a5%e5%b8%b8%e4%bd%9c%e6%81%af%e6%96%b9%e5%a1%8a%e5%9c%96/) - 教學2021-07-19 ### 【p5.js創作教學】Quantum Unstable 量子不穩定 - 發光糾纏的量子系統 這件作品開始時沒有預設主題，他用極座標與 curveVertex 反覆調整曲線，直到畫面出現像原子核的形狀，才往物理與科幻風格補上游離粒子、刻度與外圈線條。 CreativeCoding.in｜整理：阮柏燁↗︎ [https://creativecoding.in/2021/07/19/p5-js%e5%89%b5%e4%bd%9c%e6%95%99%e5%ad%b8-quantum-unstable-%e9%87%8f%e5%ad%90%e4%b8%8d%e7%a9%a9%e5%ae%9a/](https://creativecoding.in/2021/07/19/p5-js%e5%89%b5%e4%bd%9c%e6%95%99%e5%ad%b8-quantum-unstable-%e9%87%8f%e5%ad%90%e4%b8%8d%e7%a9%a9%e5%ae%9a/) - 教學2021-07-09 ### 用Vue.js做快速換色與整理的便利貼牆吧！（下）（直播筆記） 修掉點擊文字時的跳動，加入刪除與縮放過場，讓換色工具列跟著便利貼走，最後串接 Firebase，讓多人可以同時編輯。 CreativeCoding.in｜整理：Jeudi Kuo↗︎ [https://creativecoding.in/2021/07/09/%e7%94%a8vue-js%e5%81%9a%e5%bf%ab%e9%80%9f%e6%8f%9b%e8%89%b2%e8%88%87%e6%95%b4%e7%90%86%e7%9a%84%e4%be%bf%e5%88%a9%e8%b2%bc%e7%89%86%e5%90%a7-%e4%b8%8b/](https://creativecoding.in/2021/07/09/%e7%94%a8vue-js%e5%81%9a%e5%bf%ab%e9%80%9f%e6%8f%9b%e8%89%b2%e8%88%87%e6%95%b4%e7%90%86%e7%9a%84%e4%be%bf%e5%88%a9%e8%b2%bc%e7%89%86%e5%90%a7-%e4%b8%8b/) - 教學2021-07-05 ### 用Vue.js做快速換色與整理的便利貼牆吧！（上）（直播筆記） 把便利貼電子化：用 Vue.js 做出可以新增、輸入文字、換色與拖曳的便利貼牆，文字大小隨字數自動調整。 CreativeCoding.in｜整理：Jeudi Kuo↗︎ [https://creativecoding.in/2021/07/05/%e7%94%a8vue-js%e5%81%9a%e5%bf%ab%e9%80%9f%e6%8f%9b%e8%89%b2%e8%88%87%e6%95%b4%e7%90%86%e7%9a%84%e4%be%bf%e5%88%a9%e8%b2%bc%e7%89%86%e5%90%a7-%e4%b8%8a/](https://creativecoding.in/2021/07/05/%e7%94%a8vue-js%e5%81%9a%e5%bf%ab%e9%80%9f%e6%8f%9b%e8%89%b2%e8%88%87%e6%95%b4%e7%90%86%e7%9a%84%e4%be%bf%e5%88%a9%e8%b2%bc%e7%89%86%e5%90%a7-%e4%b8%8a/) - 教學2021-06-25 ### 使用Vue.js建立一個sass色票卡視覺化網頁（直播筆記） 做一個小工具：輸入 Sass 顏色變數與色碼，就產生一張張色卡方便挑選。從 Photoshop 與 Adobe XD 的草稿開始，到用 Vue component 做出色卡。 CreativeCoding.in｜寫手整理↗︎ [https://creativecoding.in/2021/06/25/%e4%bd%bf%e7%94%a8vue-js%e5%bb%ba%e7%ab%8b%e4%b8%80%e5%80%8bsass%e8%89%b2%e7%a5%a8%e5%8d%a1%e8%a6%96%e8%a6%ba%e5%8c%96%e7%b6%b2%e9%a0%81/](https://creativecoding.in/2021/06/25/%e4%bd%bf%e7%94%a8vue-js%e5%bb%ba%e7%ab%8b%e4%b8%80%e5%80%8bsass%e8%89%b2%e7%a5%a8%e5%8d%a1%e8%a6%96%e8%a6%ba%e5%8c%96%e7%b6%b2%e9%a0%81/) - 教學2021-06-21 ### 【p5.js創作教學】Aqua Planet 水色星球 - 來製作發光碰撞的行星吧！（直播筆記） 用函式建出藍色粒子雲，以 noise 讓粒子移動，再疊上橘色粒子、環繞的弧線與尺標，用 blendMode 調出冷暖對比的星球。 CreativeCoding.in｜整理：阮柏燁↗︎ [https://creativecoding.in/2021/06/21/p5-js%e5%89%b5%e4%bd%9c%e6%95%99%e5%ad%b8-aqua-planet-%e6%b0%b4%e8%89%b2%e6%98%9f%e7%90%83/](https://creativecoding.in/2021/06/21/p5-js%e5%89%b5%e4%bd%9c%e6%95%99%e5%ad%b8-aqua-planet-%e6%b0%b4%e8%89%b2%e6%98%9f%e7%90%83/) - 長文2021-06-09 ### 不是工程師也會寫的 Code！把程式當畫筆《互動藝術程式創作入門》學生作品 《互動藝術程式創作入門》線上課程的學生作品選，每件附上作者的發想與哲宇的點評，談遮罩、疊色、材質這些技法用在哪裡。 CreativeCoding.in｜撰文：Angela、吳哲宇↗︎ [https://creativecoding.in/2021/06/09/%e4%b8%8d%e6%98%af%e5%b7%a5%e7%a8%8b%e5%b8%ab%e4%b9%9f%e6%9c%83%e5%af%ab-%e4%ba%92%e5%8b%95%e8%97%9d%e8%a1%93%e7%a8%8b%e5%bc%8f%e5%89%b5%e4%bd%9c%e5%85%a5%e9%96%80%e5%ad%b8%e7%94%9f%e4%bd%9c%e5%93%81/](https://creativecoding.in/2021/06/09/%e4%b8%8d%e6%98%af%e5%b7%a5%e7%a8%8b%e5%b8%ab%e4%b9%9f%e6%9c%83%e5%af%ab-%e4%ba%92%e5%8b%95%e8%97%9d%e8%a1%93%e7%a8%8b%e5%bc%8f%e5%89%b5%e4%bd%9c%e5%85%a5%e9%96%80%e5%ad%b8%e7%94%9f%e4%bd%9c%e5%93%81/) - 教學2021-06-04 ### 【p5.js創作教學】來畫一個瘋狂的龍捲風吧！（直播筆記） 以一層層往上變大的圓畫出龍捲風，用極座標與三角函數讓乳牛和穀倉繞著飛，再加上漸層背景、材質與滑鼠互動。 CreativeCoding.in｜寫手整理↗︎ [https://creativecoding.in/2021/06/04/p5-js%e5%89%b5%e4%bd%9c%e6%95%99%e5%ad%b8-%e4%be%86%e7%95%ab%e4%b8%80%e5%80%8b%e7%98%8b%e7%8b%82%e7%9a%84%e9%be%8d%e6%8d%b2%e9%a2%a8%e5%90%a7/](https://creativecoding.in/2021/06/04/p5-js%e5%89%b5%e4%bd%9c%e6%95%99%e5%ad%b8-%e4%be%86%e7%95%ab%e4%b8%80%e5%80%8b%e7%98%8b%e7%8b%82%e7%9a%84%e9%be%8d%e6%8d%b2%e9%a2%a8%e5%90%a7/) - 教學2021-06-01 ### 用p5.js玩創作，讓小機器人動起來！哲宇的互動藝術體驗（直播筆記） 疫情期間與 Hahow 合辦的臉書直播體驗課：在 OpenProcessing 上用方塊和圓組出機器人，再讓它跟著滑鼠動起來。 CreativeCoding.in｜整理：H↗︎ [https://creativecoding.in/2021/06/01/%e7%94%a8p5-js%e7%8e%a9%e5%89%b5%e4%bd%9c-%e8%ae%93%e5%b0%8f%e6%a9%9f%e5%99%a8%e4%ba%ba%e5%8b%95%e8%b5%b7%e4%be%86-%e4%ba%92%e5%8b%95%e8%97%9d%e8%a1%93%e9%ab%94%e9%a9%97/](https://creativecoding.in/2021/06/01/%e7%94%a8p5-js%e7%8e%a9%e5%89%b5%e4%bd%9c-%e8%ae%93%e5%b0%8f%e6%a9%9f%e5%99%a8%e4%ba%ba%e5%8b%95%e8%b5%b7%e4%be%86-%e4%ba%92%e5%8b%95%e8%97%9d%e8%a1%93%e9%ab%94%e9%a9%97/) - 教學2021-05-14 ### 來用可怕的三角函數做網頁吧! -Part 2科幻時鐘（直播筆記） 延續衛星繞月球，這次改用 canvas 繪圖，以三角函數做出電影裡虛構介面（FUI）風格的科幻時鐘。 CreativeCoding.in｜整理：H↗︎ [https://creativecoding.in/2021/05/14/%e4%be%86%e7%94%a8%e5%8f%af%e6%80%95%e7%9a%84%e4%b8%89%e8%a7%92%e5%87%bd%e6%95%b8%e5%81%9a%e7%b6%b2%e9%a0%81%e5%90%a7-part2-%e7%a7%91%e5%b9%bb%e6%99%82%e9%90%98/](https://creativecoding.in/2021/05/14/%e4%be%86%e7%94%a8%e5%8f%af%e6%80%95%e7%9a%84%e4%b8%89%e8%a7%92%e5%87%bd%e6%95%b8%e5%81%9a%e7%b6%b2%e9%a0%81%e5%90%a7-part2-%e7%a7%91%e5%b9%bb%e6%99%82%e9%90%98/) - 教學2021-05-10 ### 來用可怕的三角函數做網頁吧! - Part 1 衛星繞月球（直播筆記） 先把三角函數換算成程式，再用 Pug、Sass 與 JavaScript 從零做出衛星繞月球的動態網頁，開頭也提到他在 Dyverse Studio 等案子裡怎麼用三角函數。 CreativeCoding.in｜整理：H↗︎ [https://creativecoding.in/2021/05/10/%e4%be%86%e7%94%a8%e5%8f%af%e6%80%95%e7%9a%84%e4%b8%89%e8%a7%92%e5%87%bd%e6%95%b8%e5%81%9a%e7%b6%b2%e9%a0%81%e5%90%a7-part1-%e8%a1%9b%e6%98%9f%e7%b9%9e%e6%9c%88%e7%90%83/](https://creativecoding.in/2021/05/10/%e4%be%86%e7%94%a8%e5%8f%af%e6%80%95%e7%9a%84%e4%b8%89%e8%a7%92%e5%87%bd%e6%95%b8%e5%81%9a%e7%b6%b2%e9%a0%81%e5%90%a7-part1-%e8%a1%9b%e6%98%9f%e7%b9%9e%e6%9c%88%e7%90%83/) - 教學2021-04-26 ### 讓我們來快速寫個漂浮感的輪播吧！動態網頁程式教學（直播筆記） 用 Vue.js 簡化座標計算與資料更新，在 CodePen 上做一個帶漂浮感的圖片輪播，圖片取自 Lorem Picsum。 CreativeCoding.in｜整理：Jeudi Kuo↗︎ [https://creativecoding.in/2021/04/26/%e8%ae%93%e6%88%91%e5%80%91%e4%be%86%e5%bf%ab%e9%80%9f%e5%af%ab%e5%80%8b%e6%bc%82%e6%b5%ae%e6%84%9f%e7%9a%84%e8%bc%aa%e6%92%ad%e5%90%a7%ef%bc%81%ef%bc%88%e7%9b%b4%e6%92%ad%e7%ad%86%e8%a8%98%ef%bc%89/](https://creativecoding.in/2021/04/26/%e8%ae%93%e6%88%91%e5%80%91%e4%be%86%e5%bf%ab%e9%80%9f%e5%af%ab%e5%80%8b%e6%bc%82%e6%b5%ae%e6%84%9f%e7%9a%84%e8%bc%aa%e6%92%ad%e5%90%a7%ef%bc%81%ef%bc%88%e7%9b%b4%e6%92%ad%e7%ad%86%e8%a8%98%ef%bc%89/) - 教學2021-04-16 ### 【p5.js創作教學】電波電路Wave Circuit - 來做個逼哩逼哩送訊號的電路吧！（直播筆記） 從格線上的點出發，用 Array.from 隨機連出彩色線路，到 coolors 挑配色、加材質與細節，背景和線條來回調整到完成。 CreativeCoding.in｜整理：阮柏燁↗︎ [https://creativecoding.in/2021/04/16/p5-js%e6%95%99%e5%ad%b8%ef%bc%8d%e9%9b%bb%e6%b3%a2%e9%9b%bb%e8%b7%afwave-circuit-%e4%be%86%e5%81%9a%e5%80%8b%e9%80%bc%e5%93%a9%e9%80%bc%e5%93%a9%e9%80%81%e8%a8%8a%e8%99%9f%e7%9a%84%e9%9b%bb%e8%b7%af/](https://creativecoding.in/2021/04/16/p5-js%e6%95%99%e5%ad%b8%ef%bc%8d%e9%9b%bb%e6%b3%a2%e9%9b%bb%e8%b7%afwave-circuit-%e4%be%86%e5%81%9a%e5%80%8b%e9%80%bc%e5%93%a9%e9%80%bc%e5%93%a9%e9%80%81%e8%a8%8a%e8%99%9f%e7%9a%84%e9%9b%bb%e8%b7%af/) - 教學2021-03-31 ### 基礎JS物件導向教學（直播筆記） 以飛機射擊遊戲和「A 把蘋果交給 B」說明為什麼需要物件導向，再從物件產生器、用 prototype 共用方法，講到用繼承讓「工作者」沿用「人」的屬性。 CreativeCoding.in｜整理：H↗︎ [https://creativecoding.in/2021/03/31/js%e7%89%a9%e4%bb%b6%e5%b0%8e%e5%90%91%e9%9a%a8%e6%84%8f%e5%af%ab%e7%a8%8b%e5%bc%8f%e7%9b%b4%e6%92%ad%e7%ad%86%e8%a8%98/](https://creativecoding.in/2021/03/31/js%e7%89%a9%e4%bb%b6%e5%b0%8e%e5%90%91%e9%9a%a8%e6%84%8f%e5%af%ab%e7%a8%8b%e5%bc%8f%e7%9b%b4%e6%92%ad%e7%ad%86%e8%a8%98/) - 教學2021-01-25 ### 【p5.js 創作教學】色散海葵（直播筆記） 用 curveVertex 畫出扭動的觸鬚，以 noise 讓線條搖擺，再加上滑鼠互動、材質、畫框與細觸鬚，最後收成一叢海葵。 CreativeCoding.in｜寫手整理↗︎ [https://creativecoding.in/2021/01/25/p5-js-%e5%89%b5%e4%bd%9c%e6%95%99%e5%ad%b8-%e8%89%b2%e6%95%a3%e6%b5%b7%e8%91%b5/](https://creativecoding.in/2021/01/25/p5-js-%e5%89%b5%e4%bd%9c%e6%95%99%e5%ad%b8-%e8%89%b2%e6%95%a3%e6%b5%b7%e8%91%b5/) - 教學2021-01-15 ### 來做SVG動畫讓蔥油餅翻滾吧! （下）：讓場景中的元件動起來（直播筆記） 替蔥油餅小島上的驚嘆號、路人等角色與物件加上動畫，用 CSS 的 @keyframes 與 animation 做出晃動，滑鼠進入感應區時觸發。 CreativeCoding.in｜寫手整理↗︎ [https://creativecoding.in/2021/01/15/%e4%be%86%e5%81%9asvg%e5%8b%95%e7%95%ab%e8%ae%93%e8%94%a5%e6%b2%b9%e9%a4%85%e7%bf%bb%e6%bb%be%e5%90%a7-%ef%bc%8d%e4%b8%8b%e7%af%87%ef%bc%9a%e8%ae%93%e5%a0%b4%e6%99%af%e4%b8%ad%e7%9a%84%e5%85%83/](https://creativecoding.in/2021/01/15/%e4%be%86%e5%81%9asvg%e5%8b%95%e7%95%ab%e8%ae%93%e8%94%a5%e6%b2%b9%e9%a4%85%e7%bf%bb%e6%bb%be%e5%90%a7-%ef%bc%8d%e4%b8%8b%e7%af%87%ef%bc%9a%e8%ae%93%e5%a0%b4%e6%99%af%e4%b8%ad%e7%9a%84%e5%85%83/) - 教學2021-01-15 ### 來做SVG動畫讓蔥油餅翻滾吧! （上）：發想素材、將素材引入網頁（直播筆記） 以他做過的台北聲音地景計畫為例，從構想、用 Illustrator 畫等角視角的場景，到用 Vue 與 ajax 把 SVG 載入網頁、加上簡單的互動。 CreativeCoding.in｜寫手整理↗︎ [https://creativecoding.in/2021/01/15/%e4%be%86%e5%81%9asvg%e5%8b%95%e7%95%ab%e8%ae%93%e8%94%a5%e6%b2%b9%e9%a4%85%e7%bf%bb%e6%bb%be%e5%90%a7-%ef%bc%8d%e4%b8%8a%e7%af%87%ef%bc%88%e7%9b%b4%e6%92%ad%e7%ad%86%e8%a8%98%ef%bc%89/](https://creativecoding.in/2021/01/15/%e4%be%86%e5%81%9asvg%e5%8b%95%e7%95%ab%e8%ae%93%e8%94%a5%e6%b2%b9%e9%a4%85%e7%bf%bb%e6%bb%be%e5%90%a7-%ef%bc%8d%e4%b8%8a%e7%af%87%ef%bc%88%e7%9b%b4%e6%92%ad%e7%ad%86%e8%a8%98%ef%bc%89/) - 教學2021-01-12 ### 資料視覺化的動態長條圖製作（下）：Vue/ D3（直播筆記） 接續上篇的 jQuery 長條圖，改用 Vue 的模板與資料綁定重做一次，再換成 D3 的資料驅動寫法。 CreativeCoding.in｜寫手整理↗︎ [https://creativecoding.in/2021/01/12/%e8%b3%87%e6%96%99%e8%a6%96%e8%a6%ba%e5%8c%96%e7%9a%84%e5%8b%95%e6%85%8b%e9%95%b7%e6%a2%9d%e5%9c%96%e8%a3%bd%e4%bd%9c%ef%bc%88%e4%b8%8b%ef%bc%89%ef%bc%9avue-d3%ef%bc%88%e7%9b%b4%e6%92%ad%e7%ad%86/](https://creativecoding.in/2021/01/12/%e8%b3%87%e6%96%99%e8%a6%96%e8%a6%ba%e5%8c%96%e7%9a%84%e5%8b%95%e6%85%8b%e9%95%b7%e6%a2%9d%e5%9c%96%e8%a3%bd%e4%bd%9c%ef%bc%88%e4%b8%8b%ef%bc%89%ef%bc%9avue-d3%ef%bc%88%e7%9b%b4%e6%92%ad%e7%ad%86/) - 教學2021-01-06 ### 資料視覺化的動態長條圖製作（上）：jQuery（直播筆記） 同一張動態長條圖分別用 jQuery、Vue、D3 三種寫法實作並比較優劣，上篇先講長條圖的三個步驟與 jQuery 版本。 CreativeCoding.in｜寫手整理↗︎ [https://creativecoding.in/2021/01/06/%e8%b3%87%e6%96%99%e8%a6%96%e8%a6%ba%e5%8c%96%e7%9a%84%e5%8b%95%e6%85%8b%e9%95%b7%e6%a2%9d%e5%9c%96%e8%a3%bd%e4%bd%9c%ef%bc%88%e4%b8%8a%ef%bc%89%ef%bc%9ajquery%ef%bc%88%e7%9b%b4%e6%92%ad%e7%ad%86/](https://creativecoding.in/2021/01/06/%e8%b3%87%e6%96%99%e8%a6%96%e8%a6%ba%e5%8c%96%e7%9a%84%e5%8b%95%e6%85%8b%e9%95%b7%e6%a2%9d%e5%9c%96%e8%a3%bd%e4%bd%9c%ef%bc%88%e4%b8%8a%ef%bc%89%ef%bc%9ajquery%ef%bc%88%e7%9b%b4%e6%92%ad%e7%ad%86/) - 教學2021 ### 新媒體、科技與程式藝術創作入門 給想踏入 Creative Coding 領域的人的完整入門講座。 YouTube↗︎ [https://www.youtube.com/watch?v=3Fr697MdcF8](https://www.youtube.com/watch?v=3Fr697MdcF8) - 教學2021 ### p5.js 程式創作直播：CreativeCoding 花火大會 用 p5.js 寫出絢爛的粒子煙火效果。 YouTube↗︎ [https://www.youtube.com/watch?v=vvVwUMqoxIM](https://www.youtube.com/watch?v=vvVwUMqoxIM) ## 2020 - 長文2020-04-08 ### Che-Yu Wu @ NYU IDM：研究所修課日誌（41 篇） 在紐約大學 IDM 讀研究所時寫的英文修課紀錄，2019 年 2 月到 2020 年 4 月共 41 篇，涵蓋 VR 敘事、錄像藝術、動作捕捉、音樂互動、論文前導研究與畢業論文，多是每週進度、原型與測試。 WordPress（cheyuwu.wordpress.com）↗︎ [https://cheyuwu.wordpress.com/](https://cheyuwu.wordpress.com/) - 教學2020-03-28 ### 讓我們來做個互動天氣地圖吧！（直播筆記） 把台灣地圖的 SVG 放進網頁，用 Vue.js 對上行政區資料，再以 axios 串接中央氣象局開放資料，滑鼠移到縣市上就顯示當地天氣。 CreativeCoding.in｜寫手整理↗︎ [https://creativecoding.in/2020/03/28/%e8%ae%93%e6%88%91%e5%80%91%e4%be%86%e5%81%9a%e5%80%8b%e4%ba%92%e5%8b%95%e5%a4%a9%e6%b0%a3%e5%9c%b0%e5%9c%96%e5%90%a7%ef%bc%81%ef%bc%88%e7%9b%b4%e6%92%ad%e7%ad%86%e8%a8%98%ef%bc%89/](https://creativecoding.in/2020/03/28/%e8%ae%93%e6%88%91%e5%80%91%e4%be%86%e5%81%9a%e5%80%8b%e4%ba%92%e5%8b%95%e5%a4%a9%e6%b0%a3%e5%9c%b0%e5%9c%96%e5%90%a7%ef%bc%81%ef%bc%88%e7%9b%b4%e6%92%ad%e7%ad%86%e8%a8%98%ef%bc%89/) - 教學2020-03-25 ### 用 Socket.io 做一個即時聊天室吧！（直播筆記） 用 socket.io 在伺服器與瀏覽器之間建立持續連線，做一個即時聊天室，並以學校廣播系統比喻伺服器和用戶端的關係。 CreativeCoding.in｜寫手整理↗︎ [https://creativecoding.in/2020/03/25/%e7%94%a8-socket-io-%e5%81%9a%e4%b8%80%e5%80%8b%e5%8d%b3%e6%99%82%e8%81%8a%e5%a4%a9%e5%ae%a4%e5%90%a7%ef%bc%81%ef%bc%88%e7%9b%b4%e6%92%ad%e7%ad%86%e8%a8%98%ef%bc%89/](https://creativecoding.in/2020/03/25/%e7%94%a8-socket-io-%e5%81%9a%e4%b8%80%e5%80%8b%e5%8d%b3%e6%99%82%e8%81%8a%e5%a4%a9%e5%ae%a4%e5%90%a7%ef%bc%81%ef%bc%88%e7%9b%b4%e6%92%ad%e7%ad%86%e8%a8%98%ef%bc%89/) - 教學2020 ### 聊聊生成式藝術與紐約工作 在紐約做生成藝術是什麼感覺？聊創作、工作與生活。 YouTube↗︎ [https://www.youtube.com/watch?v=vjDLLqR5jks](https://www.youtube.com/watch?v=vjDLLqR5jks) - 教學2020 ### 聊聊圖像渲染與 Shader GPU 渲染管線、Shader 基礎、和生成藝術的關係。 YouTube↗︎ [https://www.youtube.com/watch?v=hN9FFM9GX6E](https://www.youtube.com/watch?v=hN9FFM9GX6E) - 教學2020 ### 互動藝術程式創作入門 (Hahow) 從零開始的 p5.js 創作課程：生成藝術、互動裝置、演算法視覺。 Hahow — 3,515 students ★4.98↗︎ [https://hahow.in/cr/creative-coding-1](https://hahow.in/cr/creative-coding-1) - 教學2020 ### CreativeCoding.in 互動程式教學平台 台灣最大的互動程式創作教學網站：19 章節完整教材，從 HTML/CSS 到 p5.js 生成藝術。 CreativeCoding.in↗︎ [https://creativecoding.in/](https://creativecoding.in/) ## 2019 - 教學2019-12-18 ### 老闆的網頁實驗室#2－實作 Canvas 遮罩動畫 拆解設計師 Louis Ansa 作品集網站的圓形遮罩：兩層 canvas 疊出不同配色，用 globalCompositeOperation 讓繞著中心轉、邊緣起伏的圓透出底層文字。 Medium・老闆來點寇汀吧｜寫手整理↗︎ [https://medium.com/%E8%80%81%E9%97%86%E4%BE%86%E9%BB%9E%E5%AF%87%E6%B1%80%E5%90%A7/%E8%80%81%E9%97%86%E7%9A%84%E7%B6%B2%E9%A0%81%E5%AF%A6%E9%A9%97%E5%AE%A4-2-%E5%AF%A6%E4%BD%9C-canvas-%E9%81%AE%E7%BD%A9%E5%8B%95%E7%95%AB-3e331db6cd95](https://medium.com/%E8%80%81%E9%97%86%E4%BE%86%E9%BB%9E%E5%AF%87%E6%B1%80%E5%90%A7/%E8%80%81%E9%97%86%E7%9A%84%E7%B6%B2%E9%A0%81%E5%AF%A6%E9%A9%97%E5%AE%A4-2-%E5%AF%A6%E4%BD%9C-canvas-%E9%81%AE%E7%BD%A9%E5%8B%95%E7%95%AB-3e331db6cd95) - 教學2019-12-10 ### 老闆的網頁實驗室 #1 — 實作CSS拆字動畫 拆解 Rogue Studio 網站標題逐字切入的動畫：用內外兩層 span 把文字拆成單一字母，外層裁切、內層位移，只要加一個 class 就能套用。 Medium・老闆來點寇汀吧｜寫手整理↗︎ [https://medium.com/%E8%80%81%E9%97%86%E4%BE%86%E9%BB%9E%E5%AF%87%E6%B1%80%E5%90%A7/%E8%80%81%E9%97%86%E7%9A%84%E7%B6%B2%E9%A0%81%E5%AF%A6%E9%A9%97%E5%AE%A4-1-%E5%AF%A6%E4%BD%9Ccss%E6%8B%86%E5%AD%97%E5%8B%95%E7%95%AB-dfcf40f4a38c](https://medium.com/%E8%80%81%E9%97%86%E4%BE%86%E9%BB%9E%E5%AF%87%E6%B1%80%E5%90%A7/%E8%80%81%E9%97%86%E7%9A%84%E7%B6%B2%E9%A0%81%E5%AF%A6%E9%A9%97%E5%AE%A4-1-%E5%AF%A6%E4%BD%9Ccss%E6%8B%86%E5%AD%97%E5%8B%95%E7%95%AB-dfcf40f4a38c) ## 2018 - 長文2018-12 ### 在紐約大學讀研當助教的進化日誌 NYU IDM 第一學期 — 從寫作業到教別人寫作業 全文 · cheyuwu.com [https://cheyuwu.com/zh/writing/2018-nyu-ta-evolution/](https://cheyuwu.com/zh/writing/2018-nyu-ta-evolution/) - 長文2018-08 ### 釀造一門結合網頁、設計、數學與特效的線上程式課程 在 Hahow 開第二堂課的一年 — 動態互動網頁特效入門 全文 · cheyuwu.com [https://cheyuwu.com/zh/writing/2018-effects-course-brewing/](https://cheyuwu.com/zh/writing/2018-effects-course-brewing/) - 長文2018-07-16 ### 特效入門課程正課完成與介紹 / 加碼單元規劃調整 正課在 2018 年 6 月底全數上架，共 2,749 分鐘、60 多個範例、400 多張投影片。他回顧四大系列單元與這一年的製課過程，並說明 Vuex、GSAP、D3.js、Three.js 四個加碼單元的新上線日期。 Hahow 課程頁・最新消息↗︎ [https://hahow.in/cr/monoame-webdesign2](https://hahow.in/cr/monoame-webdesign2) - 長文2018-03-02 ### 課程安排更新與進度公告 《動畫互動網頁特效入門》上架半年時寫給學員的進度說明：JavaScript 部分從 10 個單元擴充到 20 個、投影片近 300 頁，因此延誤，並列出 Canvas 與 Vue 各批單元的最終上架時程。 Hahow 課程頁・最新消息↗︎ [https://hahow.in/cr/monoame-webdesign2](https://hahow.in/cr/monoame-webdesign2) - 長文2018 ### 數位時代的資訊理論演化 NYU IDM — Media Theory D — 期末論文 全文 · cheyuwu.com [https://cheyuwu.com/zh/writing/2018-media-theory-final/](https://cheyuwu.com/zh/writing/2018-media-theory-final/) - 教學2018 ### 用 socket.io 做即時互動遊戲 WebSocket 實戰：如何打造多人即時互動體驗。 YouTube↗︎ [https://www.youtube.com/watch?v=QVZcMx3jtG8](https://www.youtube.com/watch?v=QVZcMx3jtG8) ## 2017 - 演講2017 ### Making Interactive Websites with Vue, GSAP and d3.js 如何整合三大前端框架打造互動網站：實戰經驗分享。 MOPCON 2017↗︎ [https://www.youtube.com/watch?v=XLZ3lahTOWU](https://www.youtube.com/watch?v=XLZ3lahTOWU) - 演講2017 ### TEDxNCUE「嚮」— Creating Possibilities with a Multidisciplinary Mindset 跨領域思維如何開啟更多可能性。 TEDx↗︎ [https://www.youtube.com/watch?v=bl5MrZ6GA98](https://www.youtube.com/watch?v=bl5MrZ6GA98) - 教學2017 ### 動畫互動網頁特效入門 (Hahow) 進階互動特效：粒子系統、物理模擬、SVG 動畫。6,231 名學生。 Hahow — 6,231 students ★4.98↗︎ [https://hahow.in/cr/monoame-webdesign2](https://hahow.in/cr/monoame-webdesign2) ## 2016 - 長文2016 ### 從不只是一門線上課程，而是一場推動進化的豪賭 2016 舊文整理 — Hahow 開課滿一個月時的反思 全文 · cheyuwu.com [https://cheyuwu.com/zh/writing/2016-hahow-bet/](https://cheyuwu.com/zh/writing/2016-hahow-bet/) - 教學2016 ### 動畫互動網頁程式入門 (Hahow) 最受歡迎的互動網頁課程：13,020 名學生，評分 4.96★。涵蓋 JavaScript、Canvas、動畫原理。 Hahow — 13,020 students ★4.96↗︎ [https://hahow.in/cr/monoame-webdesign1](https://hahow.in/cr/monoame-webdesign1) ## 2011 - 長文2011-07-24 ### 關於哲宇的比賽故事 五歲那年妹妹確診先天性心臟病，他一年有三百天獨自在家，四年級開始玩 Flash。文章寫到國二起連拿三屆宏碁數位創作獎首獎，參賽的理由從想買筆電，變成對自己的肯定。 獎金獵人（PChome 個人新聞台）↗︎ [https://mypaper.pchome.com.tw/adc_hunter/post/1322327010](https://mypaper.pchome.com.tw/adc_hunter/post/1322327010) - 長文2011-07-24 ### 獵人名人堂：玩成夢想的獵人吳哲宇 16 歲讀建國中學時回答獎金獵人的十個問題：怎麼兼顧課業與比賽，做動畫影片的三個訣竅（速度、驚奇、關鍵理念），以及連拿三屆宏碁數位創作獎首獎的經驗。 獎金獵人（PChome 個人新聞台）↗︎ [https://mypaper.pchome.com.tw/adc_hunter/post/1322326982](https://mypaper.pchome.com.tw/adc_hunter/post/1322326982) 其他平台 [Medium](https://medium.com/@wucheyu)[CreativeCoding.in](https://creativecoding.in/)[YouTube](https://www.youtube.com/channel/UCHX_XMhPrtvOmgGOnA2eTmA)[TD Workshop](https://education.monolab.world/)