CHE-YU WU / LAB # 一年的創作現場 沿著聲音、記憶與教學，走進這一年持續發生的實驗。 2019-09-09 — 2020-09-09 37 筆公開紀錄 紅線：來源關聯 麻線：共同主題 移到紙上看關係名稱 [完整紀錄 ↓](https://cheyuwu.com/zh/lab/2020/#lab-records) ![](https://kyoko.openprocessing.org/thumbnails/visualThumbnail2290248@2x.jpg) ![](https://cheyuwu.com/static/img/sketches/923989-sm.webp) ![](https://kyoko.openprocessing.org/thumbnails/visualThumbnail1060246@2x.jpg?hash=2021-01-12%2022%3A05%3A56) ![](https://cheyuwu.com/static/img/sketches/1635740-sm.webp) ![](https://cheyuwu.com/static/img/sketches/1615617-sm.webp) ![](https://kyoko.openprocessing.org/thumbnails/visualThumbnail625042@2x.jpg?hash=2018-11-09%2019%3A51%3A34) ![](https://kyoko.openprocessing.org/thumbnails/visualThumbnail853615@2x.jpg?hash=2020-03-06%2018%3A15%3A01) ![](https://cheyuwu.com/static/img/sketches/925596-sm.webp) 創作族譜**818 件每日創作，怎麼一件長出一件**46 個家族畫成有縮圖的分支樹，從 2018 到 2026→ [https://cheyuwu.com/zh/lineage](https://cheyuwu.com/zh/lineage) ****案件紀錄**2019-09-09 / 2020-09-0937 筆 這裡依月份往下讀，每張卡下面的小標是它的關係，點一下會跳到另一筆紀錄 ### 2019 · 全年 ** - - - *音樂* ### 2019 · 12 ** ![](https://firebasestorage.googleapis.com/v0/b/wucheyu-portfolio.appspot.com/o/images%2FEXPLODE%20-%20Motion%20Capture%20Piece%2Fcover.jpg?alt=media&token=00361d85-e051-41b5-92b4-265239265666) - *動作捕捉* ### 2020 · 全年 ** ![](https://firebasestorage.googleapis.com/v0/b/wucheyu-portfolio.appspot.com/o/images%2FFloating%20in%20the%20sky%20-%20VR%20experience%2Fcover.jpg?alt=media&token=859951c9-44ed-42d6-90ca-5628ecfca3e7) - ### 2020 · 03 ** - *遮罩* ** - ** - *即時通訊* ** - ### 2020 · 04 ** ![](https://kyoko.openprocessing.org/thumbnails/visualThumbnail877117@2x.jpg?hash=2020-04-19%2020%3A57%3A29) - *粒子* ** ![](https://cheyuwu.com/static/img/sketches/877614-sm.webp) *粒子* ** ![](https://cheyuwu.com/static/img/sketches/880483-sm.webp) ** ** - *開源* ** ![](https://cheyuwu.com/static/img/sketches/883193-sm.webp) - ** ![](https://cheyuwu.com/static/img/sketches/885665-sm.webp) *樂譜* ### 2020 · 05 ** ![](https://kyoko.openprocessing.org/thumbnails/visualThumbnail889053@2x.jpg?hash=2020-05-05%2020%3A53%3A10) *海葵* ** ![](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/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) - *著色器* ** - ### 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://kyoko.openprocessing.org/thumbnails/visualThumbnail954948@2x.jpg?hash=2020-09-03%2023%3A13%3A55) 完整紀錄 ## 逐一閱讀 每筆紀錄保留日期依據、公開來源與關係說明。 2019官網頁面只標到年份，履歷把論文期間寫成 2018 到 2020，落在本年窗口內的確切日期待核。已公開 ### Intuitive Music Expression：NYU IDM 碩士論文 官網論文頁標示 NYU IDM Thesis 2019，作品是一個網頁工具，頁面寫的是 A web-based tool that allowed people to work together, edit and change melody in an intuitive way，目標則寫成 Find the way to express and made music in more intuitive and understandable, playful way。頁面同時提供期中與期末兩支影片連結，以及一個可以直接操作的互動草稿。 - 音樂 - 論文 來源與相關紀錄 - [前往原始頁面 ↗](https://cheyuwu.com/thesis/) - [cheyuwu.com](https://cheyuwu.com/thesis/) - [EXPLODE：動作捕捉表演](https://cheyuwu.com/zh/lab/2020/#lab-explode-motion-capture) · 同一段 NYU IDM 時期的作品 (策展主題) - [Floating in the Sky 入選 NYC Media Lab 與 FutureTech Showcase](https://cheyuwu.com/zh/lab/2020/#lab-floating-in-the-sky-showcase) · 同一段 NYU IDM 時期的作品 (策展主題) - [p5-vue-mirror：可即時編輯與執行的 p5.js 編輯器元件](https://cheyuwu.com/zh/lab/2020/#lab-repo-p5-vue-mirror) · 官網論文頁的互動草稿由這個元件承載 (策展主題) 2019-12-14採用官網作品頁標示的日期，是否為公開演出日期未能從來源頁確認。已公開活動紀錄 ### EXPLODE：動作捕捉表演 官網作品頁標示日期 2019/12/14，角色為 Unreal Developer、Scene Design 與 Performer。頁面說明這是一場白日夢世界的動作捕捉體驗，從一小瓶可樂把觀眾帶離現實，觀眾手上的可樂會參與幻境的成形，即時影響這個世界，頁面並寫著 The creation never ends。 - 動作捕捉 - 表演 ![EXPLODE 動作捕捉表演｜作品頁主視覺](https://firebasestorage.googleapis.com/v0/b/wucheyu-portfolio.appspot.com/o/images%2FEXPLODE%20-%20Motion%20Capture%20Piece%2Fcover.jpg?alt=media&token=00361d85-e051-41b5-92b4-265239265666) Che-Yu Wu 來源與相關紀錄 - [前往原始頁面 ↗](https://cheyuwu.com/project/-LwfDqH6G66XVuMrZX0F/) - [cheyuwu.com](https://cheyuwu.com/project/-LwfDqH6G66XVuMrZX0F/) - [Intuitive Music Expression：NYU IDM 碩士論文](https://cheyuwu.com/zh/lab/2020/#lab-thesis-intuitive-music) · 同一段 NYU IDM 時期的作品 (策展主題) 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 - 獲選 ![Floating in the Sky VR 體驗｜作品頁主視覺](https://firebasestorage.googleapis.com/v0/b/wucheyu-portfolio.appspot.com/o/images%2FFloating%20in%20the%20sky%20-%20VR%20experience%2Fcover.jpg?alt=media&token=859951c9-44ed-42d6-90ca-5628ecfca3e7) Che-Yu Wu 來源與相關紀錄 - [前往原始頁面 ↗](https://cheyuwu.com/project/-LeeLqyqPGuJRybr9psJ/) - [cheyuwu.com](https://cheyuwu.com/project/-LeeLqyqPGuJRybr9psJ/) - [Intuitive Music Expression：NYU IDM 碩士論文](https://cheyuwu.com/zh/lab/2020/#lab-thesis-intuitive-music) · 同一段 NYU IDM 時期的作品 (策展主題) 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/lab/2020/#lab-note-css-letter-split) · 同一系列的第一篇 (來源關聯) 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/lab/2020/#lab-note-canvas-mask) · 同一系列的第一篇 (來源關聯) 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/lab/2020/#lab-note-weather-map) · 同一批直播筆記 (策展主題) 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/lab/2020/#lab-note-socket-chat) · 同一批直播筆記 (策展主題) 2020-04-19依 Instagram 貼文的發布日期，標題編號 200419 為同一日。已公開 ### 百合花之夢（每日創作 200419） 讓粒子順著特定的力場綻放，留下他們的軌跡形成似夢的花瓣 - 粒子 - 力場 ![百合花之夢｜每日創作截圖](https://kyoko.openprocessing.org/thumbnails/visualThumbnail877117@2x.jpg?hash=2020-04-19%2020%3A57%3A29) Che-Yu Wu / OpenProcessing 來源與相關紀錄 - [前往原始頁面 ↗](https://cheyuwu.com/zh/sketch/877117/) - [OpenProcessing](https://openprocessing.org/sketch/877117) - [Instagram @bosscodingplease](https://www.instagram.com/bosscodingplease/) - [隨機方塊運動（每日創作 200427）](https://cheyuwu.com/zh/lab/2020/#lab-sketch-883193) · 詩句寫明改寫自百合花的粒子系統 (來源關聯) 2020-04-20依 Instagram 貼文的發布日期，標題編號 200420 為同一日。已公開 ### 原子反應爐（每日創作 200420） 在無數的粒子碰撞中發生了融合， 在融合的渺小機率中誕生了生命。 - 粒子 - 生命 ![原子反應爐｜每日創作截圖](https://cheyuwu.com/static/img/sketches/877614-sm.webp) Che-Yu Wu 來源與相關紀錄 - [前往原始頁面 ↗](https://cheyuwu.com/zh/sketch/877614/) - [OpenProcessing](https://openprocessing.org/sketch/877614) - [Instagram @bosscodingplease](https://www.instagram.com/bosscodingplease/) 2020-04-23依 Instagram 貼文的發布日期，標題編號 200423 為同一日。已公開 ### 擁擠城市（每日創作 200423） 紐約充滿各種看不見天際線的大樓， 再擠下去可能要用氣球運送包裹 利用shearX跟shearY做類3D的效果 加上一些noise材質讓他看起來有插畫感 最後隨機加點禮物跟氣球送到窗口 - 城市 - 插畫感 ![擁擠城市｜每日創作截圖](https://cheyuwu.com/static/img/sketches/880483-sm.webp) Che-Yu Wu 來源與相關紀錄 - [前往原始頁面 ↗](https://cheyuwu.com/zh/sketch/880483/) - [OpenProcessing](https://openprocessing.org/sketch/880483) - [Instagram @bosscodingplease](https://www.instagram.com/bosscodingplease/) 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/) 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 碩士論文](https://cheyuwu.com/zh/lab/2020/#lab-thesis-intuitive-music) · 官網論文頁的互動草稿由這個元件承載 (策展主題) 2020-04-27依 Instagram 貼文的發布日期，標題編號 200427 為同一日。已公開 ### 隨機方塊運動（每日創作 200427） 這次改寫百合花的粒子系統， 嘗試讓粒子遇到隔線的時候有一定的機率會轉彎， 有些會繼續飛有些會陷入方格的軌跡 視覺效果蠻酷的！ - 粒子 - 網格 ![隨機方塊運動｜每日創作截圖](https://cheyuwu.com/static/img/sketches/883193-sm.webp) Che-Yu Wu 來源與相關紀錄 - [前往原始頁面 ↗](https://cheyuwu.com/zh/sketch/883193/) - [OpenProcessing](https://openprocessing.org/sketch/883193) - [Instagram @bosscodingplease](https://www.instagram.com/bosscodingplease/) - [百合花之夢（每日創作 200419）](https://cheyuwu.com/zh/lab/2020/#lab-sketch-877117) · 詩句寫明改寫自百合花的粒子系統 (來源關聯) 2020-04-30依 Instagram 貼文的發布日期，標題編號 200430 為同一日。已公開 ### 瘋狂樂譜（每日創作 200430） 越彈越不知道在演奏什麼的時候， 音符突然剝離樂譜自己跳舞。 在音符的尾端加了一點點色散的感覺， 可以用滑鼠移動範圍樂譜的瘋狂範圍。 - 樂譜 - 音樂 ![瘋狂樂譜｜每日創作截圖](https://cheyuwu.com/static/img/sketches/885665-sm.webp) Che-Yu Wu 來源與相關紀錄 - [前往原始頁面 ↗](https://cheyuwu.com/zh/sketch/885665/) - [OpenProcessing](https://openprocessing.org/sketch/885665) - [Instagram @bosscodingplease](https://www.instagram.com/bosscodingplease/) 2020-05-05依 Instagram 貼文的發布日期，標題編號 200505 為同一日。已公開 ### 色散海葵（每日創作 200505） 很喜歡深海跟發光的生物， 嘗試用疊合模式跟噪聲繪製扭來扭去的海葵。 - 海葵 - 疊合模式 ![色散海葵｜每日創作截圖](https://kyoko.openprocessing.org/thumbnails/visualThumbnail889053@2x.jpg?hash=2020-05-05%2020%3A53%3A10) Che-Yu Wu / OpenProcessing 來源與相關紀錄 - [前往原始頁面 ↗](https://cheyuwu.com/zh/sketch/889053/) - [OpenProcessing](https://openprocessing.org/sketch/889053) - [Instagram @bosscodingplease](https://www.instagram.com/bosscodingplease/) 2020-05-09依 Instagram 貼文的發布日期，標題編號 200509 為同一日。已公開 ### 水色星球（每日創作 200509） 凝聚了所有發光的水，無數個世界撞擊融合， 水色星球不斷消耗自我，直到最後一絲光芒散盡 今天在寫函數範例的時候想到可以做星球，稍微調整了一下 - 星球 - 函數 ![水色星球｜每日創作截圖](https://cheyuwu.com/static/img/sketches/892021-sm.webp) Che-Yu Wu 來源與相關紀錄 - [前往原始頁面 ↗](https://cheyuwu.com/zh/sketch/892021/) - [OpenProcessing](https://openprocessing.org/sketch/892021) - [Instagram @bosscodingplease](https://www.instagram.com/bosscodingplease/) - [互動藝術程式創作入門：Hahow 第三門課募資](https://cheyuwu.com/zh/lab/2020/#lab-course-creative-coding) · 詩句寫明來自課程的函數範例 (來源關聯) 2020-05-11依 Instagram 貼文的發布日期。標題編號 200510 是創作日 2020-05-10，貼文晚 1 天發出。已公開 ### 電波電路（每日創作 200510） 想起以前學電機的訊號，結果很意外的之後做音樂相關的創作居然用得到。 假設理論解釋一切，建立模型去模擬這個世界，傳送彩色逼哩逼哩的訊號。 - 訊號 - 電路 ![電波電路｜每日創作截圖](https://cheyuwu.com/static/img/sketches/892614-sm.webp) Che-Yu Wu 來源與相關紀錄 - [前往原始頁面 ↗](https://cheyuwu.com/zh/sketch/892614/) - [OpenProcessing](https://openprocessing.org/sketch/892614) - [Instagram @bosscodingplease](https://www.instagram.com/bosscodingplease/) 2020-05-23依 Instagram 貼文的發布日期。標題編號 200522 是創作日 2020-05-22，貼文晚 1 天發出。已公開 ### 撞擊水族箱（每日創作 200522） 越來越多的居民各自劃清了領地 驚恐的魚跟海星看著彼此傻眼撞擊 嘗試使用matter.js加上物理模擬 - 物理模擬 - 水族箱 ![撞擊水族箱｜每日創作截圖](https://cheyuwu.com/static/img/sketches/902876-sm.webp) Che-Yu Wu 來源與相關紀錄 - [前往原始頁面 ↗](https://cheyuwu.com/zh/sketch/902876/) - [OpenProcessing](https://openprocessing.org/sketch/902876) - [Instagram @bosscodingplease](https://www.instagram.com/bosscodingplease/) - [生生海膽（每日創作 200523）](https://cheyuwu.com/zh/lab/2020/#lab-sketch-903498) · 詩句寫明繼續前一天的物理引擎 (來源關聯) 2020-05-24依 Instagram 貼文的發布日期。標題編號 200523 是創作日 2020-05-23，貼文晚 1 天發出。已公開 ### 生生海膽（每日創作 200523） 今天繼續玩物理引擎，發現有很多可以發展跟創作的方向 厭世海膽很生生，看見彼此就會吵架，被拖來拖去會更生氣。 - 物理引擎 - 海膽 ![生生海膽｜每日創作截圖](https://cheyuwu.com/static/img/sketches/903498-sm.webp) Che-Yu Wu 來源與相關紀錄 - [前往原始頁面 ↗](https://cheyuwu.com/zh/sketch/903498/) - [OpenProcessing](https://openprocessing.org/sketch/903498) - [Instagram @bosscodingplease](https://www.instagram.com/bosscodingplease/) - [撞擊水族箱（每日創作 200522）](https://cheyuwu.com/zh/lab/2020/#lab-sketch-902876) · 詩句寫明繼續前一天的物理引擎 (來源關聯) - [想睡的波奇（每日創作 200526）](https://cheyuwu.com/zh/lab/2020/#lab-sketch-905319) · 同一批物理引擎練習 (策展主題) 2020-05-27依 Instagram 貼文的發布日期。標題編號 200526 是創作日 2020-05-26，貼文晚 1 天發出。已公開 ### 想睡的波奇（每日創作 200526） 測試使用Matter.js的soft body， 做了扭扭軟軟的奇怪生物，感覺永遠睡不飽的波奇， 把他拖來拖去他會很不情願的躺回去 - 軟體物理 - 角色 ![想睡的波奇｜每日創作截圖](https://cheyuwu.com/static/img/sketches/905319-sm.webp) Che-Yu Wu 來源與相關紀錄 - [前往原始頁面 ↗](https://cheyuwu.com/zh/sketch/905319/) - [OpenProcessing](https://openprocessing.org/sketch/905319) - [Instagram @bosscodingplease](https://www.instagram.com/bosscodingplease/) - [生生海膽（每日創作 200523）](https://cheyuwu.com/zh/lab/2020/#lab-sketch-903498) · 同一批物理引擎練習 (策展主題) 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/lab/2020/#lab-sketch-892021) · 詩句寫明來自課程的函數範例 (來源關聯) - [用一點固執和無限新奇，開啟這場程式大冒險：Hahow Blog 專訪](https://cheyuwu.com/zh/lab/2020/#lab-press-hahow-creative-coding) · 專訪寫的是這門課上架前夕 (來源關聯) - [中文馬賽克（每日創作 200601）](https://cheyuwu.com/zh/lab/2020/#lab-sketch-909343) · 詩句寫明來自課程中的範例 (來源關聯) - [CreativeCodingDemo：課程示範用的公開倉庫](https://cheyuwu.com/zh/lab/2020/#lab-repo-creative-coding-demo) · 同一個月的課程線 (策展主題) 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/lab/2020/#lab-course-creative-coding) · 專訪寫的是這門課上架前夕 (來源關聯) - [程式語言與互動設計的火花：不停 Bu-Tin EP26](https://cheyuwu.com/zh/lab/2020/#lab-podcast-butin-ep26) · 同一個月的兩篇訪談 (策展主題) 2020-06-02依 Instagram 貼文的發布日期。標題編號 200601 是創作日 2020-06-01，貼文晚 1 天發出。已公開 ### 中文馬賽克（每日創作 200601） 因為今天在忙課程中的範例，把教學的中文視訊馬賽克整理成今天的創作！ 視訊取像素一直會遇到怪問題當掉，後來改成先繪製一個暫存的圖片，就可以正常取到顏色。 覺得可以調整sample大小效果很酷 - 視訊 - 馬賽克 ![中文馬賽克｜每日創作截圖](https://cheyuwu.com/static/img/sketches/909343-sm.webp) Che-Yu Wu 來源與相關紀錄 - [前往原始頁面 ↗](https://cheyuwu.com/zh/sketch/909343/) - [OpenProcessing](https://openprocessing.org/sketch/909343) - [Instagram @bosscodingplease](https://www.instagram.com/bosscodingplease/) - [互動藝術程式創作入門：Hahow 第三門課募資](https://cheyuwu.com/zh/lab/2020/#lab-course-creative-coding) · 詩句寫明來自課程中的範例 (來源關聯) 2020-06-10依 Instagram 貼文的發布日期。標題編號 200608 是創作日 2020-06-08，貼文晚 2 天發出。已公開 ### 蓋亞之樹（每日創作 200608） 從充滿無限可能性的種子，長出蓋亞之樹， 每一個枝葉都是一個平行世界，通往獨一無二的未來， 嘗試用三角形遞迴繪製自然感的植物。 - 遞迴 - 植物 ![蓋亞之樹｜每日創作截圖](https://cheyuwu.com/static/img/sketches/914673-sm.webp) Che-Yu Wu 來源與相關紀錄 - [前往原始頁面 ↗](https://cheyuwu.com/zh/sketch/914673/) - [OpenProcessing](https://openprocessing.org/sketch/914673) - [Instagram @bosscodingplease](https://www.instagram.com/bosscodingplease/) - [有機電路（每日創作 200614）](https://cheyuwu.com/zh/lab/2020/#lab-sketch-918427) · 同一輪遞迴系列 (策展主題) 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/lab/2020/#lab-course-creative-coding) · 同一個月的課程線 (策展主題) 2020-06-17依 Instagram 貼文的發布日期。標題編號 200614 是創作日 2020-06-14，貼文晚 3 天發出。已公開 ### 有機電路（每日創作 200614） 這次是測試方形的遞迴，調整線條呈現後會有種亂中有序的有機電路感， 遞迴系列差不多來到了尾聲，想要再去探索看看其他手法 - 遞迴 - 電路 ![有機電路｜每日創作截圖](https://cheyuwu.com/static/img/sketches/918427-sm.webp) Che-Yu Wu 來源與相關紀錄 - [前往原始頁面 ↗](https://cheyuwu.com/zh/sketch/918427/) - [OpenProcessing](https://openprocessing.org/sketch/918427) - [Instagram @bosscodingplease](https://www.instagram.com/bosscodingplease/) - [蓋亞之樹（每日創作 200608）](https://cheyuwu.com/zh/lab/2020/#lab-sketch-914673) · 同一輪遞迴系列 (策展主題) 2020-06-20依 Instagram 貼文的發布日期。標題編號 200616 是創作日 2020-06-16，貼文晚 4 天發出。已公開 ### 蝸牛賽跑（每日創作 200616） 每一隻蝸牛都有自己獨一無二的紋路跟步調， 在自己的路途上奮力的往前爬（雖然有時候還是會偷偷跟別人比較一下） 今天來換個風格做做互動的東西。 - 互動 - 蝸牛 ![蝸牛賽跑｜每日創作截圖](https://cheyuwu.com/static/img/sketches/919913-sm.webp) Che-Yu Wu 來源與相關紀錄 - [前往原始頁面 ↗](https://cheyuwu.com/zh/sketch/919913/) - [OpenProcessing](https://openprocessing.org/sketch/919913) - [Instagram @bosscodingplease](https://www.instagram.com/bosscodingplease/) 2020-06-27依 Instagram 貼文的發布日期。標題編號 200622 是創作日 2020-06-22，貼文晚 5 天發出。已公開 ### 顯微粒子（每日創作 200622） 測試在p5.js裡面用shader，產生陣列的粒子後傳到glsl渲染， shader還是好難控制啊啊，很容易一調整就全部跑掉， 感覺很像某種在顯微鏡下的視野 - 著色器 - 粒子 ![顯微粒子｜每日創作截圖](https://cheyuwu.com/static/img/sketches/923287-sm.webp) Che-Yu Wu 來源與相關紀錄 - [前往原始頁面 ↗](https://cheyuwu.com/zh/sketch/923287/) - [OpenProcessing](https://openprocessing.org/sketch/923287) - [Instagram @bosscodingplease](https://www.instagram.com/bosscodingplease/) - [魔法軌跡（每日創作 200623）](https://cheyuwu.com/zh/lab/2020/#lab-sketch-923304) · 詩句寫明與顯微粒子的程式只差一點點 (來源關聯) 2020-06-27依 Instagram 貼文的發布日期。標題編號 200623 是創作日 2020-06-23，貼文晚 4 天發出。已公開 ### 魔法軌跡（每日創作 200623） 魔法粒子會留下發亮的軌跡， 一樣是shader系列，其實跟上個顯微粒子的code大概只差一點點， 測試把粒子加上一些物理效果，配合p5.js的array做互動 - 著色器 - 軌跡 ![魔法軌跡｜每日創作截圖](https://cheyuwu.com/static/img/sketches/923304-sm.webp) Che-Yu Wu 來源與相關紀錄 - [前往原始頁面 ↗](https://cheyuwu.com/zh/sketch/923304/) - [OpenProcessing](https://openprocessing.org/sketch/923304) - [Instagram @bosscodingplease](https://www.instagram.com/bosscodingplease/) - [顯微粒子（每日創作 200622）](https://cheyuwu.com/zh/lab/2020/#lab-sketch-923287) · 詩句寫明與顯微粒子的程式只差一點點 (來源關聯) 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/lab/2020/#lab-press-hahow-creative-coding) · 同一個月的兩篇訪談 (策展主題) 2020-07-03依 Instagram 貼文的發布日期。標題編號 200627 是創作日 2020-06-27，貼文晚 6 天發出。已公開 ### 重力波（每日創作 200627） 在時空中的漣漪擴散成重力波，扭曲了相對的距離卻無從感受。 測試使用距離＋sin來位移像素採樣的點，結合練習grid畫圓形跟噪聲材質，做出網外扭曲擴散的繽紛時空。 - 重力波 - 取樣 ![重力波｜每日創作截圖](https://cheyuwu.com/static/img/sketches/925596-sm.webp) Che-Yu Wu 來源與相關紀錄 - [前往原始頁面 ↗](https://cheyuwu.com/zh/sketch/925596/) - [OpenProcessing](https://openprocessing.org/sketch/925596) - [Instagram @bosscodingplease](https://www.instagram.com/bosscodingplease/) 2020-07-04依 Instagram 貼文的發布日期。標題編號 200629 是創作日 2020-06-29，貼文晚 5 天發出。已公開 ### 火燒竹筍（每日創作 200629） 竹筍們著火了，在著急的抖來抖去， 今天想到，如果把p5.js畫布結果輸入到shader做使用， 就可以做出類似畫布或扭曲的濾鏡， 嘗試了一下發現效果很酷，之後就可以用p5畫完形狀再放進shader後處理了。 - 著色器 - 濾鏡 ![火燒竹筍｜每日創作截圖](https://cheyuwu.com/static/img/sketches/926217-sm.webp) Che-Yu Wu 來源與相關紀錄 - [前往原始頁面 ↗](https://cheyuwu.com/zh/sketch/926217/) - [OpenProcessing](https://openprocessing.org/sketch/926217) - [Instagram @bosscodingplease](https://www.instagram.com/bosscodingplease/) 2020-07-06依 Instagram 貼文的發布日期。標題編號 200630 是創作日 2020-06-30，貼文晚 6 天發出。已公開 ### 點點農田（每日創作 200630） 從高空俯瞰五顏六色的農田，不規則的切割著， 練習用GLSL做Voronoi Diagram，運算真的好快， 取色的部分參考那個點的位置，也測試利用網格的原理， 生成很多不同大小的圓形疊加在一起。 - Voronoi - GLSL ![點點農田｜每日創作截圖](https://cheyuwu.com/static/img/sketches/926998-sm.webp) Che-Yu Wu 來源與相關紀錄 - [前往原始頁面 ↗](https://cheyuwu.com/zh/sketch/926998/) - [OpenProcessing](https://openprocessing.org/sketch/926998) - [Instagram @bosscodingplease](https://www.instagram.com/bosscodingplease/) 2020-07-14依 Instagram 貼文的發布日期。標題編號 200705 是創作日 2020-07-05，貼文晚 9 天發出。已公開 ### 變異（每日創作 200705） 受到輻射的DNA逐漸解離產生變異， 測試shader用sin+cos生成遮罩來產生DNA， 對形狀繪製的掌握度稍微高一些了，能比較熟練的繪製shader中的線條跟形狀。 - DNA - 遮罩 ![變異｜每日創作截圖](https://cheyuwu.com/static/img/sketches/931034-sm.webp) Che-Yu Wu 來源與相關紀錄 - [前往原始頁面 ↗](https://cheyuwu.com/zh/sketch/931034/) - [OpenProcessing](https://openprocessing.org/sketch/931034) - [Instagram @bosscodingplease](https://www.instagram.com/bosscodingplease/) - [焦慮（每日創作 200801）](https://cheyuwu.com/zh/lab/2020/#lab-sketch-940727) · 詩句寫明著色器系列暫時休息 (來源關聯) 2020-08-02依 Instagram 貼文的發布日期。標題編號 200801 是創作日 2020-08-01，貼文晚 1 天發出。已公開 ### 焦慮（每日創作 200801） 思緒跳躍恍惚，無法停止的腦內話語 打結了，不同的情緒撞擊碎裂融合，然後消失 shader系列暫時休息，想做一些不同方向的嘗試 - 情緒 - 粒子 ![焦慮｜每日創作截圖](https://cheyuwu.com/static/img/sketches/940727-sm.webp) Che-Yu Wu 來源與相關紀錄 - [前往原始頁面 ↗](https://cheyuwu.com/zh/sketch/940727/) - [OpenProcessing](https://openprocessing.org/sketch/940727) - [Instagram @bosscodingplease](https://www.instagram.com/bosscodingplease/) - [變異（每日創作 200705）](https://cheyuwu.com/zh/lab/2020/#lab-sketch-931034) · 詩句寫明著色器系列暫時休息 (來源關聯) 2020-08-04依 Instagram 貼文的發布日期，標題編號 200804 為同一日。已公開 ### 超弦理論（每日創作 200804） 世界的構成是震動的弦嗎？ 躲在觀測不到過小的維度蜷曲中， 宏觀中的事實並不存在，你的意念決定看見的面貌。 - 弦論 - 維度 ![超弦理論｜每日創作截圖](https://cheyuwu.com/static/img/sketches/941774-sm.webp) Che-Yu Wu 來源與相關紀錄 - [前往原始頁面 ↗](https://cheyuwu.com/zh/sketch/941774/) - [OpenProcessing](https://openprocessing.org/sketch/941774) - [Instagram @bosscodingplease](https://www.instagram.com/bosscodingplease/) 2020-09-03依 Instagram 貼文的發布日期，標題編號 200903 為同一日。已公開 ### 記憶逝去（每日創作 200903） 每次記憶的提取， 都會對內容與真實產生不可逆的變化， 粉碎模糊掉的情緒無法再生， 隨著時間過去，究竟是真實嗎？ 還是僅是自己不斷重塑的幻象 - 記憶 - 時間 ![記憶逝去｜每日創作截圖](https://kyoko.openprocessing.org/thumbnails/visualThumbnail954948@2x.jpg?hash=2020-09-03%2023%3A13%3A55) Che-Yu Wu / OpenProcessing 來源與相關紀錄 - [前往原始頁面 ↗](https://cheyuwu.com/zh/sketch/954948/) - [OpenProcessing](https://openprocessing.org/sketch/954948) - [Instagram @bosscodingplease](https://www.instagram.com/bosscodingplease/)