Cellules (running)

Cellules (running)

Cellules — 小房間,也是生命最小的單元。一座城市的記憶,如何在指尖生長。

這是一件結合互動裝置與攝影的專題作品。觀眾站在螢幕前,透過雙手即時控制一顆不斷呼吸的 3D 球體,每條從球體延伸出的絲線末端,連結著一張台北的街拍攝影。

互動裝置 攝影 three.js MediaPipe 手勢追蹤 台北 世新大學

城市是活的

城市不是被記住的,是長出來的。每一段記憶都是從核心向外延伸的觸手,連結著一幀畫面、一個片刻。城市的記憶從核心向外增生,如同細胞分裂——細胞是最接近記憶生長方式的結構。

球體 — 核心

一顆不斷呼吸的細胞,從中心向外延展出無數條絲線。每條絲線是一段記憶的路徑,球體本身是城市的意識,是所有記憶匯聚之處。

照片 — 末端

每條絲線的盡頭連結著一張攝影作品。觀眾以手勢旋轉、靠近,喚醒散落在有機體表面的台北記憶。

Cellules 主視覺 — 絲線球體


三層距離的攝影語言

攝影不只是素材,它是互動體驗本身的敘事弧線。147 張照片依「遠/中/近」分成三層,觀眾從外往內靠近球體,畫面從「一座城市」收束到「一個你才會注意到的東西」。

遠 — 輪廓

你還沒走進去,但你知道那是台北。天際線、山與樓的交界、高架橋的弧線、整條街的縱深。色調偏冷、抽離,像一段還沒想起來的記憶。

斜張橋逆光 仰拍高樓 河岸橋墩與釣客

中 — 場所

你到了某個地方,但還沒聚焦在任何瞬間。巷弄、市場、騎樓、廟口、捷運月台、公園一角。有人的存在感但不是特寫,記憶開始有溫度。

街角招牌與行人 街上行人

俯瞰大廳人群

近 — 細節

記憶真正住的地方。攤販的手、褪色招牌、鐵窗植物、機車上的雨珠、便當油光。沒有全景、沒有地標,越私密越小的碎片反而越強烈。

鐵窗衣架光影 鐵皮牆前盆栽 欄杆藤蔓與光

體驗流程

觀眾站在螢幕前,攝影機偵測雙手,即時驅動畫面。

左手 — 旋轉

食指與大拇指旋轉,控制球體的移動方向。

右手 — 縮放

食指與大拇指捏合/張開,控制球體的縮放。相機拉近,畫面從遠景層逐步穿入中景與近景。

觀眾靠近 → 球體微微呼吸反應 → 雙手進入畫面 → 開始操控。無需任何文字指引,互動行為直覺且自然。無人互動時球體緩慢自轉,並自動穿越三層照片,作為閒置展示。


核心機制

Fibonacci 球面分佈

以黃金角將 147 個照片節點均勻散佈在三層球面(38 / 52 / 57),避免隨機聚集。

多頻 sin noise 呼吸

四個頻率的 sin 波疊加、各絲線獨立種子,產生有機的「呼吸感」。

視線對齊觸發

視線錐角與距離雙閾值,同時只展開一張照片,最大展開至螢幕 88%,並壓暗背景聚光。

雙門檻 hysteresis

層的進出採不同距離門檻,避免在邊界附近抖動切換。

Selective bloom

輝光只作用於絲線與核心,照片維持原始層次。

閒置穿層

無人互動時相機自動穿越三層,作品自己呼吸。


系統架構

Elgato Facecam Neo 拍攝觀眾手勢(1080p60) USB-C Mac mini M4 — Cellules.app SwiftUI + WKWebView・loopback server・完全離線 MediaPipe 手部骨架追蹤 three.js 球體渲染・互動邏輯 單一進程,無中介軟體・60 fps HDMI USB-C (DP) 27" 主螢幕 球體投影・全螢幕・面向觀眾 MSI MP165 16" 相機監看 + 控制面板・操作端

整個 stack 壓進一個原生 macOS app:Facecam 影像進入 Cellules.app 後,MediaPipe 在瀏覽器引擎內直接解析手勢、three.js 同進程渲染,不再經過任何中介軟體。app 內建 loopback HTTP server(127.0.0.1 即 secure context,相機可用),three.js/MediaPipe/手部模型全數本地化——雙擊即開、完全離線、換機可跑。


成果 — 互動裝置

Cellules 互動裝置實機畫面

147 張台北街拍,分佈於三層球面

3 層距離結構 — 遠 38 / 中 52 / 近 57

60 fps 即時渲染與手勢追蹤

離線自包含原生 app,雙擊即開


成果 — 動態視覺

展場入口的橫幅動態:黑 → 純絲線球體 → 照片球體 → Motion Title → MediaPipe 手勢 → Motion Ending。

Cellules LVS 全景 01

Cellules LVS 全景 02


成果 — 主視覺海報

主視覺海報 01 主視覺海報 02 主視覺海報 03 主視覺海報 04

成果 — 散文攝影集

147 張照片之外的另一條敘事線:以散文與攝影並置的小冊,遠中近三章,跟著互動裝置同一套距離結構走。

攝影集封面 攝影集封底

攝影集內頁 — 引

攝影集內頁

攝影集內頁


製作排程

4/1 – 4/14
概念定案與技術驗證 — 視覺風格確認、手勢追蹤通路測試
4/15 – 5/15
核心開發 — 球體建構、照片節點佈局、手勢互動邏輯
5/15 – 5/20
視覺打磨 — 絲線動態、selective bloom、三層穿越
5/20 – 5/30
影片拍攝及製作 — 互動紀錄影片、LVS 動態
6/1 – 6/5
軟硬體整合測試與展場設計 — 全系統聯調、展台組裝、燈光測試
6/16
展演

工具

three.js — 球體渲染・互動邏輯
MediaPipe Tasks Vision — 手部骨架追蹤
SwiftUI + WKWebView — Cellules.app 展演執行器(離線自包含)
Elgato Facecam Neo — 手勢輸入(1080p60)

團隊

視覺設計 / 軟硬體架構 / 現場執行 — kk
攝影 — 皞皞