shigureni.dev

まず拍をステップに割る

一小節を 16 個の等しいマスに割る。その上を再生ヘッドが左から右へ一定速度で通る。横一列に 16 マス並んだものがステップ。

ヘッドの位置は時間そのもの。毎フレーム t を少し進めて、t % steps で輪っかに繋ぐ。Math.floor を取ると、いま何番目のマスにいるかが出る。マスの枠と、その上を滑るヘッドを描く。

ヘッドが右端まで行くと t % steps が折り返して左端から戻る。鳴るステップを配列に持っておいて、includes で当たり判定する。

// 鳴るステップ（4つ打ちの裏に少し足した）
const hits = [0, 2, 4, 6, 7, 8, 10, 12, 14]
const isHit = (i) => hits.includes(i)

印付きのマスに丸を置いて、ヘッドがその丸を通った瞬間だけ濃く光らせる。i === headStep がその一致で、当たっていれば colors.ink で大きめに、外れていれば淡い colors.tint(70) で描く。

export default (c) => {
  const w = c.canvas.width
  const h = c.canvas.height
  const steps = 16
  const cell = w / steps
  const midY = h / 2
  const r = Math.min(cell, h) * 0.32

const hits = [0, 2, 4, 6, 7, 8, 10, 12, 14]
  const isHit = (i) => hits.includes(i)

let t = 0

c.fillStyle = colors.paper
  c.fillRect(0, 0, w, h)

return () => {
    c.fillStyle = colors.paper
    c.fillRect(0, 0, w, h)

t += 0.16
    const head = ((t % steps) + steps) % steps
    const headStep = Math.floor(head)

for (let i = 0; i < steps; i++) {
      c.fillStyle = colors.tintAlpha(120, 0.22)
      c.fillRect(i * cell + 1, midY - r - 8, cell - 2, (r + 8) * 2)

if (isHit(i)) {
        const lit = i === headStep
        c.fillStyle = lit ? colors.ink : colors.tint(70)
        c.beginPath()
        c.arc(i * cell + cell / 2, midY, lit ? r * 1.25 : r, 0, Math.PI * 2)
        c.fill()
      }
    }

c.strokeStyle = colors.tint(40)
    c.lineWidth = 2
    c.beginPath()
    c.moveTo(head * cell, midY - r - 10)
    c.lineTo(head * cell, midY + r + 10)
    c.stroke()
  }
}

印を通る瞬間だけ丸が膨らんで光る。16 個が一様に並んでいるだけだと拍の骨が見えない。背景の濃さを 4 マスごとに変える。i % 4 === 0 のマスだけ濃く敷くと、4 拍の頭が透ける。

一拍をさらに 4 つに割った 1 ステップで、4 拍で 16 ステップ。60 / bpm が一拍の秒数なので、ステップの秒数はその 1/4 になる（bpm 120 なら一拍 0.5 秒、1 ステップ 0.125 秒）。等しい長さに割って、どこを鳴らすかを選ぶ形が step sequencer。Roland の TR-808 / TR-909 が 16 ステップの並びを定着させ、いまの DAW のピアノロールやドラムマシンの土台になっている。ここでは秒数でなくフレームで t を進めるので速さは近似で、骨格だけが残る。

export default (c) => {
  const w = c.canvas.width
  const h = c.canvas.height
  const steps = 16
  const cell = w / steps
  const midY = h / 2
  const r = Math.min(cell, h) * 0.32

// 鳴るステップ（4つ打ちの裏に少し足した）
  const hits = [0, 2, 4, 6, 7, 8, 10, 12, 14]
  const isHit = (i) => hits.includes(i)

let t = 0

c.fillStyle = colors.paper
  c.fillRect(0, 0, w, h)

return () => {
    c.fillStyle = colors.paper
    c.fillRect(0, 0, w, h)

t += 0.16
    const head = ((t % steps) + steps) % steps
    const headStep = Math.floor(head)

for (let i = 0; i < steps; i++) {
      const cx = i * cell + cell / 2
      const lit = i === headStep

c.fillStyle = colors.tintAlpha(120, i % 4 === 0 ? 0.5 : 0.22)
      c.fillRect(i * cell + 1, midY - r - 8, cell - 2, (r + 8) * 2)

if (isHit(i)) {
        c.fillStyle = lit ? colors.ink : colors.tint(70)
        c.beginPath()
        c.arc(cx, midY, lit ? r * 1.25 : r, 0, Math.PI * 2)
        c.fill()
      }
    }

// 再生ヘッド
    const hx = head * cell
    c.strokeStyle = colors.tint(40)
    c.lineWidth = 2
    c.beginPath()
    c.moveTo(hx, midY - r - 10)
    c.lineTo(hx, midY + r + 10)
    c.stroke()
  }
}

4 の倍数のマスだけ背景が濃くなって、16 個の流れの中に 4 拍の骨が透ける。再生ヘッドが左から右へ抜けて、印を踏むたびに丸が光る。一列のステップシーケンサの最小形がこうなる。