shigureni.dev

ポリリズム — 周期の違うものを重ねる

同心円を二つ置く。内側は 3 等分、外側は 4 等分。両方をぐるぐる回すと、二つの頭が揃うのは最初の一点だけで、あとはずっとずれ続ける。次に同時に頭へ戻るのは 3 と 4 の最小公倍数の 12 ステップ後。

ポリリズム。周期の違う拍を同時に進める。p 拍と q 拍を重ねると、両方の頭が再び揃うのは p と q の最小公倍数のステップごと。互いに素な p, q ほど一巡が長く、ずれの模様が複雑になる。3 拍と 2 拍（または 3 拍と 4 拍）の重ねはヘミオラで、一方を主に聴くともう一方が裏拍に回って聞こえる。アフリカやラテンの打楽器、クラシックの 3 対 2 など、各地のリズムに共通して現れる。

export default (c) => {
  const w = c.canvas.width
  const h = c.canvas.height
  const cx = w / 2
  const cy = h / 2
  const base = Math.min(w, h)
  const rings = [
    { n: 3, r: base * 0.18 },
    { n: 4, r: base * 0.3 },
  ]

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.02

for (const ring of rings) {
      c.strokeStyle = colors.tintAlpha(140, 0.35)
      c.lineWidth = 1
      c.beginPath()
      c.arc(cx, cy, ring.r, 0, Math.PI * 2)
      c.stroke()

const head = (((t * ring.n) % ring.n) + ring.n) % ring.n
      const headStep = Math.floor(head)

for (let i = 0; i < ring.n; i++) {
        const a = (i / ring.n) * Math.PI * 2 - Math.PI / 2
        const x = cx + Math.cos(a) * ring.r
        const y = cy + Math.sin(a) * ring.r
        const lit = i === headStep
        c.fillStyle = lit ? colors.ink : colors.tint(90)
        c.beginPath()
        c.arc(x, y, lit ? 7 : 4, 0, Math.PI * 2)
        c.fill()
      }
    }

// 両方の頭が重なる「一巡」を中心に小さく示す
    const cycle = ((t % 1) + 1) % 1
    c.fillStyle = colors.tintAlpha(40, 0.18 + 0.5 * (1 - cycle))
    c.beginPath()
    c.arc(cx, cy, 5, 0, Math.PI * 2)
    c.fill()
  }
}

両方の輪を同じ t で回しているが、t * ring.n で輪ごとに歩幅を変えているので、3 の輪は速く、4 の輪はゆっくり頭が動く。中心の点は t が整数に戻るたびに明るくなって、二つの頭が揃う一巡を示す。n を 3 と 4 から 4 と 5 にすると、一巡が 20 ステップに伸びて、ずれの模様が長くなる。