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

p5 drums and barsp5 鼓機與小節

startDrums('breakbeat', 110) puts a 16-step drum machine on the page; kickDetected() and cueFired() turn its hits and its bars into the picture.startDrums('breakbeat', 110) 在頁面上放一台 16 格的鼓機，kickDetected()、cueFired() 把它的鼓點和小節變成畫面。

Try these three things試試這三件事

  1. Click the page once to hear the drums (browsers start sound on a click); the hits move the flower either way.
  2. Click cells in the grid at the top: the beat changes at once, and the petals follow.
  3. Wait for bars 5 and 9: cue() names them, cueFired() changes the scene.
  1. 點一下畫面就聽得到鼓（瀏覽器要點過才出聲）。沒點也一樣，鼓點照樣推著花。
  2. 點上方鼓機的格子：節奏馬上換，花瓣跟著變。
  3. 等到第 5、第 9 小節：cue() 先寫好，cueFired() 換場景。

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

Read these lines讀這幾行

  • sketch.js:20–23 A drum machine and three cues: the whole timeline is in setup().一台鼓機加三個 cue：整條時間軸都寫在 setup() 裡。
  • sketch.js:70–72 The microphone's own callbacks: take startDrums() out, turn the microphone on, and the sketch still moves.跟麥克風同名的函式：拿掉 startDrums()、開麥克風，草圖照樣會動。
  • sketch.js:73–74 barStarted() on every bar, cueFired() on the bars cue() named.每一小節呼叫 barStarted()，cue() 指定的小節呼叫 cueFired()。

In the docs文件裡: Drum machine鼓機 · Timeline: bars and cues時間軸：小節與 cue

Next: 19 p5 one line of rhythm →下一個：19 p5 一行節奏 → All examples所有範例