shigureni.dev

基本波形たち

よく使う基本波形が4つ。正弦波（sine）、鋸波（saw）、矩形波（square）、三角波（triangle）。どれも t の0〜1から一行で作れる。

sine: sin(2πt)（滑らかに上下する純音）
saw: 2t - 1（右上がりの坂をくり返す）
square: t < 0.5 ? 1 : -1（上と下を切り替えるだけ）
triangle: 4·|t - 0.5| - 1（折り返す坂）

正弦波から鋸波・矩形波へいくほど波形が角ばる。角の数が増え、立ち上がりが鋭くなる。

波形の角は、たくさんの倍音（基本周波数の整数倍の成分）が重なって生まれる。滑らかな正弦波は倍音をひとつも持たない純音で、角ばった波ほど高い倍音を多く含む。倍音の量が音色の明るさを決め、角が鋭いほど音は明るくジリジリした響きになる。OscillatorNode の type にある "sine" / "sawtooth" / "square" / "triangle" はこの4本に対応し、波形を選ぶと倍音の構成が決まる。

4本を縦に並べて、それぞれ波形関数を全幅にプロットする。各 x を cycles 倍して % 1 で0〜1にくり返し折り返すと、画面の横幅に何周期かが収まる。

const saw = (t) => 2 * t - 1
const square = (t) => (t < 0.5 ? 1 : -1)
const triangle = (t) => 4 * Math.abs(t - 0.5) - 1
const sine = (t) => Math.sin(t * Math.PI * 2)

export default (c) => {
  const w = c.canvas.width
  const h = c.canvas.height
  const forms = [sine, saw, square, triangle]
  const cycles = 3

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

const band = h / forms.length
    const amp = band * 0.32

for (let row = 0; row < forms.length; row++) {
      const cy = band * (row + 0.5)
      const form = forms[row]

c.strokeStyle = colors.tintAlpha(0, 0.1)
      c.lineWidth = 1
      c.beginPath()
      c.moveTo(0, cy)
      c.lineTo(w, cy)
      c.stroke()

c.strokeStyle = colors.tint(28)
      c.lineWidth = 1.6
      c.beginPath()
      for (let x = 0; x <= w; x++) {
        const t = ((x / w) * cycles) % 1
        const py = cy - form(t) * amp
        if (x === 0) c.moveTo(x, py)
        else c.lineTo(x, py)
      }
      c.stroke()
    }
  }
}

上から下へ、滑らかな正弦波、坂が立つ鋸波、上下を切り替える矩形波、折り返す三角波が並ぶ。% 1 で t を0〜1にくり返すので、cycles の数だけ各波形が周期を刻む。form(t) を別の式に差し替えると、同じ枠のまま別の波形になる。