分類： 網際網路, 藝術 |

數據流質

開啟互動裝置

設計理念

《數據流質》嘗試以純瀏覽器技術重現「數據流動—演算法生成—觀者介入」之間的動態關係。整體概念聚焦於如何將抽象的數據場（data field）化為具體、柔軟且具有體積感的視覺實體，使觀看者彷彿能在螢幕中觸摸數位流體的運動。

在視覺質感上，刻意避免傳統粒子系統中「單點」的強調，而是以大量粒子的堆積、疊加與同步流動來呈現彷彿沙畫、油彩或粉末狀物質的「觸覺視覺」。粒子在畫布上不作為獨立個體，而更像是被演算法揉合出的「數據顏料」（Data Pigment），以群體運動形成密度、厚度與方向性。藉由色彩分層、透明度堆疊與軌跡殘留的組合，整體畫面呈現出介於液體、雲霧與礦物質之間的視覺語氣，使抽象的演算結果轉化為可感的有機物質。

互動邏輯並不採取傳統的直接操控方式，而是建立在人類動作「擾動」系統本身的自然流場。核心流動由自律的混沌系統（Simplex Noise Flow）維持，而使用者的手勢僅作為向量外力注入，使原本的流動產生偏移、旋轉或局部聚集。透過「共舞式」的向量混合，人類並非主導者，而是一個干擾、激發、促使流體變形的能量來源。人與系統的互動更像在共同雕刻時間，或共同觸碰一塊不斷自我演化的柔軟物質。

視覺色彩由深海藍、橘紅與金色高光構成，三者分別象徵數據的底層深度、運動能量與瞬間的尖峰強度。粒子動態強調流線、拖曳與長時間的軌跡堆叠，模仿液體動力學與自然物質的慣性，使畫面在不斷流動之中保持連續性與夢境感。整體視覺語彙希望讓使用者感覺自己不是在看粒子，而是在看一個有生命脈動、會呼吸的數據本體。

技術架構及演算法

系統以輕量化的單頁應用程式架構實作，所有核心運算皆在前端完成。

整體流程從攝影機影像的擷取開始，影像送入 MediaPipe Hands 進行 21 個手部關鍵點的偵測。取得的座標被轉換為互動向量，再與以噪聲為基礎的流場運算混合。混合後的結果驅動粒子系統的物理更新，而最終的畫面由 HTML5 Canvas 完成繪製。

graph LR
    A[Webcam Input] --> B[MediaPipe Hands Model]
    B --> C{Landmark Detection}
    C -->|Coordinates| D[Interaction Vector System]
    E[Noise Generators] --> F[Flow Field Engine]
    D --> F
    F --> G[Particle Physics Update]
    G --> H[HTML5 Canvas Rendering]

程式端採 Vanilla JavaScript 作為核心語言，以避免框架額外的抽象層並確保每一毫秒的效能都能用在渲染與數據運算上。在視覺呈現方面，使用 HTML5 的 2D Canvas Context，而非 WebGL。這一選擇基於一個明確的美學考量：Canvas 的 globalCompositeOperation、透明度疊合與非清空式繪圖模式，能更直觀地模擬油畫堆疊、粉末混合與光跡殘留等視覺特性，非常適合創造具體積與柔軟感的抽象圖像。

手勢辨識部分使用 MediaPipe Hands，此模型完全在客戶端執行，具備相對低延遲且不依賴後端的優勢。為了搭配體驗界面，Tailwind CSS 用於建構輕量的 UI 覆蓋層，使整體設計能保持視覺統一而不干擾主要渲染。

系統以多層三角函數的疊加方式自製一個偽隨機流場。單純的 sin 與 cos 只能產生規律性波動，但透過不同頻率（scale）、不同相位（phase）、不同時間係數的疊加，流場的角度值會呈現不規則且具「自然感」的方向性。每個粒子在更新時都會查詢其所在座標的噪聲角度，使群體移動呈現有序中的混沌、有方向性的有機流動。

function flowNoise(x, y, t) {
    return Math.sin(x * scale + t) + 
           Math.cos(y * scale + t * 0.8) * 0.8 + 
           Math.sin((x + y) * scale * 0.5) * 0.5;
}

為了讓手勢介入變得自然，系統會先將辨識到的手部座標正規化為 -1 至 +1 的向量空間。每個粒子的最終移動方向是流場角度（系統內在的「自然」）與手勢向量（外在擾動）的權重混合。當粒子靠近手部中心時，手勢向量的影響會更加強烈，形成吸引、旋轉或外拋的效果，像是液體受到磁場或引力干擾般呈現局部擠壓與形變。

畫面未採用「清空重繪」的傳統方式，而是以半透明的深藍色遮罩覆蓋前一幀，使上一幀的粒子痕跡以極緩的速度淡出。當大量粒子高速穿越畫面時，這些殘影會逐漸連成絲線、絲線再堆疊成帶狀結構，最終形成充滿體積感與層次的流動紋理。

發表於