open-audiovisual
搜尋
EN中文
GitHub

範例

二十六個範例，五條路線

每個範例都不需要硬體。螢幕鋼琴、電腦鍵盤、模擬演奏者或鼓機，可以先代替樂器。進到任何一個範例：空白鍵播放時間軸，T 是演出模式，F 是全螢幕。

每張卡片都寫了這個範例教什麼、用什麼彈，以及沒有硬體時用什麼代替。打開它，試試帶路卡上的三件事，讀它指出的那幾行程式，再往「下一個」走。

① 路線

第一次打開

一個檔案讀完整個框架，再替你已有的 p5 草圖加上一行。

  1. 黑底上，粒子拖著細細的綠色與紅色尾巴落下。

    01

    哈囉粒子

    最小的完整範例。把 main.js 從頭讀到尾，整套框架就懂了。

    不需要硬體
    • 螢幕鋼琴
    • 電腦鍵盤
    • 模擬演奏者

    開啟 → 原始碼 ↗

  2. 一朵綠黃色層層花瓣的花，周圍有彩色圓圈，還有四道紅、綠、藍色的光柱。

    15

    p5.js 一行指令

    一份普通的 p5 草圖，第一行載入 oav-p5.js，就能用 MIDI 控制器、螢幕上的控制器或手機彈。

    需要
    • MIDI 控制器
    沒有硬體？
    • 螢幕上的控制器
    • 手機或 iPad

    開啟 → 原始碼 ↗

② 路線 · L1

什麼都能當樂器

控制器、和弦、麥克風、空手、Leap Motion、手機、另一個分頁的 Strudel。

  1. 黑底上，綠、紫、紅色的粒子點一串串炸開，下方是螢幕上的 MiniLab 3 控制器，有琴鍵和聲音按鈕。

    16

    p5 彈出聲音

    在 setup() 寫 startSound('piano')：MIDI 鍵盤、螢幕上的 🎹、手機彈的每個音都聽得到，也炸開一團粒子。

    需要
    • MIDI 控制器
    沒有硬體？
    • 螢幕上的控制器
    • 手機或 iPad

    開啟 → 原始碼 ↗

  2. 深藍底上一個大大的粉紅色圓，外面圍著一圈細細的灰色圓環。

    17

    p5 麥克風

    micLevel、bass、beat 像 mouseX 一樣讀麥克風：說話時圓會變大，不用 p5.sound。

    需要
    • 麥克風
    沒有硬體？
    • 鼓機

    開啟 → 原始碼 ↗

  3. 左邊小小的綠色圓（micLevel），右邊比較大的黃色圓（lag 後），下面兩條曲線：綠色一下就掉，黃色慢慢落下。角落有一個小示波器。

    22

    p5 lag：讓跳動的數值變順

    lag(micLevel, 0.03, 0.4) 把跳動的數值變順，跟 TouchDesigner 的 Lag CHOP 一樣，秒數也一樣。scope() 在網頁角落畫出兩條線。

    需要
    • 麥克風
    沒有硬體？
    • 鼓機

    開啟 → 原始碼 ↗

  4. 粉紅與藍色圓點排成螺旋，下方是螢幕上的 MIDI 鍵盤控制器。

    09

    MIDI 控制器

    螢幕上的控制器，會跟著你接上的實體控制器一起動。

    需要
    • MIDI 控制器
    沒有硬體？
    • 螢幕上的控制器

    開啟 → 原始碼 ↗

  5. 夜裡的花園，細長分岔的植物長著綠葉，枝端開出藍、紅、粉色的小花。

    02

    和弦花園

    和弦語意：三和弦開花，音堆凋零。世界聽的是和弦訊號，從來不看琴鍵。

    不需要硬體
    • 螢幕鋼琴
    • 電腦鍵盤
    • 模擬演奏者

    開啟 → 原始碼 ↗

  6. 一顆球體擠滿彩色圓柱，從端面看去像一把把傘。

    06

    Cylinder Earth

    2020 年用聲音控制的 WebGL 作品。低頻推動柱體，高頻讓旋轉閃爍，大鼓一下就換一組配色。

    需要
    • 麥克風
    沒有硬體？
    • 鼓機

    開啟 → 原始碼 ↗

  7. 藍白色細線層層疊成的曼陀羅。

    03

    手的樂器

    手指就是樂器：一組捏合控制鬆緊，另一組長出手臂，兩手握拳就綻放。

    需要
    • 鏡頭（手）
    沒有硬體？
    • 螢幕鋼琴
    • 鼓機

    開啟 → 原始碼 ↗

  8. 黑底上，一副紫色的手骨架，上方是像雨一樣垂落的綠色與藍色墨跡。

    12

    Leap 雙手

    把 Leap Motion 當樂器，經本機橋接；沒開橋接時用滑鼠模擬手。

    需要
    • Leap Motion
    沒有硬體？
    • 用滑鼠當手

    開啟 → 原始碼 ↗

  9. 藍色和黃色的光束，從畫面下方中央向外爆開。

    08

    遠端控制面板

    手機就是樂器面板。世界只宣告參數，手機上的控制面板依參數自動長出來。

    需要
    • 手機或 iPad
    沒有硬體？
    • 螢幕鋼琴

    開啟 → 原始碼 ↗

  10. 下半部一排顏色柔和的圓往上飄，細圓環裡一根黃色指針朝上，底下寫著房間名 oav-strudel-demo。

    23

    p5 跟 Strudel 一起

    Strudel 在另一個分頁演奏，這份草圖畫畫面：Strudel 送到 OAV Virtual MIDI 的每個音都呼叫 notePressed()，它的時鐘推著 drumPhase 轉。

    需要
    • 另一個分頁的 Strudel
    沒有硬體？
    • 螢幕上的控制器

    開啟 → 原始碼 ↗

  11. 黑底上亮著黃色的圓、方、三角，分別標著 C4 = 60、E4 = 64、G4 = 67，下面寫著 G4 和 392.0 Hz。

    24

    p5 音名

    noteIsDown('C4') 跟 noteIsDown(60) 一樣：收音符號碼的地方都能直接寫音名（C4、c#4、Db3）。noteNumber()、noteName()、noteFreq() 幫你換算。

    需要
    • MIDI 控制器
    沒有硬體？
    • 螢幕上的控制器
    • 手機或 iPad

    開啟 → 原始碼 ↗

  12. 一個青綠色的圓盤，中間有白色指針，外面一圈細圓環，圓心下面四顆點，角落的小示波器畫著彈跳的曲線；底下寫著 env、spring、count 現在的值。

    25

    p5 會動的數值

    env('kick')、spring()、speed()、count('kick', 4) 像 TouchDesigner 的 Trigger、Spring、Speed、Count 那樣讓數值動起來：大鼓撐開圓盤、彈簧把它彈回來、指針一直轉、每 4 下大鼓換一個顏色。

    需要
    • 麥克風
    沒有硬體？
    • 鼓機

    開啟 → 原始碼 ↗

  13. 左邊一圈 16 格、一根白色指針；右邊是節奏那一行 bd ~ [~ bd] ~, ~ cp ~ cp, hh(5,8)、「改自：type」和更早的三行；底下寫著按鍵 1 到 4、Z、S 的用法。

    26

    p5 節奏實驗台

    OAVp5.drums.edit('bd(3,8), …') 像打字一樣換節奏，OAVp5.drums.undo() 回上一行，OAVp5.drums.strudelUrl 把這一行帶去 Strudel；rhythmChanged() 告訴你現在是哪一行。

    需要
    • 電腦鍵盤
    沒有硬體？
    • 鼓機

    開啟 → 原始碼 ↗

③ 路線 · L3

接上別的畫面引擎

帶你自己的：節點網路、2023 年的 p5 草圖、2021 年的粒子系統。

  1. 節點編輯器裡有 noise、level、out 三個節點，旁邊是灰色雲霧材質。

    04

    WebToe 舞台

    這個世界是一張 WebToe 節點網路，操作方式接近 TouchDesigner，透過 ext() 綁定來演奏。

    不需要硬體
    • 螢幕鋼琴
    • 模擬演奏者

    開啟 → 原始碼 ↗

  2. 發光的黃色鋸齒花瓣圍成一圈，中間有小圓圈。

    05

    Prebiotic Flake

    2023 年的一件 MIDI 每日創作，搬進框架重新演奏。繪圖程式碼保持原樣，雪花現在透過 Tone.js 發出聲音。

    不需要硬體
    • 螢幕鋼琴
    • 模擬演奏者

    開啟 → 原始碼 ↗

  3. 青色和紫色的煙火，在垂落的彩色尾跡上炸開。

    07

    花火大會

    2021 年的作品。手指一捏合，煙火就從那隻手的位置升空。

    需要
    • 鏡頭（手）
    沒有硬體？
    • 螢幕鋼琴

    開啟 → 原始碼 ↗

④ 路線 · Timeline · Score

演出控制

演的是一場演出，不只一件作品：看得見的時間軸、會數小節的鼓機，以及有導演的總譜。

  1. 橘黃色圓點排成六邊形，下方是時間軸：五條曲線、場景區塊和一條播放頭。

    14

    時間軸

    看得見的自動化。五條關鍵影格曲線帶動一圈光點，場景負責切換，cue 觸發一次性的閃光。

    不需要硬體
    • 它自己會播
    • 螢幕旋鈕

    開啟 → 原始碼 ↗

  2. 長花瓣的黃橘色花朵，上方是一台 16 格的鼓機，有大鼓、小鼓、鈸、拍手四排。

    18

    p5 鼓機與小節

    startDrums('breakbeat', 110) 在頁面上放一台 16 格的鼓機，kickDetected()、cueFired() 把它的鼓點和小節變成畫面。

    不需要硬體
    • 鼓機

    開啟 → 原始碼 ↗

  3. 藍色的圓，一根黃色指針繞著它轉，上方的鼓機卡寫著 bd*4, [~ sd]*2, hh*8 和它的 16 格。

    19

    p5 一行節奏

    startDrums("bd*4, [~ sd]*2, hh*8") 用一行字寫鼓，drumPhase、beatPhase 讓指針一小節轉一圈、圓在每一拍鼓起來。

    不需要硬體
    • 鼓機

    開啟 → 原始碼 ↗

  4. 同一個節奏在畫布上畫成三種樣子：一圈彩色格子加一根白色指針、最近四小節繞成的螺旋、一條有播放頭的 16 格，上方是鼓機卡。

    20

    p5 看得見的節奏

    drawRhythm() 把節奏畫在畫布上（格子、圓、螺旋三種），錄影錄得到。卡片上的格子和那一行字互相改。

    不需要硬體
    • 鼓機

    開啟 → 原始碼 ↗

  5. 藍色與青綠色的黃昏天空，有一輪淡色的月亮，角落寫著 dusk。

    13

    總譜與導演

    有結構的演出：「一天的天空」只寫一次段落長度；導演為每段跑一個模組，?cut=<id> 選版本，空白鍵放行 hold。

    不需要硬體
    • 螢幕鋼琴
    • 電腦鍵盤

    開啟 → 原始碼 ↗

⑤ 路線 · L4

輸出與留存

同步的一支影片：p5 草圖加一行就能錄，有鏡頭或沒有鏡頭都行。

  1. 中間一顆粉紅色圓點，外面是發光的粉紅與黃色圓環往外擴散，上方是正在打 four on floor 的鼓機卡。

    21

    p5 錄成影片

    startRecording() 把畫布連同草圖自己的聲音錄成一支影片（瀏覽器能錄 MP4 就是 MP4）。🎹 面板上的 ⏺ 和 📷 不寫程式也能用。

    不需要硬體
    • 電腦鍵盤
    • 螢幕上的控制器
    • 鼓機

    開啟 → 原始碼 ↗

  2. 深色畫面上，粉紅、黃與綠色的圓環層層疊疊向外擴散，每一圈都是一個被彈下的音。

    10

    演出影片

    作品疊在鏡頭畫面上，連同作品自己的聲音錄成一個直式 1080×1920 到 4K 的檔案；MIDI 演奏可錄下再重播。

    需要
    • 鏡頭（手）
    沒有硬體？
    • 螢幕鋼琴
    • 電腦鍵盤
    • 模擬演奏者

    開啟 → 原始碼 ↗

  3. 粉紅、紫與黃色的圓環層層交疊，旁邊是螢幕上的 MiniLab 3，下方寫著最後彈下的音。

    11

    控制器影片

    不用鏡頭的演出影片：作品下方即時畫出正在彈的 MIDI 控制器（MiniLab 3 或任何設定檔），重播的演奏也會動。

    需要
    • MIDI 控制器
    沒有硬體？
    • 螢幕鋼琴
    • 電腦鍵盤
    • 一段示範演奏

    開啟 → 原始碼 ↗

05 到 07 是吳哲宇 2020 到 2023 年的作品，在這裡當作示範。框架採 MIT 授權，作品的著作權仍屬藝術家，保留一切權利。