Example 14 · Run a show範例 14 · 演出控制

Timeline時間軸

Automation you can see: five lanes of keyframe curves drive a ring of light, scenes cut it, cues fire one-shot flashes.看得見的自動化。五條關鍵影格曲線帶動一圈光點，場景負責切換，cue 觸發一次性的閃光。

Try these three things試試這三件事

  1. Press Space and watch the playhead run over five lanes of curves; scenes cut, and ◆ cues fire flashes and ripples.
  2. Drag a knob: it takes over from its lane (the amber dot is where you took it, the hollow one is where the curve would be).
  3. Press ● to arm recording, play, and move a knob: the move is written into the lane as new keyframes.
  1. 按空白鍵，看播放頭走過五條曲線；場景切換，◆ cue 放出閃光與漣漪。
  2. 拖動一個旋鈕：它從曲線手上接手（琥珀色圓點是你接手的位置，空心圓點是曲線原本會在的位置）。
  3. 按 ● 準備錄製，播放時轉動旋鈕：你的動作會寫成這條曲線上的新關鍵影格。

No hardware needed. Plays itself · Knobs on screen.不需要硬體。它自己會播、螢幕旋鈕。

Read these lines讀這幾行

  • config.js:31–37 One lane of keyframes per param.每個參數一條關鍵影格曲線。
  • main.js:113 The timeline gets the lanes (each keyframe carries its curve), the scenes and a loop: nothing else in the world changes.時間軸拿到曲線（每個關鍵影格自帶曲線種類）、場景與循環：世界本身完全不用動。

Take this input into your own p5 sketch: one line.把這個輸入帶進你自己的 p5 草圖：一行。 Example 15 · Docs: p5.js in one line範例 15 · 文件：p5.js 一行接上

In the docs文件裡: Timeline時間軸

Next: 18 p5 drums and bars →下一個：18 p5 鼓機與小節 → All examples所有範例