CHE-YU WU / STRATA 地層 地層 Strata｜2001–2026，每一年留下來的東西 # 一年的創作現場 沿著聲音、記憶與教學，走進這一年持續發生的實驗。 2020-01-01 — 2020-12-31 41 筆公開紀錄 紅線：來源關聯 麻線：共同主題 移到紙上看關係名稱 [完整紀錄 ↓](https://cheyuwu.com/zh/strata/2020/#lab-records) ****案件紀錄**2020-01-01 / 2020-12-3141 筆 這裡依月份往下讀，每張卡下面的小標是它的關係，點一下會跳到另一筆紀錄 ### 2020 · 全年 ** ![](https://cheyuwu.com/static/img/mirror/4430345241a6.webp) ### 2020 · 03 ** ![](https://cheyuwu.com/static/lab/2020/note-canvas-mask.webp) - *遮罩* ** ![](https://cheyuwu.com/static/lab/2020/note-css-letter-split.webp) - ** ![](https://cheyuwu.com/static/lab/2020/note-socket-chat.webp) - *即時通訊* ** ![](https://cheyuwu.com/static/lab/2020/note-weather-map.webp) - ### 2020 · 04 ** ![](https://cheyuwu.com/static/img/mirror/6cfd093338c3.jpg) - *粒子* ** ![](https://cheyuwu.com/static/img/sketches/877614-sm.webp) *粒子* ** ![](https://cheyuwu.com/static/img/sketches/880483-sm.webp) ** ![](https://cheyuwu.com/static/lab/2020/note-p5-quickstart.webp) ** ![](https://cheyuwu.com/static/lab/2020/repo-p5-vue-mirror.webp) *開源* ** ![](https://cheyuwu.com/static/img/sketches/883193-sm.webp) - ** ![](https://cheyuwu.com/static/img/sketches/885665-sm.webp) *樂譜* ### 2020 · 05 ** ![](https://cheyuwu.com/static/img/mirror/7d4357f20080.jpg) *海葵* ** ![](https://cheyuwu.com/static/img/sketches/892021-sm.webp) - *星球* ** ![](https://cheyuwu.com/static/img/sketches/892614-sm.webp) ** ![](https://cheyuwu.com/static/img/sketches/902876-sm.webp) - ** ![](https://cheyuwu.com/static/img/sketches/903498-sm.webp) - - *物理引擎* ** ![](https://cheyuwu.com/static/img/sketches/905319-sm.webp) - ### 2020 · 06 ** ![](https://cheyuwu.com/static/lab/2020/course-creative-coding.webp) - - - - ** - - ** ![](https://cheyuwu.com/static/img/sketches/909343-sm.webp) - *視訊* ** ![](https://cheyuwu.com/static/img/sketches/914673-sm.webp) - ** - ** ![](https://cheyuwu.com/static/img/sketches/918427-sm.webp) - ** ![](https://cheyuwu.com/static/img/sketches/919913-sm.webp) *互動* ** ![](https://cheyuwu.com/static/img/sketches/923287-sm.webp) - *著色器* ** ![](https://cheyuwu.com/static/img/sketches/923304-sm.webp) - *著色器* ** ![](https://cheyuwu.com/static/lab/2020/podcast-butin-ep26.webp) - ### 2020 · 07 ** ![](https://cheyuwu.com/static/img/sketches/925596-sm.webp) ** ![](https://cheyuwu.com/static/img/sketches/926217-sm.webp) *著色器* ** ![](https://cheyuwu.com/static/img/sketches/926998-sm.webp) *Voronoi* ** ![](https://cheyuwu.com/static/img/sketches/931034-sm.webp) - *DNA* ### 2020 · 08 ** ![](https://cheyuwu.com/static/img/sketches/940727-sm.webp) - ** ![](https://cheyuwu.com/static/img/sketches/941774-sm.webp) *弦論* ### 2020 · 09 ** ![](https://cheyuwu.com/static/img/mirror/18098782de70.jpg) ** ![](https://cheyuwu.com/static/img/mirror/4de6843ca9e9.jpg) *生長* ### 2020 · 10 ** ![](https://cheyuwu.com/static/img/sketches/989471-sm.webp) *著色器* ### 2020 · 11 ** ![](https://cheyuwu.com/static/img/sketches/1004867-sm.webp) *維度* ** ![](https://cheyuwu.com/static/img/sketches/1017517-sm.webp) ** ![](https://cheyuwu.com/static/img/sketches/1027958-sm.webp) ### 2020 · 12 ** ![](https://cheyuwu.com/static/img/sketches/1050016-sm.webp) *神經* ![](https://kyoko.openprocessing.org/thumbnails/visualThumbnail2290248@2x.jpg) ![](https://cheyuwu.com/static/img/sketches/923989-sm.webp) ![](https://cheyuwu.com/static/img/mirror/1239323070da-sm.webp) ![](https://cheyuwu.com/static/img/sketches/1635740-sm.webp) ![](https://cheyuwu.com/static/img/sketches/1615617-sm.webp) ![](https://cheyuwu.com/static/img/mirror/39bad087e6fd-sm.webp) ![](https://cheyuwu.com/static/img/mirror/0c23aeb30692-sm.webp) ![](https://cheyuwu.com/static/img/sketches/925596-sm.webp) 創作族譜**818 件每日創作，怎麼一件長出一件**46 個家族畫成有縮圖的分支樹，從 2018 到 2026→ [https://cheyuwu.com/zh/lineage/](https://cheyuwu.com/zh/lineage/) 完整紀錄 ## 逐一閱讀 最新的在最上面，往下越舊。每筆紀錄保留日期依據、公開來源與關係說明。 2020 ![神經系統｜每日創作截圖](https://cheyuwu.com/static/img/sketches/1050016-sm.webp) 2020-12-27 原型Che-Yu Wu 2020-12-27 · 已公開 ### 神經系統（每日創作 201227） 一點電訊號，再加上一點化學分子， 焦慮在幽微的角落誕生茁壯， 於是那個夜晚充滿了無法靜音的囈語， 再也無法入眠。 - 神經 - 焦慮 來源 [前往原始頁面 ↗︎](https://cheyuwu.com/zh/sketch/1050016/) [OpenProcessing ↗︎](https://openprocessing.org/sketch/1050016) ![夢靨｜每日創作截圖](https://cheyuwu.com/static/img/sketches/1027958-sm.webp) 2020-11-28 原型Che-Yu Wu 2020-11-28 · 已公開 ### 夢靨（每日創作 201128） 先是滾石生苔逐漸緩下， 日常景象鏽蝕，鋼筋裸露， 不小心避過就留下一個個穿刺的傷， 從最美好的時光間隙中， 蔓延直到把眼前覆蓋成漆黑的牆。 - 夢境 - 侵蝕 來源 [前往原始頁面 ↗︎](https://cheyuwu.com/zh/sketch/1027958/) [OpenProcessing ↗︎](https://openprocessing.org/sketch/1027958) 相關紀錄 [→ Foundation Classic Series（2021）](https://cheyuwu.com/zh/strata/2021/#lab-foundation-classic) · 被收進 Foundation 經典系列 (來源關聯) ![野生之夢｜每日創作截圖](https://cheyuwu.com/static/img/sketches/1017517-sm.webp) 2020-11-15 原型Che-Yu Wu 2020-11-15 · 已公開 ### 野生之夢（每日創作 201115） 每一個現實瞬間都會有幾個野生的夢， 肆意在時間的原野擴張後力竭，扭曲成無法實現的樣子， 不過 take it easy，總有些遺憾生命才不會過度甜膩。 嘗試把遞迴加上shader，然後配上聽起來ㄎㄧㄤㄎㄧㄤ的音樂 - 夢 - 遞迴 來源 [前往原始頁面 ↗︎](https://cheyuwu.com/zh/sketch/1017517/) [OpenProcessing ↗︎](https://openprocessing.org/sketch/1017517) ![新增維度｜每日創作截圖](https://cheyuwu.com/static/img/sketches/1004867-sm.webp) 2020-11-03 原型Che-Yu Wu 2020-11-03 · 已公開 ### 新增維度（每日創作 201103） 新增維度，一層一層的演算構築虛幻的世界， 不斷的逼近現實，卻仍然虛假， 測試動態產生3D材質後作成環狀的效果。 - 維度 - 材質 來源 [前往原始頁面 ↗︎](https://cheyuwu.com/zh/sketch/1004867/) [OpenProcessing ↗︎](https://openprocessing.org/sketch/1004867) ![平行宇宙｜每日創作截圖](https://cheyuwu.com/static/img/sketches/989471-sm.webp) 2020-10-17 原型Che-Yu Wu 2020-10-17 · 已公開 ### 平行宇宙（每日創作 201017） 久久來玩一下shader 一個又一個不同世界的概率， 藏在維度扭曲的平行宇宙之間， 每一個當下造就無數分裂的因果。 - 著色器 - 宇宙 來源 [前往原始頁面 ↗︎](https://cheyuwu.com/zh/sketch/989471/) [OpenProcessing ↗︎](https://openprocessing.org/sketch/989471) ![捲曲藤蔓｜每日創作截圖](https://cheyuwu.com/static/img/mirror/4de6843ca9e9.jpg) 2020-09-25 原型Che-Yu Wu / OpenProcessing 2020-09-25 · 已公開 ### 捲曲藤蔓（每日創作 200925） 從單一的生長到宏觀的現象， 不斷的改變消逝， 雖然不盡然一致但終綻放成花。 - 生長 - 曲線 來源 [前往原始頁面 ↗︎](https://cheyuwu.com/zh/sketch/971516/) [OpenProcessing ↗︎](https://openprocessing.org/sketch/971516) ![記憶逝去｜每日創作截圖](https://cheyuwu.com/static/img/mirror/18098782de70.jpg) 2020-09-03 原型Che-Yu Wu / OpenProcessing 2020-09-03 · 已公開 依 Instagram 貼文的發布日期，標題編號 200903 為同一日。 ### 記憶逝去（每日創作 200903） 每次記憶的提取， 都會對內容與真實產生不可逆的變化， 粉碎模糊掉的情緒無法再生， 隨著時間過去，究竟是真實嗎？ 還是僅是自己不斷重塑的幻象 - 記憶 - 時間 來源 [前往原始頁面 ↗︎](https://cheyuwu.com/zh/sketch/954948/) [OpenProcessing ↗︎](https://openprocessing.org/sketch/954948) [Instagram @bosscodingplease ↗︎](https://www.instagram.com/bosscodingplease/) ![超弦理論｜每日創作截圖](https://cheyuwu.com/static/img/sketches/941774-sm.webp) 2020-08-04 原型Che-Yu Wu 2020-08-04 · 已公開 依 Instagram 貼文的發布日期，標題編號 200804 為同一日。 ### 超弦理論（每日創作 200804） 世界的構成是震動的弦嗎？ 躲在觀測不到過小的維度蜷曲中， 宏觀中的事實並不存在，你的意念決定看見的面貌。 - 弦論 - 維度 來源 [前往原始頁面 ↗︎](https://cheyuwu.com/zh/sketch/941774/) [OpenProcessing ↗︎](https://openprocessing.org/sketch/941774) [Instagram @bosscodingplease ↗︎](https://www.instagram.com/bosscodingplease/) ![焦慮｜每日創作截圖](https://cheyuwu.com/static/img/sketches/940727-sm.webp) 2020-08-02 原型Che-Yu Wu 2020-08-02 · 已公開 依 Instagram 貼文的發布日期。標題編號 200801 是創作日 2020-08-01，貼文晚 1 天發出。 ### 焦慮（每日創作 200801） 思緒跳躍恍惚，無法停止的腦內話語 打結了，不同的情緒撞擊碎裂融合，然後消失 shader系列暫時休息，想做一些不同方向的嘗試 - 情緒 - 粒子 來源 [前往原始頁面 ↗︎](https://cheyuwu.com/zh/sketch/940727/) [OpenProcessing ↗︎](https://openprocessing.org/sketch/940727) [Instagram @bosscodingplease ↗︎](https://www.instagram.com/bosscodingplease/) 相關紀錄 [→ 變異（每日創作 200705）](https://cheyuwu.com/zh/strata/2020/#lab-sketch-931034) · 詩句寫明著色器系列暫時休息 (來源關聯) ![變異｜每日創作截圖](https://cheyuwu.com/static/img/sketches/931034-sm.webp) 2020-07-14 原型Che-Yu Wu 2020-07-14 · 已公開 依 Instagram 貼文的發布日期。標題編號 200705 是創作日 2020-07-05，貼文晚 9 天發出。 ### 變異（每日創作 200705） 受到輻射的DNA逐漸解離產生變異， 測試shader用sin+cos生成遮罩來產生DNA， 對形狀繪製的掌握度稍微高一些了，能比較熟練的繪製shader中的線條跟形狀。 - DNA - 遮罩 來源 [前往原始頁面 ↗︎](https://cheyuwu.com/zh/sketch/931034/) [OpenProcessing ↗︎](https://openprocessing.org/sketch/931034) [Instagram @bosscodingplease ↗︎](https://www.instagram.com/bosscodingplease/) 相關紀錄 [→ 焦慮（每日創作 200801）](https://cheyuwu.com/zh/strata/2020/#lab-sketch-940727) · 詩句寫明著色器系列暫時休息 (來源關聯) ![點點農田｜每日創作截圖](https://cheyuwu.com/static/img/sketches/926998-sm.webp) 2020-07-06 原型Che-Yu Wu 2020-07-06 · 已公開 依 Instagram 貼文的發布日期。標題編號 200630 是創作日 2020-06-30，貼文晚 6 天發出。 ### 點點農田（每日創作 200630） 從高空俯瞰五顏六色的農田，不規則的切割著， 練習用GLSL做Voronoi Diagram，運算真的好快， 取色的部分參考那個點的位置，也測試利用網格的原理， 生成很多不同大小的圓形疊加在一起。 - Voronoi - GLSL 來源 [前往原始頁面 ↗︎](https://cheyuwu.com/zh/sketch/926998/) [OpenProcessing ↗︎](https://openprocessing.org/sketch/926998) [Instagram @bosscodingplease ↗︎](https://www.instagram.com/bosscodingplease/) ![火燒竹筍｜每日創作截圖](https://cheyuwu.com/static/img/sketches/926217-sm.webp) 2020-07-04 原型Che-Yu Wu 2020-07-04 · 已公開 依 Instagram 貼文的發布日期。標題編號 200629 是創作日 2020-06-29，貼文晚 5 天發出。 ### 火燒竹筍（每日創作 200629） 竹筍們著火了，在著急的抖來抖去， 今天想到，如果把p5.js畫布結果輸入到shader做使用， 就可以做出類似畫布或扭曲的濾鏡， 嘗試了一下發現效果很酷，之後就可以用p5畫完形狀再放進shader後處理了。 - 著色器 - 濾鏡 來源 [前往原始頁面 ↗︎](https://cheyuwu.com/zh/sketch/926217/) [OpenProcessing ↗︎](https://openprocessing.org/sketch/926217) [Instagram @bosscodingplease ↗︎](https://www.instagram.com/bosscodingplease/) ![重力波｜每日創作截圖](https://cheyuwu.com/static/img/sketches/925596-sm.webp) 2020-07-03 原型Che-Yu Wu 2020-07-03 · 已公開 依 Instagram 貼文的發布日期。標題編號 200627 是創作日 2020-06-27，貼文晚 6 天發出。 ### 重力波（每日創作 200627） 在時空中的漣漪擴散成重力波，扭曲了相對的距離卻無從感受。 測試使用距離＋sin來位移像素採樣的點，結合練習grid畫圓形跟噪聲材質，做出網外扭曲擴散的繽紛時空。 - 重力波 - 取樣 來源 [前往原始頁面 ↗︎](https://cheyuwu.com/zh/sketch/925596/) [OpenProcessing ↗︎](https://openprocessing.org/sketch/925596) [Instagram @bosscodingplease ↗︎](https://www.instagram.com/bosscodingplease/) **不停 Bu-Tin** ![程式語言與互動設計的火花：不停 Bu-Tin EP26｜影片畫面](https://cheyuwu.com/static/lab/2020/podcast-butin-ep26.webp) 2020-06-29 節目不停 | 自由接案生活 / YouTube thumbnail 2020-06-29 · 已公開 依 butin.co 節目頁標示的發布日期，媒體中心另記 YouTube 版本為 2020-06-28。 ### 程式語言與互動設計的火花：不停 Bu-Tin EP26 自由接案生活 Podcast「不停 Bu-Tin」第 26 集，主持人呂罰，來賓身分是新媒體藝術家與墨雨設計。節目談小學用 Flash 做動畫的起點、電機系時期的自學、第一個網頁案，以及勉強做超過自己能力範圍一點點的事能幫助自己進步這句話。也談每天用程式語言寫互動設計的習慣，以及多元化發展比純接案好，因為接案的作品終究不完全屬於自己。 - 接案 - 每日創作 來源 [前往原始頁面 ↗︎](https://butin.co/episode/s2ep26) [不停 Bu-Tin ↗︎](https://butin.co/episode/s2ep26) [YouTube ↗︎](https://www.youtube.com/watch?v=zpZiRHGDjTA) 相關紀錄 [→ 用一點固執和無限新奇，開啟這場程式大冒險：Hahow Blog 專訪](https://cheyuwu.com/zh/strata/2020/#lab-press-hahow-creative-coding) · 同一個月的兩篇訪談 (策展主題) ![魔法軌跡｜每日創作截圖](https://cheyuwu.com/static/img/sketches/923304-sm.webp) 2020-06-27 原型Che-Yu Wu 2020-06-27 · 已公開 依 Instagram 貼文的發布日期。標題編號 200623 是創作日 2020-06-23，貼文晚 4 天發出。 ### 魔法軌跡（每日創作 200623） 魔法粒子會留下發亮的軌跡， 一樣是shader系列，其實跟上個顯微粒子的code大概只差一點點， 測試把粒子加上一些物理效果，配合p5.js的array做互動 - 著色器 - 軌跡 來源 [前往原始頁面 ↗︎](https://cheyuwu.com/zh/sketch/923304/) [OpenProcessing ↗︎](https://openprocessing.org/sketch/923304) [Instagram @bosscodingplease ↗︎](https://www.instagram.com/bosscodingplease/) 相關紀錄 [→ 顯微粒子（每日創作 200622）](https://cheyuwu.com/zh/strata/2020/#lab-sketch-923287) · 詩句寫明與顯微粒子的程式只差一點點 (來源關聯) ![顯微粒子｜每日創作截圖](https://cheyuwu.com/static/img/sketches/923287-sm.webp) 2020-06-27 原型Che-Yu Wu 2020-06-27 · 已公開 依 Instagram 貼文的發布日期。標題編號 200622 是創作日 2020-06-22，貼文晚 5 天發出。 ### 顯微粒子（每日創作 200622） 測試在p5.js裡面用shader，產生陣列的粒子後傳到glsl渲染， shader還是好難控制啊啊，很容易一調整就全部跑掉， 感覺很像某種在顯微鏡下的視野 - 著色器 - 粒子 來源 [前往原始頁面 ↗︎](https://cheyuwu.com/zh/sketch/923287/) [OpenProcessing ↗︎](https://openprocessing.org/sketch/923287) [Instagram @bosscodingplease ↗︎](https://www.instagram.com/bosscodingplease/) 相關紀錄 [→ 魔法軌跡（每日創作 200623）](https://cheyuwu.com/zh/strata/2020/#lab-sketch-923304) · 詩句寫明與顯微粒子的程式只差一點點 (來源關聯) ![蝸牛賽跑｜每日創作截圖](https://cheyuwu.com/static/img/sketches/919913-sm.webp) 2020-06-20 原型Che-Yu Wu 2020-06-20 · 已公開 依 Instagram 貼文的發布日期。標題編號 200616 是創作日 2020-06-16，貼文晚 4 天發出。 ### 蝸牛賽跑（每日創作 200616） 每一隻蝸牛都有自己獨一無二的紋路跟步調， 在自己的路途上奮力的往前爬（雖然有時候還是會偷偷跟別人比較一下） 今天來換個風格做做互動的東西。 - 互動 - 蝸牛 來源 [前往原始頁面 ↗︎](https://cheyuwu.com/zh/sketch/919913/) [OpenProcessing ↗︎](https://openprocessing.org/sketch/919913) [Instagram @bosscodingplease ↗︎](https://www.instagram.com/bosscodingplease/) ![有機電路｜每日創作截圖](https://cheyuwu.com/static/img/sketches/918427-sm.webp) 2020-06-17 原型Che-Yu Wu 2020-06-17 · 已公開 依 Instagram 貼文的發布日期。標題編號 200614 是創作日 2020-06-14，貼文晚 3 天發出。 ### 有機電路（每日創作 200614） 這次是測試方形的遞迴，調整線條呈現後會有種亂中有序的有機電路感， 遞迴系列差不多來到了尾聲，想要再去探索看看其他手法 - 遞迴 - 電路 來源 [前往原始頁面 ↗︎](https://cheyuwu.com/zh/sketch/918427/) [OpenProcessing ↗︎](https://openprocessing.org/sketch/918427) [Instagram @bosscodingplease ↗︎](https://www.instagram.com/bosscodingplease/) 相關紀錄 [→ 蓋亞之樹（每日創作 200608）](https://cheyuwu.com/zh/strata/2020/#lab-sketch-914673) · 同一輪遞迴系列 (策展主題) 2020-06-14 開源 2020-06-14 · 已公開 採用 GitHub 倉庫的建立日期。倉庫頁面未顯示個別提交日期。 ### CreativeCodingDemo：課程示範用的公開倉庫 公開在 GitHub 的小倉庫，內容只有 index.html 與 mySketch.js 兩個檔案，共兩次提交，沒有說明文件也沒有列出授權條款。建立日期落在 Hahow 第三門課程募資的同一個月。 - 開源 - 教學 來源 [前往原始頁面 ↗︎](https://github.com/frank890417/CreativeCodingDemo) [GitHub ↗︎](https://github.com/frank890417/CreativeCodingDemo) 相關紀錄 [→ 互動藝術程式創作入門：Hahow 第三門課募資](https://cheyuwu.com/zh/strata/2020/#lab-course-creative-coding) · 同一個月的課程線 (策展主題) ![蓋亞之樹｜每日創作截圖](https://cheyuwu.com/static/img/sketches/914673-sm.webp) 2020-06-10 原型Che-Yu Wu 2020-06-10 · 已公開 依 Instagram 貼文的發布日期。標題編號 200608 是創作日 2020-06-08，貼文晚 2 天發出。 ### 蓋亞之樹（每日創作 200608） 從充滿無限可能性的種子，長出蓋亞之樹， 每一個枝葉都是一個平行世界，通往獨一無二的未來， 嘗試用三角形遞迴繪製自然感的植物。 - 遞迴 - 植物 來源 [前往原始頁面 ↗︎](https://cheyuwu.com/zh/sketch/914673/) [OpenProcessing ↗︎](https://openprocessing.org/sketch/914673) [Instagram @bosscodingplease ↗︎](https://www.instagram.com/bosscodingplease/) 相關紀錄 [→ 有機電路（每日創作 200614）](https://cheyuwu.com/zh/strata/2020/#lab-sketch-918427) · 同一輪遞迴系列 (策展主題) ![中文馬賽克｜每日創作截圖](https://cheyuwu.com/static/img/sketches/909343-sm.webp) 2020-06-02 原型Che-Yu Wu 2020-06-02 · 已公開 依 Instagram 貼文的發布日期。標題編號 200601 是創作日 2020-06-01，貼文晚 1 天發出。 ### 中文馬賽克（每日創作 200601） 因為今天在忙課程中的範例，把教學的中文視訊馬賽克整理成今天的創作！ 視訊取像素一直會遇到怪問題當掉，後來改成先繪製一個暫存的圖片，就可以正常取到顏色。 覺得可以調整sample大小效果很酷 - 視訊 - 馬賽克 來源 [前往原始頁面 ↗︎](https://cheyuwu.com/zh/sketch/909343/) [OpenProcessing ↗︎](https://openprocessing.org/sketch/909343) [Instagram @bosscodingplease ↗︎](https://www.instagram.com/bosscodingplease/) 相關紀錄 [→ 互動藝術程式創作入門：Hahow 第三門課募資](https://cheyuwu.com/zh/strata/2020/#lab-course-creative-coding) · 詩句寫明來自課程中的範例 (來源關聯) **Hahow Blog** 2020-06-01 報導 2020-06-01 · 已公開 原站憑證異常無法直接讀取，日期取自搜尋結果顯示的 2020 年 6 月 1 日，內容以知識庫存檔為準。 ### 用一點固執和無限新奇，開啟這場程式大冒險：Hahow Blog 專訪 Hahow 部落格在第三門課上架前夕的專訪，採訪撰稿為 Ani Syu。文章走過他從網頁入門到特效再到 Creative Coding 的三個階段，也寫到他在 NYU 整合數位媒體系擔任 Creative Coding 助教的紐約時光。 - 專訪 - 教學 來源 [前往原始頁面 ↗︎](https://blog.hahow.in/teacher-interview-creative-coding/) [Hahow Blog ↗︎](https://blog.hahow.in/teacher-interview-creative-coding/) 相關紀錄 [→ 互動藝術程式創作入門：Hahow 第三門課募資](https://cheyuwu.com/zh/strata/2020/#lab-course-creative-coding) · 專訪寫的是這門課上架前夕 (來源關聯) [→ 程式語言與互動設計的火花：不停 Bu-Tin EP26](https://cheyuwu.com/zh/strata/2020/#lab-podcast-butin-ep26) · 同一個月的兩篇訪談 (策展主題) ![互動藝術程式創作入門：Hahow 第三門課募資｜課程主視覺](https://cheyuwu.com/static/lab/2020/course-creative-coding.webp) 2020-06 課程Monoame Design / portfolio image 2020-06 · 已公開 課程頁與 Hahow 部落格都擋住自動讀取，募資月份取自搜尋結果顯示的 2020 年 6 月，正式上線日期待核。 ### 互動藝術程式創作入門：Hahow 第三門課募資 第三門 Hahow 課程《互動藝術程式創作入門 Creative Coding》在 2020 年進入募資。課程以 p5.js 為主軸，從基礎繪製與色彩一路走到互動系統與模擬，課程筆記託管在 HackMD。這一年的每日創作有好幾支直接來自備課與錄課的範例。 - 課程 - p5.js 來源 [前往原始頁面 ↗︎](https://hahow.in/cr/creative-coding-1) [Hahow 課程頁 ↗︎](https://hahow.in/cr/creative-coding-1) [課程作業說明（HackMD） ↗︎](https://hackmd.io/@ankycheng/hahowHW) 相關紀錄 [→ 水色星球（每日創作 200509）](https://cheyuwu.com/zh/strata/2020/#lab-sketch-892021) · 詩句寫明來自課程的函數範例 (來源關聯) [→ 用一點固執和無限新奇，開啟這場程式大冒險：Hahow Blog 專訪](https://cheyuwu.com/zh/strata/2020/#lab-press-hahow-creative-coding) · 專訪寫的是這門課上架前夕 (來源關聯) [→ 中文馬賽克（每日創作 200601）](https://cheyuwu.com/zh/strata/2020/#lab-sketch-909343) · 詩句寫明來自課程中的範例 (來源關聯) [→ CreativeCodingDemo：課程示範用的公開倉庫](https://cheyuwu.com/zh/strata/2020/#lab-repo-creative-coding-demo) · 同一個月的課程線 (策展主題) ![想睡的波奇｜每日創作截圖](https://cheyuwu.com/static/img/sketches/905319-sm.webp) 2020-05-27 原型Che-Yu Wu 2020-05-27 · 已公開 依 Instagram 貼文的發布日期。標題編號 200526 是創作日 2020-05-26，貼文晚 1 天發出。 ### 想睡的波奇（每日創作 200526） 測試使用Matter.js的soft body， 做了扭扭軟軟的奇怪生物，感覺永遠睡不飽的波奇， 把他拖來拖去他會很不情願的躺回去 - 軟體物理 - 角色 來源 [前往原始頁面 ↗︎](https://cheyuwu.com/zh/sketch/905319/) [OpenProcessing ↗︎](https://openprocessing.org/sketch/905319) [Instagram @bosscodingplease ↗︎](https://www.instagram.com/bosscodingplease/) 相關紀錄 [→ 生生海膽（每日創作 200523）](https://cheyuwu.com/zh/strata/2020/#lab-sketch-903498) · 同一批物理引擎練習 (策展主題) ![生生海膽｜每日創作截圖](https://cheyuwu.com/static/img/sketches/903498-sm.webp) 2020-05-24 原型Che-Yu Wu 2020-05-24 · 已公開 依 Instagram 貼文的發布日期。標題編號 200523 是創作日 2020-05-23，貼文晚 1 天發出。 ### 生生海膽（每日創作 200523） 今天繼續玩物理引擎，發現有很多可以發展跟創作的方向 厭世海膽很生生，看見彼此就會吵架，被拖來拖去會更生氣。 - 物理引擎 - 海膽 來源 [前往原始頁面 ↗︎](https://cheyuwu.com/zh/sketch/903498/) [OpenProcessing ↗︎](https://openprocessing.org/sketch/903498) [Instagram @bosscodingplease ↗︎](https://www.instagram.com/bosscodingplease/) 相關紀錄 [→ 撞擊水族箱（每日創作 200522）](https://cheyuwu.com/zh/strata/2020/#lab-sketch-902876) · 詩句寫明繼續前一天的物理引擎 (來源關聯) [→ 想睡的波奇（每日創作 200526）](https://cheyuwu.com/zh/strata/2020/#lab-sketch-905319) · 同一批物理引擎練習 (策展主題) ![撞擊水族箱｜每日創作截圖](https://cheyuwu.com/static/img/sketches/902876-sm.webp) 2020-05-23 原型Che-Yu Wu 2020-05-23 · 已公開 依 Instagram 貼文的發布日期。標題編號 200522 是創作日 2020-05-22，貼文晚 1 天發出。 ### 撞擊水族箱（每日創作 200522） 越來越多的居民各自劃清了領地 驚恐的魚跟海星看著彼此傻眼撞擊 嘗試使用matter.js加上物理模擬 - 物理模擬 - 水族箱 來源 [前往原始頁面 ↗︎](https://cheyuwu.com/zh/sketch/902876/) [OpenProcessing ↗︎](https://openprocessing.org/sketch/902876) [Instagram @bosscodingplease ↗︎](https://www.instagram.com/bosscodingplease/) 相關紀錄 [→ 生生海膽（每日創作 200523）](https://cheyuwu.com/zh/strata/2020/#lab-sketch-903498) · 詩句寫明繼續前一天的物理引擎 (來源關聯) ![電波電路｜每日創作截圖](https://cheyuwu.com/static/img/sketches/892614-sm.webp) 2020-05-11 原型Che-Yu Wu 2020-05-11 · 已公開 依 Instagram 貼文的發布日期。標題編號 200510 是創作日 2020-05-10，貼文晚 1 天發出。 ### 電波電路（每日創作 200510） 想起以前學電機的訊號，結果很意外的之後做音樂相關的創作居然用得到。 假設理論解釋一切，建立模型去模擬這個世界，傳送彩色逼哩逼哩的訊號。 - 訊號 - 電路 來源 [前往原始頁面 ↗︎](https://cheyuwu.com/zh/sketch/892614/) [OpenProcessing ↗︎](https://openprocessing.org/sketch/892614) [Instagram @bosscodingplease ↗︎](https://www.instagram.com/bosscodingplease/) ![水色星球｜每日創作截圖](https://cheyuwu.com/static/img/sketches/892021-sm.webp) 2020-05-09 原型Che-Yu Wu 2020-05-09 · 已公開 依 Instagram 貼文的發布日期，標題編號 200509 為同一日。 ### 水色星球（每日創作 200509） 凝聚了所有發光的水，無數個世界撞擊融合， 水色星球不斷消耗自我，直到最後一絲光芒散盡 今天在寫函數範例的時候想到可以做星球，稍微調整了一下 - 星球 - 函數 來源 [前往原始頁面 ↗︎](https://cheyuwu.com/zh/sketch/892021/) [OpenProcessing ↗︎](https://openprocessing.org/sketch/892021) [Instagram @bosscodingplease ↗︎](https://www.instagram.com/bosscodingplease/) 相關紀錄 [→ 互動藝術程式創作入門：Hahow 第三門課募資](https://cheyuwu.com/zh/strata/2020/#lab-course-creative-coding) · 詩句寫明來自課程的函數範例 (來源關聯) ![色散海葵｜每日創作截圖](https://cheyuwu.com/static/img/mirror/7d4357f20080.jpg) 2020-05-05 原型Che-Yu Wu / OpenProcessing 2020-05-05 · 已公開 依 Instagram 貼文的發布日期，標題編號 200505 為同一日。 ### 色散海葵（每日創作 200505） 很喜歡深海跟發光的生物， 嘗試用疊合模式跟噪聲繪製扭來扭去的海葵。 - 海葵 - 疊合模式 來源 [前往原始頁面 ↗︎](https://cheyuwu.com/zh/sketch/889053/) [OpenProcessing ↗︎](https://openprocessing.org/sketch/889053) [Instagram @bosscodingplease ↗︎](https://www.instagram.com/bosscodingplease/) ![瘋狂樂譜｜每日創作截圖](https://cheyuwu.com/static/img/sketches/885665-sm.webp) 2020-04-30 原型Che-Yu Wu 2020-04-30 · 已公開 依 Instagram 貼文的發布日期，標題編號 200430 為同一日。 ### 瘋狂樂譜（每日創作 200430） 越彈越不知道在演奏什麼的時候， 音符突然剝離樂譜自己跳舞。 在音符的尾端加了一點點色散的感覺， 可以用滑鼠移動範圍樂譜的瘋狂範圍。 - 樂譜 - 音樂 來源 [前往原始頁面 ↗︎](https://cheyuwu.com/zh/sketch/885665/) [OpenProcessing ↗︎](https://openprocessing.org/sketch/885665) [Instagram @bosscodingplease ↗︎](https://www.instagram.com/bosscodingplease/) ![隨機方塊運動｜每日創作截圖](https://cheyuwu.com/static/img/sketches/883193-sm.webp) 2020-04-27 原型Che-Yu Wu 2020-04-27 · 已公開 依 Instagram 貼文的發布日期，標題編號 200427 為同一日。 ### 隨機方塊運動（每日創作 200427） 這次改寫百合花的粒子系統， 嘗試讓粒子遇到隔線的時候有一定的機率會轉彎， 有些會繼續飛有些會陷入方格的軌跡 視覺效果蠻酷的！ - 粒子 - 網格 來源 [前往原始頁面 ↗︎](https://cheyuwu.com/zh/sketch/883193/) [OpenProcessing ↗︎](https://openprocessing.org/sketch/883193) [Instagram @bosscodingplease ↗︎](https://www.instagram.com/bosscodingplease/) 相關紀錄 [→ 百合花之夢（每日創作 200419）](https://cheyuwu.com/zh/strata/2020/#lab-sketch-877117) · 詩句寫明改寫自百合花的粒子系統 (來源關聯) ![p5-vue-mirror：可即時編輯與執行的 p5.js 編輯器元件｜作品畫面](https://cheyuwu.com/static/lab/2020/repo-p5-vue-mirror.webp) 2020-04-26 開源Che-Yu Wu / GitHub README image 2020-04-26 · 已公開 採用 GitHub 倉庫的建立日期，最後一次提交為 2020-04-30。 ### p5-vue-mirror：可即時編輯與執行的 p5.js 編輯器元件 公開在 GitHub 的 Vue.js 元件，倉庫說明寫的是 p5.js code mirror with live edit/ run using vue.js v-model using iframe，也就是把 p5.js 的程式碼編輯與即時執行包成一個用 v-model 綁定的元件，執行畫面放在 iframe 裡。倉庫頁面未列出授權條款。 - 開源 - 編輯器 來源 [前往原始頁面 ↗︎](https://github.com/frank890417/p5-vue-mirror) [GitHub ↗︎](https://github.com/frank890417/p5-vue-mirror) 相關紀錄 [→ Intuitive Music Expression：NYU IDM 碩士論文（2019）](https://cheyuwu.com/zh/strata/2019/#lab-thesis-intuitive-music) · 官網論文頁的互動草稿由這個元件承載 (策展主題) ![p5.js 快速上手：互動網頁教學｜文章配圖](https://cheyuwu.com/static/lab/2020/note-p5-quickstart.webp) 2020-04-24 文章Che-Yu Wu / Creative Coding TW page image 2020-04-24 · 已公開 ### p5.js 快速上手：互動網頁教學 文章介紹 p5 是由 Processing 延伸而成的 JavaScript 函式庫，把繪圖、數學與物理模擬等函式封裝好，讓創作者不用費心思處理瑣碎的工具。範例在 OpenProcessing 上完成一個畫布，把滑鼠當作筆刷，滑鼠經過的路徑會留下彩色的軌跡，點擊的狀況下軌跡則變成方形的圖案。 - p5.js - 入門 來源 [前往原始頁面 ↗︎](https://creativecoding.in/2020/04/24/p5-js-%e5%bf%ab%e9%80%9f%e4%b8%8a%e6%89%8b/) [CreativeCoding.in ↗︎](https://creativecoding.in/2020/04/24/p5-js-%e5%bf%ab%e9%80%9f%e4%b8%8a%e6%89%8b/) ![擁擠城市｜每日創作截圖](https://cheyuwu.com/static/img/sketches/880483-sm.webp) 2020-04-23 原型Che-Yu Wu 2020-04-23 · 已公開 依 Instagram 貼文的發布日期，標題編號 200423 為同一日。 ### 擁擠城市（每日創作 200423） 紐約充滿各種看不見天際線的大樓， 再擠下去可能要用氣球運送包裹 利用shearX跟shearY做類3D的效果 加上一些noise材質讓他看起來有插畫感 最後隨機加點禮物跟氣球送到窗口 - 城市 - 插畫感 來源 [前往原始頁面 ↗︎](https://cheyuwu.com/zh/sketch/880483/) [OpenProcessing ↗︎](https://openprocessing.org/sketch/880483) [Instagram @bosscodingplease ↗︎](https://www.instagram.com/bosscodingplease/) ![原子反應爐｜每日創作截圖](https://cheyuwu.com/static/img/sketches/877614-sm.webp) 2020-04-20 原型Che-Yu Wu 2020-04-20 · 已公開 依 Instagram 貼文的發布日期，標題編號 200420 為同一日。 ### 原子反應爐（每日創作 200420） 在無數的粒子碰撞中發生了融合， 在融合的渺小機率中誕生了生命。 - 粒子 - 生命 來源 [前往原始頁面 ↗︎](https://cheyuwu.com/zh/sketch/877614/) [OpenProcessing ↗︎](https://openprocessing.org/sketch/877614) [Instagram @bosscodingplease ↗︎](https://www.instagram.com/bosscodingplease/) ![百合花之夢｜每日創作截圖](https://cheyuwu.com/static/img/mirror/6cfd093338c3.jpg) 2020-04-19 原型Che-Yu Wu / OpenProcessing 2020-04-19 · 已公開 依 Instagram 貼文的發布日期，標題編號 200419 為同一日。 ### 百合花之夢（每日創作 200419） 讓粒子順著特定的力場綻放，留下他們的軌跡形成似夢的花瓣 - 粒子 - 力場 來源 [前往原始頁面 ↗︎](https://cheyuwu.com/zh/sketch/877117/) [OpenProcessing ↗︎](https://openprocessing.org/sketch/877117) [Instagram @bosscodingplease ↗︎](https://www.instagram.com/bosscodingplease/) 相關紀錄 [→ 隨機方塊運動（每日創作 200427）](https://cheyuwu.com/zh/strata/2020/#lab-sketch-883193) · 詩句寫明改寫自百合花的粒子系統 (來源關聯) ![讓我們來做個互動天氣地圖吧：直播筆記｜文章配圖](https://cheyuwu.com/static/lab/2020/note-weather-map.webp) 2020-03-28 文章Che-Yu Wu / Creative Coding TW article image 2020-03-28 · 已公開 ### 讓我們來做個互動天氣地圖吧：直播筆記 這次的直播要做一個互動地圖，當滑鼠滑過的時候顯示當地天氣資訊。筆記列出用到的工具與知識：HTML、CSS 與 JavaScript 的基礎觀念，svg 的基本操作，Vue.js 框架的操作，以及使用 axios 串接中央氣象局 open data API。 - 地圖 - 開放資料 來源 [前往原始頁面 ↗︎](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/) [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/) 相關紀錄 [→ 用 Socket.io 做一個即時聊天室吧：直播筆記](https://cheyuwu.com/zh/strata/2020/#lab-note-socket-chat) · 同一批直播筆記 (策展主題) ![用 Socket.io 做一個即時聊天室吧：直播筆記｜文章配圖](https://cheyuwu.com/static/lab/2020/note-socket-chat.webp) 2020-03-25 文章Che-Yu Wu / Creative Coding TW page image 2020-03-25 · 已公開 ### 用 Socket.io 做一個即時聊天室吧：直播筆記 直播筆記說明 socket.io 是一個可以讓應用程式建立即時通訊的 JavaScript 函式庫，透過在 Server 與 Client 之間建立持續的連線，可以即時的傳送資料給對方，並透過 on 方法像 JavaScript 一樣接收事件並觸發 callback function。實作部分做出一個會廣播訊息、載入歷史對話並顯示誰正在輸入的聊天室。 - 即時通訊 - 直播筆記 來源 [前往原始頁面 ↗︎](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/) [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://cheyuwu.com/zh/strata/2020/#lab-note-weather-map) · 同一批直播筆記 (策展主題) ![老闆的網頁實驗室 1：實作 CSS 拆字動畫｜文章配圖](https://cheyuwu.com/static/lab/2020/note-css-letter-split.webp) 2020-03-06 文章Che-Yu Wu / Creative Coding TW article image 2020-03-06 · 已公開 ### 老闆的網頁實驗室 1：實作 CSS 拆字動畫 拆解 rogue.studio 網站標題一個一個字跑入的效果，再用 CSS 與 JavaScript 重現。文章寫到，如果一個一個自己手動去指定字最後擺放的位置會很麻煩，所以應該盡可能利用 html 本身 layout 的功能，把字母拆成內外兩層的 span，外層負責裁掉超出的部分，內層用 transform 移動。 - 拆字動畫 - 案例拆解 來源 [前往原始頁面 ↗︎](https://creativecoding.in/2020/03/06/%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/) [CreativeCoding.in ↗︎](https://creativecoding.in/2020/03/06/%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/) 相關紀錄 [→ 老闆的網頁實驗室 2：實作 Canvas 遮罩動畫](https://cheyuwu.com/zh/strata/2020/#lab-note-canvas-mask) · 同一系列的第一篇 (來源關聯) ![老闆的網頁實驗室 2：實作 Canvas 遮罩動畫｜文章配圖](https://cheyuwu.com/static/lab/2020/note-canvas-mask.webp) 2020-03-06 文章Che-Yu Wu / Creative Coding TW article image 2020-03-06 · 已公開 ### 老闆的網頁實驗室 2：實作 Canvas 遮罩動畫 拆解法國設計師 Louis Ansa 作品集網頁的遮罩效果。文章把動畫拆成三個部分：球型遮罩讓圓形裡面的文字呈現不同的背景色與內文顏色，移動的球體讓兩個球心沿著畫面中心做圓周運動，變動的球體形狀讓邊界呈現不規則波動，並說明為何選擇用兩層 canvas 來做。 - 遮罩 - Canvas 來源 [前往原始頁面 ↗︎](https://creativecoding.in/2020/03/06/%e8%80%81%e9%97%86%e7%9a%84%e7%b6%b2%e9%a0%81%e5%af%a6%e9%a9%97%e5%ae%a42%ef%bc%8d%e5%af%a6%e4%bd%9c-canvas-%e9%81%ae%e7%bd%a9%e5%8b%95%e7%95%ab/) [CreativeCoding.in ↗︎](https://creativecoding.in/2020/03/06/%e8%80%81%e9%97%86%e7%9a%84%e7%b6%b2%e9%a0%81%e5%af%a6%e9%a9%97%e5%ae%a42%ef%bc%8d%e5%af%a6%e4%bd%9c-canvas-%e9%81%ae%e7%bd%a9%e5%8b%95%e7%95%ab/) 相關紀錄 [→ 老闆的網頁實驗室 1：實作 CSS 拆字動畫](https://cheyuwu.com/zh/strata/2020/#lab-note-css-letter-split) · 同一系列的第一篇 (來源關聯) ![Floating in the Sky VR 體驗｜作品頁主視覺](https://cheyuwu.com/static/img/mirror/4430345241a6.webp) 2020 獎項Che-Yu Wu 2020 · 已公開活動紀錄 作品頁與履歷對年份的記載不一致，這裡採履歷的 2020 年，確切日期與是否落在本年窗口內待核。 ### Floating in the Sky 入選 NYC Media Lab 與 FutureTech Showcase VR 作品《Floating in the Sky》的獲選紀錄。官網作品頁的 honor 欄寫著 Deloitte private showcase, 2020 與 NYC Media Lab Exhibition, 2019，履歷則把兩項都記在 2020 年，分別是 NYC Media Lab Exhibition Accepted Work 與 Palpable Media 與 Deloitte 的 FutureTech Showcase Selected Work。作品本身是第一人稱互動敘事，主角撐起一把傘飛上天空。 - VR - 獲選 來源 [前往原始頁面 ↗︎](https://cheyuwu.com/project/-LeeLqyqPGuJRybr9psJ/) [cheyuwu.com ↗︎](https://cheyuwu.com/project/-LeeLqyqPGuJRybr9psJ/) 相關紀錄 [→ Intuitive Music Expression：NYU IDM 碩士論文（2019）](https://cheyuwu.com/zh/strata/2019/#lab-thesis-intuitive-music) · 同一段 NYU IDM 時期的作品 (策展主題)