← BACK TO HOME

INTERACTIVE / CREATIVE CODING

All Things Scored

motion becomes music — 動作是看不見的旋律

All Things Scored 專案畫面

世界上所有會動的東西都在演奏，只是我們聽不見——這件作品畫一條線，把穿過它的動作翻譯成旋律。Computer Vision（背景差分）、Web Audio DSP（Tone.js 效果鏈與節拍量化）與樂理（音階映射），三個領域在同一條線上演奏。

ROLE

獨立開發

STACK

React · TypeScript · Tone.js · Canvas

即時影像 → 音樂 · 穩定 60fps · 獨立開發

HIGHLIGHTS

  1. 自適應背景模型：EMA 雙學習率（觸發 0.01／未觸發 0.06），只掃觸發線上一條 scanline＋抽樣，穩定 60fps
  2. 位置決定音高、強度決定力度，映射對齊音階而非連續頻率——怎麼動都不走音
  3. Tone.js PolySynth 效果鏈＋Transport 節拍量化（@8n/@16n），分 20 區段 cooldown 做 voice throttling 防爆音
  4. 高頻 rAF 迴圈用 ref 同步 state，避開 stale closure——React 動畫迴圈的正確寫法

LIVE SITE ↗GITHUB ↗