shigureni.dev

周波数の比が、図形になる

横軸を時間にする代わりに、x に sin(a·t)、y に sin(b·t) を割り当てると、二つの周波数の比が一枚の閉じた図形になる。a と b が 1:2 や 2:3 のような単純な整数比だと、線がぴたりと重なって安定した模様になる。比が無理数に近いと線が閉じず、面を塗りつぶす。

リサージュ図形。x と y にそれぞれ周波数の違う正弦波を割り当てた曲線。x = A sin(a t + φ)、y = B sin(b t) で、a:b が有理数 p:q のときだけ周期 2π·q/a で軌道が閉じ、整数 p+q が小さいほど単純な形になる。比が無理数なら閉じずに矩形を稠密に埋める。位相差 φ は図形の向きと開き具合を決め、1:1 で φ を 0→π/2 と動かすと線分から円まで連続に変わる。Jules Antoine Lissajous が 1855 年、二つの音叉の振動を鏡で合成して観測した。

x に周波数 a の sin、y に周波数 b の sin を入れて、t を 0 から一周ぶん進めながら点を繋ぐ。a:b を 1:2、2:3、3:4 と切り替えると、それぞれ別の閉じた曲線が出る。位相差 phase を少しずつ動かすと、同じ比のまま図形が開いたり捻れたりする。

整数比のあいだは線が自分自身の上に戻って閉じ、phase が回ると図形がねじれる。a:b の分子と分母を大きくすると、ループの数が増えて編み目が細かくなる。比を [1, Math.PI] のような無理数に近い組にすると、線が二度と同じ道を通らず矩形を埋め尽くしていく。

単純な比ほど図形が素直に閉じる対応は、耳の協和とも重なる。これに減衰を足して、振幅が時間とともに落ちるようにしたのが harmonograph。実際の振り子が摩擦で止まりながら描く図に近い。x と y をそれぞれ複数の減衰する sin の和にして、各成分に Math.exp(-d·t) の減衰を掛ける。

const evalPen = (pen, t) => {
  let v = 0
  for (const comp of pen) {
    v += comp.amp * Math.sin(comp.freq * t + comp.phase) * Math.exp(-comp.decay * t)
  }
  return v
}

const makePen = (size) => {
  const rand = (lo, hi) => lo + Math.random() * (hi - lo)
  return Array.from({ length: 3 }, () => ({
    amp: rand(size * 0.05, size * 0.14),
    freq: Math.round(rand(1, 5)) + rand(-0.01, 0.01),
    phase: rand(0, Math.PI * 2),
    decay: rand(0.0008, 0.0026),
  }))
}

export default (c) => {
  const w = c.canvas.width
  const h = c.canvas.height
  const cx = w / 2
  const cy = h / 2
  const size = h
  let xPen = makePen(size)
  let yPen = makePen(size)
  let t = 0
  let prevX = cx
  let prevY = cy
  let started = false

const reset = () => {
    c.fillStyle = colors.paper
    c.fillRect(0, 0, w, h)
    xPen = makePen(size)
    yPen = makePen(size)
    t = 0
    prevX = cx
    prevY = cy
    started = false
  }

reset()

return () => {
    if (t > 2600) {
      reset()
      return
    }
    c.strokeStyle = colors.tint(28)
    c.lineWidth = 1.5
    c.beginPath()
    if (started) c.moveTo(prevX, prevY)
    for (let i = 0; i < 30 && t <= 2600; i++) {
      t += 0.05
      const x = cx + evalPen(xPen, t)
      const y = cy + evalPen(yPen, t)
      if (started) c.lineTo(x, y)
      else {
        c.moveTo(x, y)
        started = true
      }
      prevX = x
      prevY = y
    }
    c.stroke()
  }
}

x も y も三本の減衰する sin の和なので、振幅が時間とともに小さくなり、渦を巻きながら中心へ収束する。周波数を整数からわずかにずらしてあるため、線がぴたりと重ならず繊維のような束ができる。decay を小さくすると収束が遅くなって巻きが増え、freq を整数ちょうどに揃えると束がほどけて一本の閉じた曲線に戻る。協和の幾何が、そのまま絵の骨格になる。