ドラムと２進法

こんにちは，軽音サークルでドラムを叩いているだすです．
この記事は，Life is Tech! Tokai Mentors Advent Calendar 2018の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の1日目の記事で書いているので，そちらも読んでみてください．

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

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
音符

#0と1でドラム譜を書く
JavaScriptで楽譜を書けるVexFlowライブラリがあったので，0と1を使って楽譜を書いてみました．こちらで実行もできます．

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

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

//0~7の間，処理を行う
for(var i=0; i<8; i++){
  //処理：10進数→2進数
  //処理：2進数→音符
} 

その10進数を2進数に変換します．

//10進法を2進法に変換
var binary = ('0000' + (row*8+i).toString(2)).slice(-4);

その2進数に対して，音符に変換する処理を行う

//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"}));
  }
} 

###コード

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()});
}

//省略

###実行結果

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

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