音楽は計算だ！和音プログラミング言語Cholcを作ってみた

（本記事は[Zennに投稿したもの](https://zenn.dev/syuparn/articles/8bf4ad1db6ce9b)と同一です）

# TL; DR

- **ソースコードは和音！実行しながら演奏を聴こう♪**
- brainf\*ck風の構文
- コード進行によってポインタと値を操作

https://syuparn.github.io/cholc/

```
A A A A A A A A A |: F G E Am :| F Fm |: C C C C C C C C A A A B Em :| C Cm X |: Db Eb Eb Eb Eb Eb C C C Fm :| C C X |: C C#m :| Cm Cm X X C C C X Ebm X D Dm A A A A A X |: F G Cm :| Gm X F Fm X F F F X Gm Gm D F# Bm |: Gm D F# Bm :| Gm X |: Gm Dm :| G X A X
```

```
Hello, world!
```

# はじめに
コーディング中、音楽を聴くとテンションが上がりますよね[^tension]！
でも、それだけで満足ですか？

Cholcなら、なんと **音楽でプログラミングができます**！あなたの「コード」を演奏してみましょう♪

![banner.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239887/4781a5c0-d771-4726-0345-e75d238bfa64.png)

# Playground
以下のリンクから、ブラウザ上で実行できます。

https://syuparn.github.io/cholc/

![playground.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239887/7303d11f-eb2d-8ea1-07d6-ed9edbc0cabe.png)

まずはソースコードを打ち込みます。コードのボタンを押す（弾く？）と音を鳴らしながら入力できます。（もちろんtextareaへコピペも可能です）

![edit.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239887/ab0074b0-9873-fddf-87ef-f10ea27132c4.gif)

入力がある場合はinputも入れてから、Playを押すと「演奏」開始します。順番に実行される和音を聴きながら完了を待ちましょう。メモリの様子もあわせて表示されます。

![play.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239887/3e12fcf1-4156-9e33-d51d-258f6e4ddd97.gif)

手っ取り早く結果が知りたい場合は `Run` で即時実行もできます。

# 言語仕様
## 命令
Cholcの命令はbrainf\*ckとよく似ています。~~パク(ry~~

- 処理系は1つのポインタとバイト配列、入出力からなる
- 命令によってポインタのアドレスや指す値を増減させられる

ソースコードは以下の6種類の命令からなります[^chords]。

|operator|role|
|-|-|
|`{メジャーコード}`|ポインタが指す値をインクリメント|
|`{マイナーコード}`|ポインタが指す値をデクリメント|
|`\|:`|ポインタが指す値が0のとき、対応する `:\|` の直後へ飛ぶ|
|`:\|`|ポインタが指す値が0でないとき、対応する `\|:` の直後へ飛ぶ|
|`v`|入力から1バイト読み込み(asciiとして)ポインタへ保存する|
|`X`|ポインタが指す値を(asciiとして)出力へ書き出す|

シャープには `#`, フラットには `b` (アルファベットの「B」）を使用します。

## ポインタの移動

brainf\*ckに馴染みのある方は、上記の表にポインタの移動が含まれていないことを疑問に思ったかもしれません。Cholcのポインタ移動は少し特殊で、**コード進行によって決定**されます。

### 強進行
ポインタ移動の仕組みの前に、少しだけ音楽の話をします。

ある和音の次に完全5度下（＝完全4度上＝半音5個上）の和音が続くコード進行は「強進行」と呼ばれます。
例えば、お辞儀の和音(`C G C`)の最後の2つが強進行です。落ち着いたところに戻ってくるような感覚があると思います。

https://soundquest.jp/quest/nexus-system/nx-5th-down/

> 5▼は機能論の観点から見てもT–S–D–Tのサイクルを“順行”することになるので、緊張/弛緩の分かりやすい流れを作ることに長けています。

### コード進行とCholcのポインタ移動量
そこで、**Cholcでは、コードが強進行（完全5度下降）のときにポインタをデクリメントさせています**。

(インクリメントではなくデクリメントなのは完全に主観です。戻ってくる感覚があるのでマイナスにしました。)

```:強進行
G C
```

![strong.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239887/d421c15b-ea38-845a-2500-3264c9ea8606.png)

逆方向の完全5度上がる場合（弱進行）はインクリメントします。

```:弱進行
C G
```

![weak.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239887/7e73c95c-c2d3-7851-22f7-68425dd12cc1.png)


その他のコード進行についても、**ポインタ移動量は和音が完全5度下降何個分離れているか**で決定されます。

![pitch_interval.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239887/d51563bd-a9dd-df43-7083-06a3e51e78fb.png)

|コード進行|移動量|
|-|-|
|`C C`|`0`|
|`C G`|`+1`|
|`C D`|`+2`|
|`C A`|`+3`|
|`C E`|`+4`|
|`C B`|`+5`|
|`C Gb`|`-6`|
|`C Db`|`-5`|
|`C Ab`|`-4`|
|`C Eb`|`-3`|
|`C Bb`|`-3`|
|`C F`|`-1`|

また、ポインタ移動においてはメジャーコード、マイナーコードを区別しません。

|コード進行|移動量|
|-|-|
|`C F`|`1`|
|`C Fm`|`1`|
|`Cm F`|`1`|
|`Cm Fm`|`1`|

### 補足：なぜ半音ではなく強進行？
ポインタ移動量を「半音何個分か」で定義した方が簡単な言語仕様になったと思います。一方、強進行に基づいたおかげでよく使うコード進行を近場のアドレスに集めることができます[^circle_of_fifths]。

```:例：カノン進行
C G Am Em F C F G
```

- コード進行とポインタ移動量

|進行|移動量|
|-|-|
|`C G`|`1`|
|`G Am`|`2`|
|`Am Em`|`1`|
|`Em F`|`-5`|
|`F C`|`1`|
|`C F`|`-1`|
|`F G`|`2`|

- 半音によってポインタ移動が定義されていた場合の移動量

|進行|移動量|
|-|-|
|`C G`|`7`|
|`G Am`|`2`|
|`Am Em`|`7`|
|`Em F`|`1`|
|`F C`|`7`|
|`C F`|`5`|
|`F G`|`2`|

### ポインタ移動と値の増減の処理順
コード進行によるポインタ移動の評価は、前のコードの評価と後のコードの評価の間に行われます。

例えば、 `C G` は以下の順序で評価されます。

0. 初期状態ではすべてのメモリが `0` 埋めされており、ポインタのアドレスは `0`

|アドレス|0|1|
|:-:|:-:|:-:|
|ポインタ|★||
|値|0|0|

1. コード `C` が評価され、値をインクリメント

|アドレス|0|1|
|:-:|:-:|:-:|
|ポインタ|★||
|値|1|0|

2. コード進行 `C G` が評価され、ポインタのアドレスをインクリメント

|アドレス|0|1|
|:-:|:-:|:-:|
|ポインタ||★|
|値|1|0|

3. コード `G` が評価され、値をインクリメント

|アドレス|0|1|
|:-:|:-:|:-:|
|ポインタ||★|
|値|1|1|

## Cholcはチューリング完全？
**チューリング完全です**。任意のbrainf\*ckソースコードを以下の変換表でCholcに変換することが可能です[^conversion]。

|brainf\*ck|Cholc|
|-|-|
|`+`|`C`|
|`-`|`Cm`|
|`>`|`C Cm E Em Ab Abm C Cm`|
|`<`|`C Cm Ab Abm E Em C Cm`|
|`[`|`\|:`|
|`]`|`:\|`|
|`,`|`v`|
|`.`|`X`|

~~変換後のソースコードでは演奏が単調になるので、実用性は微妙です~~

# 内部実装
最後に、PlaygroundのUIや処理系の実装について軽く紹介します。~~アトミックデザインを試みたけどぐちゃぐちゃになったのでいつか直す~~

## UI
ポインタの移動が分かりやすいよう、各和音を時計回りにポインタがインクリメントされるように配置しました[^circle_of_fifths]。

![buttons.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239887/53987fe7-1d77-ac7a-0a6b-f1e2d7a69524.png)

また、この配置にすることで、

- 一緒に使われることの多いコードが近くに集まる
- コード進行を転調しても回転するだけで位置関係が変わらない

というねらいもあります。

## 音
Tone.jsを使用して和音を鳴らしています。

https://tonejs.github.io/

```ts:src/modules/sound/synth.ts
export function playChord(synth: Tone.PolySynth<Tone.Synth<Tone.SynthOptions>>, notes: string[], duration: string = "4n"): void {
  synth.releaseAll()
  synth.triggerAttackRelease(notes, duration);
}
```

個人的なこだわりポイントとして、音のつながりが滑らかになるよう、和音の配置（ボイシング）をすべてC4~C5の1オクターブ内に収めました。

https://github.com/Syuparn/cholc/blob/main/src/modules/sound/chords.ts#L3

## インタプリタ
和音を鳴らしながら実行するという特性上、インタプリタも1命令ずつ評価できるように設計しています。
構成は以下の通りです。

### パーサ
まずはパーサでソースコードを命令列に変換します。単純な文法なので、ASTは作らずシンプルな配列で表現しています。
後で[ポインタ移動の計算](https://github.com/Syuparn/cholc/blob/99d29b85e6e0b989310415b7fcffaa6d95f288df/src/modules/cholc/bytecode.ts#L61)をしやすいよう、和音の命令は音程の順に並べています[^bytecode]。

|和音|命令(バイトコード)|
|-|-|
|`C`|`0`|
|`C#`|`1`|
|`D`|`2`|
|...|...|
|`B`|`11`|
|`Cm`|`12`|
|...|...|
|`Bm`|`23`|

### 評価器
通常のevaluatorではプログラム完了まで一気に評価しますが、Cholcでは1和音分（=1ステップ）評価をしたところで中断します。こうすることでUIと協調し

- 最初の和音を評価
- 評価された和音を鳴らす
- UI上のメモリと出力を更新
- 次の和音を評価
- ...

という要領でプログラムを実行することができます。

```ts:src/components/organisms/Mode.tsx
// 1ステップ評価を進め、和音やメモリの状態を返す
const state = evaluator.step()

// UIへ反映
setMemoryView(state.memory)
setResult(state.output)
```

# おわりに
以上、コード進行でプログラミングができる言語、Cholcの紹介でした。みなさんもプログラム、もとい作曲（？）をしてみてはいかがでしょうか？
（ちなみに、`share link` ボタンを押すとソースコードをURLで共有できます！）

次回はサンプルコードについて書いていく予定です。

----

(1/28追記)書きました

https://qiita.com/Syuparn/items/6b108970ac3383dc16be

[^tension]: ~~上がらない方も、もうしばらく茶番にお付き合いください~~
[^chords]: dim, aug, sus4, セブンスコード等はありませんのでご了承ください。
[^circle_of_fifths]: 音楽的には「5度圏」の配置になっています。
[^conversion]: `>`, `<` で5度圏を一周（=アドレス増減12)させることで、`+`, `-` を `C`, `Cm` の命令に固定しています。
[^bytecode]: 異名同音もよしなに変換します。例えばUIには`Bb` ボタンしかありませんが、`A#` に置き換えても同様に動作します。