粒子跟流體。程式藝術模組原子化的過程。

在程式藝術中，粒子（particles）與流體（fluid simulation）是兩種以動態生成為主體的表現方式。它們的美學價值來自「大量微小元素」所構成的秩序與失序；實作價值則來自「可控的混沌」 — 藉由參數與力場、規則的設計，生成視覺節奏與動態結構。這些都已被多個公開 web／creative-coding 專案證實其可行性與表現力。

例如，WebGL‑Fluid‑Simulation（在瀏覽器中執行的 fluid sim）就是一個很好例子 — 它讓「流體場 + 互動 → 柔和／連續／動態」成為可能。(paveldogreat.github....)
再者，Fluid & Particles in WebGL 專案（也在網頁上公開）展示了「粒子 + 流體場混合 → 個體 + 場域並存」的視覺語言。

一、粒子與流體的美學面向（附案例）

1. 粒子：從離散到整體的構圖美學

• 粒子本質是獨立單位（points） — 在 web／3D graphics 社群中，3D particle system 是經典技術。文中 “How to Create 3D Particle Effects with WebGL” 即說明：透過 WebGL 可建立大量小粒子 (sprites / points)、控制其移動、顏色與生命週期，用於煙霧、塵埃、雨、爆炸等視覺。(PixelFreeStudio Blog -)

• 「微小元素組構成大結構」的美感 —— 當粒子數量多、分佈廣、運動規律不一，就能從「單一點」演化出「群聚 → 整體律動」的視覺，產生節奏感、張力。這正是 3D particle system 所擅長。

• 這類粒子系統適合表現「情報感／能量感」；也因此非常適合用於「互動式 generative art」或「資料 → 視覺化」的轉換。

2. 流體：連續性的動態雕塑

• 流體強調「場域（field）→ 動態變化」，更接近自然中的煙、水、雲氣。這種「整體感」「連續性」「混沌中帶規律」往往給人柔和、有機、沉浸的感受。

• 例如 WebGL-Fluid-Simulation 就提供這樣的體驗：使用者滑鼠或觸控可以即時「推動 fluid」，並看到平滑、流動、擴散、渲染後的彩色或 shading 效果。(paveldogreat.github....)

• 流體視覺的重點不在個體，而是在「整體的流動／變化」。這使得它成為理想的「視覺化場域 (visual field)」，適合表達「自然力量」「情緒／時間／變化感」等抽象概念。

3. 人類感知差異：為什麼看起來不一樣？

• 粒子系統——因為是「許多小點 → 數量多，運動各異」→ 觀眾會感受到「元素個體」的存在，進而看到「群聚／散開／運動軌跡／節奏」。

• 流體模擬——因為是「場／場域 → 整體變化 + 柔和混合」→ 觀眾看到的是「整體的流動感」「空間／時間的變化」，而不是單個元素。

• 基於這兩種不同的感知方式，粒子偏向「數位能量、資料、群聚、動態」；流體偏向「自然、有機、連續、情緒、時間感」。

這樣的差異也在公開示例中呈現 — 當你動態調整 WebGL-Fluid-Simulation 的參數 (如 density diffusion, velocity diffusion, vorticity)，流體會呈現不同的流動質感與感性效果。(CSDN Blog)

二、藝術策略與概念化面向（含實例）

1. 以「生成規則」取代「手繪形態」

• 在粒子系統中，你不需要手動畫每顆粒子。相反你定義的是「規則」── 生成規則 (spawn)、速度／加速度、生命週期 (lifespan)、力場 (force field)、消亡規則 (death)…… 這些規則控制整體粒子行為。這就是公開教學中 WebGL particle system 的做法。(PixelFreeStudio Blog -)

• SPH 是一種「以粒子表示流體質量」的 mesh-free fluid simulation method。它讓每一粒子都代表一點流體，並透過鄰近粒子的加權影響計算壓力／密度／速度，進而模擬流體的行為。Wikipedia+1

• 相比起傳統格子(grid) 的 fluid simulation，SPH 在處理任意形狀、自由表面 (free surface) 或複雜邊界時有彈性，而且比較容易配合粒子系統渲染 (point-splatting、marching cubes / metaballs 等) 來達到「浮動粒子視覺 + 流體感」。Wikipedia+1

• 許多 realtime / interactive fluid-particle 網頁 demo 就是採這種「粒子 + SPH／類 SPH」邏輯下去做。

意義：這提供了理論 + 技術上的支撐。當你想讓「粒子」真的像水／煙／雲般「流動起來」，SPH 是一條被驗證可行的路。

• 在流體 + 粒子混合中 (例如 Fluid & Particles in WebGL)，粒子受到流體場 (velocity / pressure field) 驅動。你不需要畫出具體形體，而由程式「模擬 + 渲染」創造。(experiments.withgoog...)

這樣的生成策略將「手繪」交還給電腦，藝術家變成「規則設計者／編舞者」。對於 generative art／interactive art／data visualization 都很有優勢。

2. 設計觀者的「體驗節奏」

• 若你想表現「快節奏／爆發式能量／資訊流動／群聚訊號」：選粒子系統 + 強烈 force field／高速生成／高密度粒子。這類效果在 3D particle 教學／範例中很常見。(PixelFreeStudio Blog -)

• 若你想要「舒緩／流動／沉浸／有機」感受：選流體模擬 (Fluid-Simulation) 或混合系統 (Fluid + Particles)，並透過流體場／顏色渲染／柔和擴散來營造。以 WebGL-Fluid-Simulation 為例，它提供控制 density diffusion、velocity diffusion、vorticity、shading、colorful 等設定，讓你能調整流動速度、渲染質感與視覺情緒。(CSDN Blog)

• 如果兩者混合 (particles + fluid) → 就能同時掌握「個體感／資訊感」與「場域感／情緒感」，創造複雜、多層次的視覺/感受。Fluid & Particles in WebGL 就是這樣的範例。(experiments.withgoog...)

3. 資訊與感性：不同的敘事方式

• 用粒子來代表資料點、事件、訊號 → 當資料量大、頻率高時，particle system 能將它們視覺化為「資訊海」「資料流」，觀眾可以「看見」資料的分佈、密度、流動。這與你對「行為辨識 → 可視化」的需求相符。

• 用流體 (或混合) 來代表情緒、時間、能量、生命力 → 當你想表現「情緒 × 工作 × 身體」這類主題時，流體模擬提供「自然／有機／連續」的視覺語言，比起離散的粒子更適合沉浸式或抽象性內容。

三、實作與技術面的考量（附公開專案參考）

以下參考公開可用專案 / 教學 + 結合實作思考：

（1）粒子系統實作

• 設定粒子基本屬性 (position, velocity, lifespan …)，這是 WebGL 3D particle system 的標準流程。(PixelFreeStudio Blog -)

• 如果你需要大量粒子 (thousands → tens萬) 並保持效能，可以使用 GPU instancing / GPGPU 技術 (Geometry Instancing + GPU 計算)。這在 WebGL particle system 教學中是常見做法。(offscreencanvas.com)

• 對於 3D 或高維空間 (你本身有 TSX / web stack 背景) 可以考慮用 Three.js / WebGL。這種方式讓粒子系統與你原來的前端技能鏈較貼近。

（2）流體模擬 (Fluid Simulation)

• 使用公開專案 WebGL-Fluid-Simulation：這是瀏覽器即可運行、支援滑鼠／觸控互動、且可調整 sim resolution、density diffusion、velocity diffusion、vorticity、渲染品質 (shading、bloom、colorful) 的 fluid sim 工具。(paveldogreat.github....)

• 你可以 clone 這個專案，將其整合到你的個人作品集 (例如 GitHub Pages／Markdown blog)，作為互動背景、視覺效果、或作為行為／情緒輔助視覺。

（3）混合策略（Particles + Fluid）

• 使用 Fluid & Particles in WebGL：這個專案就是把粒子系統 + 流體模擬整合，粒子會被流體 velocity field 驅動 (advection) → 形成同時具有「個體感」與「場域感」的動態。(experiments.withgoog...)

• 這正是你若想兼顧「資訊感／事件可視化」與「情緒／能量流動」時的理想選項。

結語：

程式藝術中，粒子與流體並非只是技術上的「特效／動畫／炫麗視覺」，而代表了一種新的 藝術語言 — 藉由「規則 + 隨機性 + 演算法」創造出豐富的視覺節奏、情緒場域與互動空間。這種語言既具備「數位的秩序與資訊感」，也能流露「自然、有機、情緒化」的美感。

我們從多個角度理解 ——

• 粒子系統展現「微小單位 → 群聚／散布 → 結構與節奏」的力量；

• 流體模擬則提供「場域、連續、流動、柔和」的動態感；

• 混合系統 (fluid + particles) 則能同時承載「個體感／事件感 + 場域／情緒感」，兼具資訊性與感性。

粒子與流體不只是「炫效果」，而是一種 介於程式、資料、人性、感性之間 的創作方法 — 它讓我們得以回到「藝術」本質：用形式與運動表達人類對時間、情緒、生命、資訊、互動的理解與感受。