Creative Coding 創意程式設計

這是我在學習創意程式設計過程中的一系列互動實驗。每個專案都探索視覺程式設計的不同面向，從基本繪圖到機器學習驅動的互動。

---

LightsUp

一個互動式光線投射模擬，包含 300 個旋轉的鏡面。光線反射彈跳，隨著滑鼠移動創造出迷人的圖案。

特色：

• 300 個旋轉的鏡面片段
• 即時光線投射與多次反射
• 混合模式產生視覺效果

▶ 在 p5.js Editor 遊玩

製作過程

---

LightClock 光之時鐘

使用 HSB 色彩模式的迷幻時鐘。旋轉光線創造出不斷變化的色彩。

特色：

• HSB 色彩模式動畫
• 混合模式（DIFFERENCE, SCREEN）
• 旋轉光線圖案

▶ 在 p5.js Editor 遊玩

---

HouseBeats 音樂視覺化

互動式音樂視覺化器。拖動滑桿控制視覺網格。

特色：

• 水平滑桿控制圓形大小
• 垂直滑桿控制網格密度
• 點擊滑桿隨機變換顏色

▶ 在 p5.js Editor 遊玩

---

Trajectory of Light Box 光盒軌跡

3D WebGL 光盒模擬。滑鼠位置控制光線方向，創造動態陰影與高光。

特色：

• WebGL 3D 渲染
• 方向光與環境光
• 點擊改變配色
• 滑鼠控制光線方向

▶ 在 p5.js Editor 遊玩

---

RockPaperScissors 猜拳遊戲

使用 ml5.js 手勢偵測的猜拳遊戲。握拳開始遊戲，用真實手勢與電腦對戰。

特色：

• ml5.js 手勢偵測（透過攝影機）
• 手勢辨識（石頭、布、剪刀）
• 倒數計時視覺回饋

▶ 在 p5.js Editor 遊玩

---

Snorlax 卡比獸

一個接物遊戲，具有物理模擬。用寶貝球接住掉落的卡比獸。

特色：

• 物理碰撞偵測
• 滑鼠控制寶貝球
• 彈跳與速度計算

▶ 在 p5.js Editor 遊玩

---

Self-Portrait 自畫像

完全使用 p5.js 繪圖函式創作的風格化自畫像。

特色：

• 使用弧線、曲線、三角形構建
• 自訂色彩配置
• 風格化插畫技法

▶ 在 p5.js Editor 查看

---

致謝

所有專案使用 p5.js 與 ml5.js 製作。

---

聯絡我

有任何問題或想要合作？歡迎聯繫我！