shigureni.dev

波を足すと、角が立つ

正弦波を足し合わせると別の波形が組み上がる。基本の sin(t) に、その2倍の速さで揺れる sin(2t) を半分の振幅で重ねると、山のひとつが傾いて左右対称ではなくなる。

足す本数を増やすときは、整数倍（倍音）の sin を振幅 1/n で重ねていく。高い倍音ほど 1/n で効きが弱まる。

// 倍音 n=1..harmonics を 1/n の重みで足す
const saw = (t, harmonics) => {
  let y = 0
  for (let n = 1; n <= harmonics; n++) y += Math.sin(n * t) / n
  return y
}

下は倍音 2 本ぶん（sin(t) と sin(2t)/2）だけを重ねたもの。基本波と2倍音を薄く重ねておくと、太い線がその和になっているのが見える。位相に時間を足すと、三本の波が一緒に横へ流れる。

export default (c) => {
  const w = c.canvas.width
  const h = c.canvas.height
  const mid = h / 2
  const amp = h * 0.3

let phase = 0

return () => {
    phase += 0.03

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

c.strokeStyle = colors.tintAlpha(120, 0.3)
    c.lineWidth = 1
    c.beginPath()
    c.moveTo(0, mid)
    c.lineTo(w, mid)
    c.stroke()

// 基本波 sin(t) と 2倍音 sin(2t)/2 を薄く
    for (const n of [1, 2]) {
      c.strokeStyle = colors.tintAlpha(90, 0.4)
      c.lineWidth = 1
      c.beginPath()
      for (let x = 0; x <= w; x++) {
        const t = (x / w) * 2 * Math.PI * 2 + phase
        const y = mid - (Math.sin(n * t) / n) * amp
        if (x === 0) c.moveTo(x, y)
        else c.lineTo(x, y)
      }
      c.stroke()
    }

// 和（基本波 + 2倍音）
    c.strokeStyle = colors.ink
    c.lineWidth = 1.6
    c.beginPath()
    for (let x = 0; x <= w; x++) {
      const t = (x / w) * 2 * Math.PI * 2 + phase
      const y = mid - (Math.sin(t) + Math.sin(2 * t) / 2) * amp
      if (x === 0) c.moveTo(x, y)
      else c.lineTo(x, y)
    }
    c.stroke()
  }
}

2本でもう片側だけ尖り始める。同じ 1/n の重みで本数を増やすと、鋸歯（のこぎり）波に近づく。下は倍音の数を 1 本ずつ増やして縦に並べた。いちばん上が sin ひとつ、いちばん下が 8 本ぶんの和。

const saw = (t, harmonics) => {
  let y = 0
  for (let n = 1; n <= harmonics; n++) y += Math.sin(n * t) / n
  return y
}

export default (c) => {
  const w = c.canvas.width
  const h = c.canvas.height
  const rows = 8
  const rowH = h / rows
  const amp = rowH * 0.34

let phase = 0

return () => {
    phase += 0.03

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

for (let r = 0; r < rows; r++) {
      const harmonics = r + 1
      const mid = rowH * (r + 0.5)

c.strokeStyle = colors.tintAlpha(120, 0.3)
      c.lineWidth = 1
      c.beginPath()
      c.moveTo(0, mid)
      c.lineTo(w, mid)
      c.stroke()

const luma = Math.round(20 + (r / (rows - 1)) * 120)
      c.strokeStyle = colors.tint(luma)
      c.lineWidth = 1.4
      c.beginPath()
      for (let x = 0; x <= w; x++) {
        const t = (x / w) * 2 * Math.PI * 2 + phase
        const y = mid - saw(t, harmonics) * amp
        if (x === 0) c.moveTo(x, y)
        else c.lineTo(x, y)
      }
      c.stroke()
    }
  }
}

下に行くほど倍音が積まれて、鋸歯の斜面と垂直の落ち込みが出てくる。波形を作るのに別の式が要るわけではなく、sin を足す本数と重みを変えているだけ。

任意の周期波は sin と cos の重ね合わせに分解できる（フーリエ級数）。鋸歯波なら倍音の振幅は 1/n、矩形波なら奇数倍音だけを 1/n で足す。どの倍音をどれだけ含むかが音色（ティンバー）の正体で、WebAudio の PeriodicWave はこの倍音テーブルをそのまま渡して波形を定義する。逆に波形を倍音に分解するのが DFT で、加算合成とちょうど往復の関係になっている。