CHE-YU WU / STRATA 地層
地層 Strata｜2001–2026，每一年留下來的東西
一年的創作現場
沿著聲音、記憶與教學，走進這一年持續發生的實驗。
2020-01-01 — 2020-12-3141 筆公開紀錄
紅線：來源關聯 麻線：共同主題 移到紙上看關係名稱
完整紀錄 ↓這裡依月份往下讀，每張卡下面的小標是它的關係，點一下會跳到另一筆紀錄
2020 · 全年
2020 · 03
2020 · 04
2020 · 05
2020 · 06
2020 · 07
2020 · 08
2020 · 09
2020 · 10
2020 · 11
2020 · 12
完整紀錄
逐一閱讀
最新的在最上面，往下越舊。每筆紀錄保留日期依據、公開來源與關係說明。
神經系統（每日創作 201227）
一點電訊號，再加上一點化學分子， 焦慮在幽微的角落誕生茁壯， 於是那個夜晚充滿了無法靜音的囈語， 再也無法入眠。
- 神經
- 焦慮
夢靨（每日創作 201128）
先是滾石生苔逐漸緩下， 日常景象鏽蝕，鋼筋裸露， 不小心避過就留下一個個穿刺的傷， 從最美好的時光間隙中， 蔓延直到把眼前覆蓋成漆黑的牆。
- 夢境
- 侵蝕
- 來源
- 前往原始頁面 ↗︎
- OpenProcessing ↗︎
- 相關紀錄
- → Foundation Classic Series（2021） · 被收進 Foundation 經典系列 (來源關聯)
野生之夢（每日創作 201115）
每一個現實瞬間都會有幾個野生的夢， 肆意在時間的原野擴張後力竭，扭曲成無法實現的樣子， 不過 take it easy，總有些遺憾生命才不會過度甜膩。 嘗試把遞迴加上shader，然後配上聽起來ㄎㄧㄤㄎㄧㄤ的音樂
- 夢
- 遞迴
新增維度（每日創作 201103）
新增維度，一層一層的演算構築虛幻的世界， 不斷的逼近現實，卻仍然虛假， 測試動態產生3D材質後作成環狀的效果。
- 維度
- 材質
平行宇宙（每日創作 201017）
久久來玩一下shader 一個又一個不同世界的概率， 藏在維度扭曲的平行宇宙之間， 每一個當下造就無數分裂的因果。
- 著色器
- 宇宙
記憶逝去（每日創作 200903）
每次記憶的提取， 都會對內容與真實產生不可逆的變化， 粉碎模糊掉的情緒無法再生， 隨著時間過去，究竟是真實嗎？ 還是僅是自己不斷重塑的幻象
- 記憶
- 時間
超弦理論（每日創作 200804）
世界的構成是震動的弦嗎？ 躲在觀測不到過小的維度蜷曲中， 宏觀中的事實並不存在，你的意念決定看見的面貌。
- 弦論
- 維度
焦慮（每日創作 200801）
思緒跳躍恍惚，無法停止的腦內話語 打結了，不同的情緒撞擊碎裂融合，然後消失 shader系列暫時休息，想做一些不同方向的嘗試
- 情緒
- 粒子
- 來源
- 前往原始頁面 ↗︎
- OpenProcessing ↗︎
- Instagram @bosscodingplease ↗︎
- 相關紀錄
- → 變異（每日創作 200705） · 詩句寫明著色器系列暫時休息 (來源關聯)
變異（每日創作 200705）
受到輻射的DNA逐漸解離產生變異， 測試shader用sin+cos生成遮罩來產生DNA， 對形狀繪製的掌握度稍微高一些了，能比較熟練的繪製shader中的線條跟形狀。
- DNA
- 遮罩
- 來源
- 前往原始頁面 ↗︎
- OpenProcessing ↗︎
- Instagram @bosscodingplease ↗︎
- 相關紀錄
- → 焦慮（每日創作 200801） · 詩句寫明著色器系列暫時休息 (來源關聯)
點點農田（每日創作 200630）
從高空俯瞰五顏六色的農田，不規則的切割著， 練習用GLSL做Voronoi Diagram，運算真的好快， 取色的部分參考那個點的位置，也測試利用網格的原理， 生成很多不同大小的圓形疊加在一起。
- Voronoi
- GLSL
火燒竹筍（每日創作 200629）
竹筍們著火了，在著急的抖來抖去， 今天想到，如果把p5.js畫布結果輸入到shader做使用， 就可以做出類似畫布或扭曲的濾鏡， 嘗試了一下發現效果很酷，之後就可以用p5畫完形狀再放進shader後處理了。
- 著色器
- 濾鏡
重力波（每日創作 200627）
在時空中的漣漪擴散成重力波，扭曲了相對的距離卻無從感受。 測試使用距離＋sin來位移像素採樣的點，結合練習grid畫圓形跟噪聲材質，做出網外扭曲擴散的繽紛時空。
- 重力波
- 取樣
程式語言與互動設計的火花：不停 Bu-Tin EP26
自由接案生活 Podcast「不停 Bu-Tin」第 26 集，主持人呂罰，來賓身分是新媒體藝術家與墨雨設計。節目談小學用 Flash 做動畫的起點、電機系時期的自學、第一個網頁案，以及勉強做超過自己能力範圍一點點的事能幫助自己進步這句話。也談每天用程式語言寫互動設計的習慣，以及多元化發展比純接案好，因為接案的作品終究不完全屬於自己。
- 接案
- 每日創作
- 來源
- 前往原始頁面 ↗︎
- 不停 Bu-Tin ↗︎
- YouTube ↗︎
- 相關紀錄
- → 用一點固執和無限新奇，開啟這場程式大冒險：Hahow Blog 專訪 · 同一個月的兩篇訪談 (策展主題)
魔法軌跡（每日創作 200623）
魔法粒子會留下發亮的軌跡， 一樣是shader系列，其實跟上個顯微粒子的code大概只差一點點， 測試把粒子加上一些物理效果，配合p5.js的array做互動
- 著色器
- 軌跡
- 來源
- 前往原始頁面 ↗︎
- OpenProcessing ↗︎
- Instagram @bosscodingplease ↗︎
- 相關紀錄
- → 顯微粒子（每日創作 200622） · 詩句寫明與顯微粒子的程式只差一點點 (來源關聯)
顯微粒子（每日創作 200622）
測試在p5.js裡面用shader，產生陣列的粒子後傳到glsl渲染， shader還是好難控制啊啊，很容易一調整就全部跑掉， 感覺很像某種在顯微鏡下的視野
- 著色器
- 粒子
- 來源
- 前往原始頁面 ↗︎
- OpenProcessing ↗︎
- Instagram @bosscodingplease ↗︎
- 相關紀錄
- → 魔法軌跡（每日創作 200623） · 詩句寫明與顯微粒子的程式只差一點點 (來源關聯)
蝸牛賽跑（每日創作 200616）
每一隻蝸牛都有自己獨一無二的紋路跟步調， 在自己的路途上奮力的往前爬（雖然有時候還是會偷偷跟別人比較一下） 今天來換個風格做做互動的東西。
- 互動
- 蝸牛
有機電路（每日創作 200614）
這次是測試方形的遞迴，調整線條呈現後會有種亂中有序的有機電路感， 遞迴系列差不多來到了尾聲，想要再去探索看看其他手法
- 遞迴
- 電路
- 來源
- 前往原始頁面 ↗︎
- OpenProcessing ↗︎
- Instagram @bosscodingplease ↗︎
- 相關紀錄
- → 蓋亞之樹（每日創作 200608） · 同一輪遞迴系列 (策展主題)
CreativeCodingDemo：課程示範用的公開倉庫
公開在 GitHub 的小倉庫，內容只有 index.html 與 mySketch.js 兩個檔案，共兩次提交，沒有說明文件也沒有列出授權條款。建立日期落在 Hahow 第三門課程募資的同一個月。
- 開源
- 教學
- 來源
- 前往原始頁面 ↗︎
- GitHub ↗︎
- 相關紀錄
- → 互動藝術程式創作入門：Hahow 第三門課募資 · 同一個月的課程線 (策展主題)
蓋亞之樹（每日創作 200608）
從充滿無限可能性的種子，長出蓋亞之樹， 每一個枝葉都是一個平行世界，通往獨一無二的未來， 嘗試用三角形遞迴繪製自然感的植物。
- 遞迴
- 植物
- 來源
- 前往原始頁面 ↗︎
- OpenProcessing ↗︎
- Instagram @bosscodingplease ↗︎
- 相關紀錄
- → 有機電路（每日創作 200614） · 同一輪遞迴系列 (策展主題)
中文馬賽克（每日創作 200601）
因為今天在忙課程中的範例，把教學的中文視訊馬賽克整理成今天的創作！ 視訊取像素一直會遇到怪問題當掉，後來改成先繪製一個暫存的圖片，就可以正常取到顏色。 覺得可以調整sample大小效果很酷
- 視訊
- 馬賽克
- 來源
- 前往原始頁面 ↗︎
- OpenProcessing ↗︎
- Instagram @bosscodingplease ↗︎
- 相關紀錄
- → 互動藝術程式創作入門：Hahow 第三門課募資 · 詩句寫明來自課程中的範例 (來源關聯)
用一點固執和無限新奇，開啟這場程式大冒險：Hahow Blog 專訪
Hahow 部落格在第三門課上架前夕的專訪，採訪撰稿為 Ani Syu。文章走過他從網頁入門到特效再到 Creative Coding 的三個階段，也寫到他在 NYU 整合數位媒體系擔任 Creative Coding 助教的紐約時光。
- 專訪
- 教學
- 來源
- 前往原始頁面 ↗︎
- Hahow Blog ↗︎
- 相關紀錄
- → 互動藝術程式創作入門：Hahow 第三門課募資 · 專訪寫的是這門課上架前夕 (來源關聯)
- → 程式語言與互動設計的火花：不停 Bu-Tin EP26 · 同一個月的兩篇訪談 (策展主題)
互動藝術程式創作入門：Hahow 第三門課募資
第三門 Hahow 課程《互動藝術程式創作入門 Creative Coding》在 2020 年進入募資。課程以 p5.js 為主軸，從基礎繪製與色彩一路走到互動系統與模擬，課程筆記託管在 HackMD。這一年的每日創作有好幾支直接來自備課與錄課的範例。
- 課程
- p5.js
- 來源
- 前往原始頁面 ↗︎
- Hahow 課程頁 ↗︎
- 課程作業說明（HackMD） ↗︎
- 相關紀錄
- → 水色星球（每日創作 200509） · 詩句寫明來自課程的函數範例 (來源關聯)
- → 用一點固執和無限新奇，開啟這場程式大冒險：Hahow Blog 專訪 · 專訪寫的是這門課上架前夕 (來源關聯)
- → 中文馬賽克（每日創作 200601） · 詩句寫明來自課程中的範例 (來源關聯)
- → CreativeCodingDemo：課程示範用的公開倉庫 · 同一個月的課程線 (策展主題)
想睡的波奇（每日創作 200526）
測試使用Matter.js的soft body， 做了扭扭軟軟的奇怪生物，感覺永遠睡不飽的波奇， 把他拖來拖去他會很不情願的躺回去
- 軟體物理
- 角色
- 來源
- 前往原始頁面 ↗︎
- OpenProcessing ↗︎
- Instagram @bosscodingplease ↗︎
- 相關紀錄
- → 生生海膽（每日創作 200523） · 同一批物理引擎練習 (策展主題)
生生海膽（每日創作 200523）
今天繼續玩物理引擎，發現有很多可以發展跟創作的方向 厭世海膽很生生，看見彼此就會吵架，被拖來拖去會更生氣。
- 物理引擎
- 海膽
- 來源
- 前往原始頁面 ↗︎
- OpenProcessing ↗︎
- Instagram @bosscodingplease ↗︎
- 相關紀錄
- → 撞擊水族箱（每日創作 200522） · 詩句寫明繼續前一天的物理引擎 (來源關聯)
- → 想睡的波奇（每日創作 200526） · 同一批物理引擎練習 (策展主題)
撞擊水族箱（每日創作 200522）
越來越多的居民各自劃清了領地 驚恐的魚跟海星看著彼此傻眼撞擊 嘗試使用matter.js加上物理模擬
- 物理模擬
- 水族箱
- 來源
- 前往原始頁面 ↗︎
- OpenProcessing ↗︎
- Instagram @bosscodingplease ↗︎
- 相關紀錄
- → 生生海膽（每日創作 200523） · 詩句寫明繼續前一天的物理引擎 (來源關聯)
電波電路（每日創作 200510）
想起以前學電機的訊號，結果很意外的之後做音樂相關的創作居然用得到。 假設理論解釋一切，建立模型去模擬這個世界，傳送彩色逼哩逼哩的訊號。
- 訊號
- 電路
水色星球（每日創作 200509）
凝聚了所有發光的水，無數個世界撞擊融合， 水色星球不斷消耗自我，直到最後一絲光芒散盡 今天在寫函數範例的時候想到可以做星球，稍微調整了一下
- 星球
- 函數
- 來源
- 前往原始頁面 ↗︎
- OpenProcessing ↗︎
- Instagram @bosscodingplease ↗︎
- 相關紀錄
- → 互動藝術程式創作入門：Hahow 第三門課募資 · 詩句寫明來自課程的函數範例 (來源關聯)
色散海葵（每日創作 200505）
很喜歡深海跟發光的生物， 嘗試用疊合模式跟噪聲繪製扭來扭去的海葵。
- 海葵
- 疊合模式
瘋狂樂譜（每日創作 200430）
越彈越不知道在演奏什麼的時候， 音符突然剝離樂譜自己跳舞。 在音符的尾端加了一點點色散的感覺， 可以用滑鼠移動範圍樂譜的瘋狂範圍。
- 樂譜
- 音樂
隨機方塊運動（每日創作 200427）
這次改寫百合花的粒子系統， 嘗試讓粒子遇到隔線的時候有一定的機率會轉彎， 有些會繼續飛有些會陷入方格的軌跡 視覺效果蠻酷的！
- 粒子
- 網格
- 來源
- 前往原始頁面 ↗︎
- OpenProcessing ↗︎
- Instagram @bosscodingplease ↗︎
- 相關紀錄
- → 百合花之夢（每日創作 200419） · 詩句寫明改寫自百合花的粒子系統 (來源關聯)
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 裡。倉庫頁面未列出授權條款。
- 開源
- 編輯器
- 來源
- 前往原始頁面 ↗︎
- GitHub ↗︎
- 相關紀錄
- → Intuitive Music Expression：NYU IDM 碩士論文（2019） · 官網論文頁的互動草稿由這個元件承載 (策展主題)
p5.js 快速上手：互動網頁教學
文章介紹 p5 是由 Processing 延伸而成的 JavaScript 函式庫，把繪圖、數學與物理模擬等函式封裝好，讓創作者不用費心思處理瑣碎的工具。範例在 OpenProcessing 上完成一個畫布，把滑鼠當作筆刷，滑鼠經過的路徑會留下彩色的軌跡，點擊的狀況下軌跡則變成方形的圖案。
- p5.js
- 入門
擁擠城市（每日創作 200423）
紐約充滿各種看不見天際線的大樓， 再擠下去可能要用氣球運送包裹 利用shearX跟shearY做類3D的效果 加上一些noise材質讓他看起來有插畫感 最後隨機加點禮物跟氣球送到窗口
- 城市
- 插畫感
原子反應爐（每日創作 200420）
在無數的粒子碰撞中發生了融合， 在融合的渺小機率中誕生了生命。
- 粒子
- 生命
百合花之夢（每日創作 200419）
讓粒子順著特定的力場綻放，留下他們的軌跡形成似夢的花瓣
- 粒子
- 力場
- 來源
- 前往原始頁面 ↗︎
- OpenProcessing ↗︎
- Instagram @bosscodingplease ↗︎
- 相關紀錄
- → 隨機方塊運動（每日創作 200427） · 詩句寫明改寫自百合花的粒子系統 (來源關聯)
讓我們來做個互動天氣地圖吧：直播筆記
這次的直播要做一個互動地圖，當滑鼠滑過的時候顯示當地天氣資訊。筆記列出用到的工具與知識：HTML、CSS 與 JavaScript 的基礎觀念，svg 的基本操作，Vue.js 框架的操作，以及使用 axios 串接中央氣象局 open data API。
- 地圖
- 開放資料
- 來源
- 前往原始頁面 ↗︎
- CreativeCoding.in ↗︎
- 相關紀錄
- → 用 Socket.io 做一個即時聊天室吧：直播筆記 · 同一批直播筆記 (策展主題)
用 Socket.io 做一個即時聊天室吧：直播筆記
直播筆記說明 socket.io 是一個可以讓應用程式建立即時通訊的 JavaScript 函式庫，透過在 Server 與 Client 之間建立持續的連線，可以即時的傳送資料給對方，並透過 on 方法像 JavaScript 一樣接收事件並觸發 callback function。實作部分做出一個會廣播訊息、載入歷史對話並顯示誰正在輸入的聊天室。
- 即時通訊
- 直播筆記
- 來源
- 前往原始頁面 ↗︎
- CreativeCoding.in ↗︎
- 相關紀錄
- → 讓我們來做個互動天氣地圖吧：直播筆記 · 同一批直播筆記 (策展主題)
老闆的網頁實驗室 1：實作 CSS 拆字動畫
拆解 rogue.studio 網站標題一個一個字跑入的效果，再用 CSS 與 JavaScript 重現。文章寫到，如果一個一個自己手動去指定字最後擺放的位置會很麻煩，所以應該盡可能利用 html 本身 layout 的功能，把字母拆成內外兩層的 span，外層負責裁掉超出的部分，內層用 transform 移動。
- 拆字動畫
- 案例拆解
- 來源
- 前往原始頁面 ↗︎
- CreativeCoding.in ↗︎
- 相關紀錄
- → 老闆的網頁實驗室 2：實作 Canvas 遮罩動畫 · 同一系列的第一篇 (來源關聯)
老闆的網頁實驗室 2：實作 Canvas 遮罩動畫
拆解法國設計師 Louis Ansa 作品集網頁的遮罩效果。文章把動畫拆成三個部分：球型遮罩讓圓形裡面的文字呈現不同的背景色與內文顏色，移動的球體讓兩個球心沿著畫面中心做圓周運動，變動的球體形狀讓邊界呈現不規則波動，並說明為何選擇用兩層 canvas 來做。
- 遮罩
- Canvas
- 來源
- 前往原始頁面 ↗︎
- CreativeCoding.in ↗︎
- 相關紀錄
- → 老闆的網頁實驗室 1：實作 CSS 拆字動畫 · 同一系列的第一篇 (來源關聯)
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
- 獲選
- 來源
- 前往原始頁面 ↗︎
- cheyuwu.com ↗︎
- 相關紀錄
- → Intuitive Music Expression：NYU IDM 碩士論文（2019） · 同一段 NYU IDM 時期的作品 (策展主題)