読者です 読者をやめる 読者になる 読者になる

三三七拍子を判定するサイトを作った話

割と今更というか、作ってから2週間くらいたってからなんでもう時期すぎた感強いですね。
こちらです。

経緯

バイト帰りのぼく「(なぜか三三七拍子のリズムで手をたたいている)」
バイト帰りで頭がおかしくなったぼく「三三七拍子を判定するサイト作ったら面白いんじゃね?」
彼女「????」

翌日

メイドカフェ(グランヴァニア)で三三七拍子を判定する機構を実装する。
完全にノリノリになったぼく「三七拍子を判定するサイト作ってるんですよ」
メイドさん「???」

さらに翌日

メイドカフェ(同)で見た目とかいろいろ作る

完成

完成した。
作業時間トータル2,3時間程度です。

処理の流れ

  1. 太鼓をクリックないしタップするたびにキューにその時点のUnix Time(ミリ秒)をエンキューします。
  2. キューのlengthが3 + 3 + 7 = 13を超える場合、キューの先頭をデキューします。
  3. キューのlengthが3 + 3 + 7 = 13になるタイミングで判定を開始します。
  4. 判定した結果を表示します。

判定の流れ

  1. キューの最初と最後の値の差を14で割った値を正規のインターバルとします。(休符を含めた全体の音数が15なので、そのインターバルの数は14)
  2. キューの隣り合う値との差(インターバル)の配列を作ります queue.map((val, index, arr)=> arr[index + 1] - val) このとき配列の最後の値はNaNになってしまうのでいい感じにfilter((val)=> ! Number.isNaN(val))します。
  3. インターバルの添え字の2番目と5番目の値を1/2します(ここのインターバルは4分音符と4分休符を含んでいるため)
  4. インターバルの配列の任意の値と正規のインターバルの差が(正規のインターバルを4分音符の長さとしたときの)16分音符より小さければ三三七拍子として認められます。

リポジトリ

github.com

大体ES2015使うためにバベってます。ほとんど意味ないけど。
処理を見ればわかりますが、Array.prototype.map, Array.prototype.reduce, Array.prototype.filter 使いまくってます。三三七拍子を判定する機構には関数型プログラミングのエッセンスがね…(大嘘)

これらを踏まえてクソサイト開発バトルの宣伝をします

connpass.com

こんなイベントやります。場所未定ですが都内です。
みんなで楽しいクソサイトを作ってバトルしようというイベントです。奮って参加ください