世新大學 大三下專題

Cellules

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

台北 互動裝置 × 攝影 2026
A112040065 王仁和
C112040021 杜宸暤
A112040015 柯光烜
指導老師 曹書睿
目錄

Contents

  • 01 概念 城市是活的
  • 02 美術設計 視覺語彙
  • 03 攝影語言 遠・中・近
  • 04 技術細節 核心機制
  • 05 照片展開 凝視與展開
  • 06 互動方式 手勢操控
  • 07 系統架構 軟體流程
  • 08 展台配置 空間規劃
  • 09 製作排程 時程安排
  • 10 線上展示 互動原型
概念

城市是活的

Cellules 是一本攝影集,也是一件互動裝置。
攝影集收錄台北街頭的記憶碎片,互動裝置讓這些碎片活過來——
一顆在螢幕中呼吸的有機體,觀眾以雙手旋轉、靠近,喚醒散落在表面的每一張照片。

為何是「攝影集 + 互動裝置」

照片是記憶的切片,但記憶從來不是被動翻閱的。我們記得一座城市的方式,是不斷翻找、靠近、又退遠。攝影集留住畫面,互動裝置還原這個過程——旋轉是翻找,縮放是靠近與抽離。

美術設計

視覺語彙

Cellules 視覺
為何選擇細胞

城市的記憶不是線性的,而是從一個核心向外增生——如同細胞分裂,每一段經驗都沿著路徑延展,在末梢凝結成一幀畫面。細胞是最接近記憶生長方式的結構。

三層距離結構

一座城市的記憶從大到小、從遠而近。遠景是輪廓,中景是場所,近景是細節——越近、越小的東西,才是記憶的本質。

冷調 中性 暖調
A — 三球切換
各自獨立,色溫區分
距離 遠 → 中 → 近
B — 同心三層
單球分層,距離激活
當前層 下一層
C — 核心過場
進入核心,切入下一球
攝影內容

攝影語言

遠 — Far
輪廓
你還沒走進去,但你知道那是台北
斜張橋逆光剪影 仰拍高樓建築 河岸橋墩與釣客

城市的形狀。天際線、山與樓的交界、高架橋的弧線。色調偏冷、抽離,像一段還沒想起來的記憶。觀眾在球體最外層看到的東西——辨識得出是台北,但尚未產生情感。

中 — Mid
場所
你到了某個地方,但還沒聚焦在任何瞬間
街角招牌與行人 街上行人 俯瞰大廳人群

巷弄的轉角、市場的入口、捷運月台的人群。有人的存在感,但不是特寫。記憶開始有溫度,畫面變得可以走進去。

近 — Close
細節
記憶真正住的地方
鐵窗衣架光影 鐵皮牆前盆栽 欄杆上的藤蔓與光

沒有全景、沒有地標,單獨看可能認不出是台北。但這正是記憶的本質——越私密、越小的碎片,反而越強烈。觀眾深入球體核心時,看到的是這些。

技術細節

核心機制

Fibonacci 球面分佈

以黃金角均勻散佈 75 個節點於球面,避免隨機分佈的聚集問題,確保照片在球體表面視覺均衡。

多頻 sin noise

四個不同頻率的 sin 疊加產生有機擾動,每條絲線以獨立種子偏移,隨時間持續飄動,賦予球體「呼吸感」。

視線對齊觸發

照片展開需同時滿足兩個條件:視線角度在 25° 錐角內,且相機距離小於閾值。一次只展開一張,其他淡化至 25%。

Billboard 照片朝向

每張照片每幀複製相機四元數,始終正面朝向觀眾。搭配自轉時預乘群組逆矩陣,確保旋轉不破壞朝向。

Radial Gradient 核心光暈

程序生成的指數衰減 Sprite 取代幾何球殼,兩層錯相脈動(1.4 Hz / 1.1 Hz)疊出自然的多尺度光暈。

螢幕尺寸硬上限

展開照片最大佔螢幕 70%。根據相機實際距離即時計算上限,相機越近照片反向縮回,永遠不會撐出畫面。

照片展開

凝視與展開

絲線尖端的照片平常只是小圖示——
當觀眾對準並靠近,它就變成可閱讀的主體。

瀏覽
照片散佈在絲線尖端
作為有機體的一部分
對準+靠近
焦點照片平滑放大
其他照片淡化至 25%
70%
閱讀
最大佔螢幕 70%
始終正面朝向觀眾

一次只展開一張——視線對齊+距離最近者優先。閒置 10 秒後有機體緩慢自轉,恢復「活著的細胞」感。所有展開動作以 lerp 平滑過渡,無跳切。

互動方式

體驗流程

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

左手
旋轉
食指與大拇指旋轉
控制球體的移動方向
右手
縮放
食指與大拇指捏合/張開
控制球體的縮放

靠近時球體微微呼吸反應,無需任何文字指引,互動行為直覺且自然。

軟體架構與流程

系統架構

Webcam 拍攝觀眾手勢 NDI MacBook Pro 接收影像 MediaPipe 解析雙手座標 IAC Mac Mini 接收控制訊號 MediaPipe Monitor 手勢追蹤預覽 TouchDesigner 3D 球體渲染・互動邏輯 HDMI MSI 主要輸出

手機作為 Webcam 透過 NDI 無線傳輸至 MacBook Pro,MediaPipe 解析手勢座標後,左支線透過 IAC 驅動 Mac Mini 上的 TouchDesigner 進行即時渲染,右支線輸出手勢追蹤預覽供現場監控。

展台配置

空間規劃

Webcam 腳架架設 MSI 主螢幕 主要輸出 Mac Mini MacBook Pro MediaPipe Monitor 觀眾 1 – 1.5 m
Webcam
腳架架設
MSI 主螢幕
主要輸出
MacBook Pro
MediaPipe Monitor
Mac Mini
觀眾
1 – 1.5 m

桌面左側放置 MSI 主螢幕與 Mac Mini(藏於螢幕下方),右側放置 MacBook Pro 作為 MediaPipe 監控畫面。Webcam 以腳架架設於桌子左前方,觀眾站立於約 1–1.5m 處即可開始互動。

時程安排

製作排程

4/1 – 4/14
概念定案與技術驗證
確認視覺風格,MediaPipe → IAC → TouchDesigner 通路測試
4/15 – 5/15
核心開發
TouchDesigner 球體建構、照片節點佈局、手勢互動邏輯
5/15 – 5/20
視覺打磨
粒子效果、絲線動態、光影氛圍調整
5/20 – 5/30
影片拍攝及製作
錄製一分鐘互動紀錄影片,後期剪輯
6/1 – 6/5
軟硬體整合測試與展場設計
全系統聯調、展台組裝、現場燈光測試
6/11
展演
線上展示

互動原型

cellules-testing.pages.dev

掃描 QR Code 或點擊連結,以手機或電腦體驗互動原型
*請將裝置橫向觀看
*圖片為測試使用,非正式素材