ドラムと２進法

こんにちは，軽音サークルでドラムを叩いているだすです．
この記事は，[Life is Tech! Tokai Mentors Advent Calendar 2018](https://qiita.com/advent-calendar/2018/lit-tokai-mentors)の14日目の記事です．

何年間かドラムをやっているんですけど、考え方によってはドラムって単純な仕組みなんですよ．要するに，「叩くか叩かないか」で全てが構成されているんですよね．

ここでプログラマーの方々はもう本記事の言いたいことに気づかれたかもしれませんね笑．
今回はプログラミングに興味のあるドラマーに向けて書きます．ニッチすぎますね笑

#2進法とは
2進法とは，簡単に言えば0と1で数字を表すことです．
普段使っている1，2，3とかは10進法です．

| １０進法 | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 
|:------:|--:|--:|--:|--:|--:|--:|--:|--:|
| ２進法  |  0|  1| 10| 11|100|101|110|111|
このように表します．
普段使う10進法だと，9の次に桁が増えているのに対して，2進法では，1の次にもう桁が増えます．10進法の2と4は2進法では10と100です．このように，桁数がどんどん増えて行きますが，0と1のみで表現できることが特徴ですね．

もっとちゃんとした説明は，あーみーが[Life is Tech! Tokai Mentors Advent Calendar 2018](https://qiita.com/advent-calendar/2018/lit-tokai-mentors)の[1日目の記事](https://qiita.com/army_sh/items/6e8a7f132e9f525b6d72)で書いているので，そちらも読んでみてください．

#ドラムの基礎練
ドラムの基礎練と言えば，板打ちですよね．
自分は一時期こういうのを練習してました．

<img width="312" alt="16部音符イメージ" src="https://qiita-image-store.s3.amazonaws.com/0/323458/b2f291db-5831-2e6c-499a-c43957226825.png">

1拍内の16分音符のパターンを練習するだけですごい役立ちました．ドラムパターンも分解するとこれらの組み合わせになることが多く，応用がすごい効きます．

#音符が0と1に見えてくる
で、この16分音符見てると何かに見えてく来ませんか……？
そう，2進法ですね！
16分音符を1，休符を0としたら，タカタカは1111，タッタカは1011，タタッタは1101

今度は他の音符、例えば6連譜でも同じことができるか考えてみると．
タカタカタカは111111，タッタカタカは101111，タタッタッタは110101になりますね．

#0と1で音符を表すことで嬉しいこと
こうして，1拍の音符を2進数で表せることがわかったと思います．
これができることで何がいいかって、1拍を1つの数字で表せることです！
つまりこういうことです！

| 10進法 | 11 | 12 | 13 | 14 |
|:-----:|:-:|:-:|:-:|:-:|
| 2進法 | 1011 | 1100 | 1101 | 1110 |
| 音符 |<img width="107" alt="スクリーンショット 2018-12-14 11.33.50.png" src="https://qiita-image-store.s3.amazonaws.com/0/323458/a87b9807-3d0b-b6ce-88c3-0765996b3400.png">|<img width="109" alt="スクリーンショット 2018-12-14 11.34.27.png" src="https://qiita-image-store.s3.amazonaws.com/0/323458/43615c2e-99bd-2d00-fd1c-1a8374db55d5.png">|<img width="114" alt="スクリーンショット 2018-12-14 11.34.45.png" src="https://qiita-image-store.s3.amazonaws.com/0/323458/6810533b-88d7-6839-4b36-b3baea97ae8c.png">|<img width="111" alt="スクリーンショット 2018-12-14 11.34.58.png" src="https://qiita-image-store.s3.amazonaws.com/0/323458/c7195b80-38f4-3f8f-b5d1-d36eaa69ddb4.png">

#0と1でドラム譜を書く
JavaScriptで楽譜を書ける[VexFlow](http://www.vexflow.com)ライブラリがあったので，0と1を使って楽譜を書いてみました．[こちら](https://jsfiddle.net/qscv3y0e/34/)で実行もできます．

10進数の0~7を順番に2進数に変換し，それに対応する１６部音符を表示するプログラムになっています．

for文で0~7の間処理を繰り返し

```javascript
//0~7の間，処理を行う
for(var i=0; i<8; i++){
  //処理：10進数→2進数
  //処理：2進数→音符
} 
```
その10進数を2進数に変換します．

```javascript
//10進法を2進法に変換
var binary = ('0000' + (row*8+i).toString(2)).slice(-4);
```
その2進数に対して，音符に変換する処理を行う

```javascript
//2進数を先頭から1つずつ読み込む
for(var j=0; j<binary.length; j++){
  //0なら16分休符，1なら16分音符を表示する
  if(binary[j] == '0'){ 
    notes.push(new VF.StaveNote({ keys: ["c/5"], duration: "16r"}));
  }else if(binary[j] == '1'){
    notes.push(new VF.StaveNote({ keys: ["c/5"], duration: "16"}));
  }
} 
```

###コード

```javascript:example.js
//省略

//１６部音符表示
var staves = [];
for(var row=0; row<2; row++){
  //五線譜位置・サイズ設定
  staves.push(new VF.Stave(10, 120+row*80, 600));
  staves[row].setContext(context).draw();
  staves[row].drawVerticalBar(308, true);
  var notes = [];
  for(var i=0; i<8; i++){
    //10進法を2進法に変換
    var binary = ('0000' + (row*8+i).toString(2)).slice(-4);
    //2進数を先頭から1つずつ読み込む
    for(var j=0; j<binary.length; j++){
      //0なら16分休符，1なら16分音符を表示する
      if(binary[j] == '0'){ 
        notes.push(new VF.StaveNote({ keys: ["c/5"], duration: "16r"}));
      }else if(binary[j] == '1'){
        notes.push(new VF.StaveNote({ keys: ["c/5"], duration: "16"}));
      }
    } 
  } 
  //連桁設定
  var beams = VF.Beam.generateBeams(notes, {beam_rests: true});
  VF.Formatter.FormatAndDraw(context, staves[row], notes);
  beams.forEach(function(b) {b.setContext(context).draw()});
}

//省略
```
###実行結果
<img width="620" alt="スクリーンショット 2018-12-14 13.55.46.png" src="https://qiita-image-store.s3.amazonaws.com/0/323458/de4e5fee-2b94-4f93-f0ac-23f4a0b1d883.png">

#まとめ
こうして，音符を数字に捉えることで，プログラムで使いやすくなりましたね．
これを思いついてからずっと何かしたいと思っていたのがやっとできました．

一見無関係なドラムとプログラミングの共通点を知ってもらえたと思います．
これを機会に，プログラマーはドラムを始めて，ドラマーはプログラミングに興味を持ってもらえたら嬉しいです！