shigureni.dev

コード進行 — 緊張から解決へ

高さが並んだら、和音を積める。コードは一個飛ばしで音を重ねる三度堆積で、ドの上にミ、その上にソ。三音重ねれば三和音になる。この積み方そのものより、コードが進むときの緊張と解決のほうが作曲の芯にある。

主和音（トニック、T）は落ち着いた家。下属（サブドミナント、S）は少し外へ出た音。属（ドミナント、D）は強く帰りたがる緊張。T から S へ離れ、D で張り詰め、T へ帰る。この T-S-D-T の往復が I-IV-V-I で、最小のコード進行になる。

長調の各音度に三度堆積で三和音を積むと、I はトニック（主和音）、IV はサブドミナント（下属和音）、V はドミナント（属和音）になる。V には主音の半音下の導音が含まれ、この導音が主音へ半音で解決したがる引力を生む。V→I の進行が解決の感覚の源で、機能和声（functional harmony）の骨格。Rameau が 1722 年の『和声論』で和音を機能の三種に整理した枠組みが元になっている。

I-IV-V-I の四つを横に並べ、各コードの構成音を縦に積んだ点で出す。音程が高いほど点が上にくる。列の背景の濃さが緊張の度合いで、IV で少し濃く、V でいちばん濃く、I で薄く戻る。再生ヘッドが左から右へ抜けて、踏んだコードの三音が濃く光る。

// I-IV-V-I を MIDI 半音の三和音で。root・三度・五度を積む
const chords = [
  [60, 64, 67],
  [65, 69, 72],
  [67, 71, 74],
  [60, 64, 67],
]
// T-S-D-T の緊張度。0=落ち着き 1=強い緊張
const tension = [0, 0.45, 1, 0]

const noteY = (semitone, h) => {
  const lo = 58
  const hi = 76
  const u = (semitone - lo) / (hi - lo)
  const pad = h * 0.12
  return h - pad - u * (h - pad * 2)
}

export default (c) => {
  const w = c.canvas.width
  const h = c.canvas.height
  const count = chords.length
  const colW = w / count
  const r = Math.min(colW, h) * 0.12

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.012
    const phase = ((t % count) + count) % count
    const active = Math.floor(phase)

for (let ci = 0; ci < count; ci++) {
      const cx = ci * colW + colW / 2
      const lit = ci === active

c.fillStyle = colors.tintAlpha(120, 0.1 + tension[ci] * 0.28)
      c.fillRect(ci * colW + 1, 0, colW - 2, h)

const notes = chords[ci]
      c.strokeStyle = colors.tintAlpha(100, 0.5)
      c.lineWidth = 1
      c.beginPath()
      c.moveTo(cx, noteY(notes[0], h))
      c.lineTo(cx, noteY(notes[notes.length - 1], h))
      c.stroke()

for (let ni = 0; ni < notes.length; ni++) {
        const y = noteY(notes[ni], h)
        c.fillStyle = lit ? colors.ink : colors.tint(70)
        c.beginPath()
        c.arc(cx, y, lit ? r * 1.3 : r, 0, Math.PI * 2)
        c.fill()
      }
    }

const hx = phase * colW + colW / 2
    c.strokeStyle = colors.tint(40)
    c.lineWidth = 2
    c.beginPath()
    c.moveTo(hx, 0)
    c.lineTo(hx, h)
    c.stroke()
  }
}

ヘッドが進むにつれ、背景の濃さが I で薄く、IV でやや濃く、V でいちばん濃くなって、また I で薄く戻る。三和音はどれも三度堆積の同じ縦の積み方で、列ごとに音程の位置だけがずれる。chords の半音の並びを差し替えれば別の進行が出て、tension の数字を動かすと張り詰め方が変わる。

このプロジェクトの作曲は React のパッド UI のほうに乗っていて、構成音を組み替えながら触る操作はそちらが受け持つ。