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

p5 rhythm you can seep5 看得見的節奏

drawRhythm() draws the rhythm on the canvas as a grid, a circle or a spiral, so a recording has it; the cells and the line on the card edit each other.drawRhythm() 把節奏畫在畫布上（格子、圓、螺旋三種），錄影錄得到。卡片上的格子和那一行字互相改。

Try these three things試試這三件事

  1. Click a cell on the card at the top: the line is rewritten the way a person would write it, and the canvas follows.
  2. Press ↶ to step back, Copy for a startDrums("…") line, or Open in Strudel to take the same rhythm to strudel.cc.
  3. Press R: eight seconds of the canvas and the drums, saved as one video with the rhythm drawn in it.
  1. 點上方卡片的格子：那一行字照人會寫的樣子改寫，畫布跟著變。
  2. 按 ↶ 回上一步，按「複製」拿到一行 startDrums("…")，按「在 Strudel 打開」把同一個節奏帶去 strudel.cc。
  3. 按 R：畫布連同鼓聲錄 8 秒，存成一支影片，畫上去的節奏也在裡面。

No hardware needed. Drum machine.不需要硬體。鼓機。

Read these lines讀這幾行

  • sketch.js:22 'circle': a ring of 16 steps for each drum, a hand turned by drumPhase.'circle'：每種鼓一圈 16 格，指針照 drumPhase 轉。
  • sketch.js:24–26 'spiral' winds the last 4 bars outwards; 'grid' is the card's 16 steps, in your own colours.'spiral' 把最近 4 小節往外繞，'grid' 就是卡片上的 16 格，顏色可以自己給。
  • sketch.js:38 rhythmChanged() says the line changed (code, a cell, typing, ↶), so the canvas can show it.rhythmChanged() 告訴草圖那一行換了（程式、點格子、打字、↶），畫布就能跟著顯示。

In the docs文件裡: The rhythm on the canvas把節奏畫在畫布上 · The cells and the line edit each other格子和那一行互相改

Next: 13 Score & director →下一個：13 總譜與導演 → All examples所有範例