動態與 Easing：p5.js Coding Art 裡真正的靈魂設計學

我認為在數位藝術的世界裡，漂亮的動畫不是靠更多線條、更多粒子，而是靠「動得好不好看」。而判斷「好不好看」的核心，不在動 得快或慢，而在於動 得有節奏、有呼吸、有情緒。這也是有一些 coding artist，會說提到：

Easing 是動畫的靈魂。

一、從靜態到動態：視覺藝術跨向「節奏」的關鍵轉折

當我們開始做動態視覺時，第一個直覺通常是：

x += 5;

物件會移動，但畫面彷彿只有「往右飄的 PowerPoint」。
沒有情感、沒有流動、沒有意圖。

然而加入 easing 後，動態馬上變得「像有生命」：

• ease in：慢慢啟動，像生物甦醒

• ease out：逐漸停下，像在呼吸或沉澱

• ease in-out：柔滑的啟停，帶有冥想感或夢境感

• bounce / elastic：具機械性、張力感

結論：Coding art 裡，動態是語言，而 easing 就是語氣。

二、掌握動態的第一步：讓時間成為動畫的主宰

在 p5.js 裡做出穩定、美觀的動態，第一個重要轉變是：

不要用 frame 驅動（加固定數字）
要用時間驅動（0 → 1 的 progress）

為什麼時間驅動比較好？

• 無論 FPS 變化、運算負載多少，動畫節奏不會變

• 可以確保「1.5 秒完成」、「延遲 0.2 秒開始」這種高階控制

• easing 可以精準作用在 progress 值上

• 多物件之間可共享同一條時間軸，做出群體節奏

時間軸的典型公式是：

progress = constrain((millis() - startTime) / duration, 0, 1);

取得線性的 progress 後，再丟進 easing 函式即可。

三、Easing：把「情緒」轉換成「數學曲線」的工具

為什麼 easing 可以塑造情緒？

因為線性動態只有一種語氣，而 easing 則提供整套情緒曲線：

動態風格對應的感覺ease in慢慢啟動、好奇、甦醒ease out靜下來、溫柔停頓、沉靜ease in-out呼吸、冥想、平穩的流動bounce / elastic張力、驚喜、機械感back（overshoot）像實體物件拉扯、反彈。

藝術家在選 easing，就像音樂人選擇音階與節奏。

做 coding art 時，通常會因此把 easing 寫成獨立模組來「替換、混合」。

四、分層使用 easing：為畫面注入生命感

在創作中，不同視覺層級使用不同 easing，可以形成強烈層次感。

1. 位置 Position（主體的節奏）

• 線性 → 背景主體微飄

• ease in-out → 主角的存在感

• 加 noise → 更自然的漂浮（像雲、煙、植物）

這可以塑造「誰在主導視覺」。

2. Scale / Rotation（呼吸與生命感來源）

只加 scale easing，一個圓就有了「活著」的感覺。

• scale 用慢的 ease in-out → 像心跳或潮汐

• rotation 用線性 → 穩定的底層節奏

• rotation + easing → 陡峭或柔滑的扭動

3. 顏色與透明度（情緒轉場）

色彩本身也可以做 easing：

• lerpColor() + ease out → 柔和淡出

• lerpColor() + ease in → 快速亮起

• 多段 easing → 清晨 → 白天 → 黃昏 → 夜晚 的色彩循環

這在 generative art 作品裡非常常見。

五、Coding art 創作中常用的動態套路

1. Class-based 動態物件管理

每個物件持有：

• startTime

• duration

• easingType

• from / to 參數（位置、大小、顏色）

這種架構能同時管理十幾、上百個物件，各自使用不同節奏。

2. Easing + Noise → 自然界動態感

自然世界從不完全依循數學曲線：

base = lerp(..., ease(t))

noiseOffset = map(noise(t + seed), -amp, amp)

result = base + noiseOffset

用在：

• 星星微微閃爍

• 草地晃動

• 雲層漂移

• 粒子群舞

3. 多段式 Easing：讓動態有片段與敘事

把 progress 分段處理：

• 0–30%：ease in（啟動）

• 30–80%：linear（主運動）

• 80–100%：ease out（收尾）

這種方式很像編舞：
不是一條 curve，而是一段一段的動作語句。

4. 用 Easing 扭曲時間（Temporal Distortion）

使用 easing 的核心秘密是：

easing 不只改「數值」，更能改「時間本身」。

你可以把 easing 作用在：

• Perlin noise 的時間軸

• 色彩循環時間

• 物件生成頻率

• 群體動作的 phase

整個畫面會像「同呼吸」般動起來。

六、如何以藝術創作的方式選擇 easing？

1. 先決定「作品的情緒」

2. 用 easing 來「作曲」

讓畫面不同層級按照不同節奏動：

• 背景：線性／平緩噪聲

• 主體：主旋律式的 ease in-out

• 點綴：跳躍式 bounce / elastic

3. 做一個「Easing Playground」

許多 coding artist 都會做一個檔：

• 同一個形狀

• 換 easing

• 換 duration

• 比較情緒差異

這能快速找到畫面最適合的節奏。

動態本身是視覺藝術的語法，而 easing 是語氣與情緒。
只有線性移動，是「句子」。但加入 easing，畫面才會開始「說話」。

以上的分享是我自己嘗試然後跟AI 討論實作技巧的部分。希望大家也能做出一些自己喜歡的作品～～