Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ドット絵シーケンサ 技術的うらばなし

ドット絵シーケンサ 技術的うらばなし

Web Musicハッカソン#4@京都にて制作した『ドット絵シーケンサ』の技術的な話をまとめました。

2bedb1eb8f841cd3c3ae584600b016e0?s=128

OKUNOKENTARO

July 27, 2015
Tweet

Transcript

  1. ドット絵シーケンサ 技術的うらばなし Web Music ハッカソン #4 @京都 Jul 25, 2015

  2. • armorik83 • 京都市 • Webエンジニア • 元音楽屋、MIDI講師

  3. Web Music ハッカソン?

  4. • Web MIDI API (Chrome 43) • Web Audio API

    (Chrome 35) • これらのAPIを活用するハッカソン • 第四回は西日本初の大会で、京都市で開催
  5. • MIDI検定1級所持 • MIDI検定認定講師資格も所持
 (専門学校で講師をしていました) • 今はWebの仕事をしている • 出場するしかない •

    今回は初ハッカソン
  6. チーム編成

  7. • armorik83 • _likr • pastelinc • ussy9

  8. • armorik83 from ng-kyoto • _likr from ng-kyoto • pastelinc

    from ng-kyoto • ussy9 (内輪感あるチームに快く参加していただきありがとうございました)
  9. 3人もng-kyoto 宣伝 [ng-kyoto Angular Meetup #2] [検索]

  10. 何をつくろう

  11. DAWでこういう遊びをした人、居るはず

  12. 音符をドットに見立てて絵が描けるやつ作るか!

  13. で、こんなん作りました

  14. 設計

  15. • ドット絵が描ける • ドットは鍵盤(MIDIキーボード)にて入力 • 現在のカーソルにドットが置かれたら
 カーソルは右に動く(DAWのステップ入力的) • 領域外の低音を弾くとカーソルは左右に自由に動かせる

  16. • ドットは2値ではなくベロシティによる濃淡表現が可能 • MIDIは16チャンネルまであるので
 チャンネルごとの色分けで最大16色使用可 • 1ドットは16分音符1個に対応 • 縦1ドットが半音単位だと不協和音が頻発するので
 スケール(旋律:長調、短調、Blues風など…)を選択し


    シーケンサ上のドット絵でありながら調性が整う
  17. • ドットは2値ではなくベロシティによる濃淡表現が可能 • MIDIは16チャンネルまであるので
 チャンネルごとの色分けで最大16色使用可 • 1ドットは16分音符1個に対応 • 縦1ドットが半音単位だと不協和音が頻発するので
 スケール(旋律:長調、短調、Blues風など…)を選択し


    シーケンサ上のドット絵でありながら調性が整う 元音楽屋として、ここかなりこだわらせてもらった
  18. • Firebaseによる複数人同時編集 • WebGLによる3D表現 • DAWではない、Webっぽさを意識

  19. 技術選定

  20. • Web MIDI API • AngularJS • Firebase • SVG

    • WebGL • 独自ライブラリ
  21. • ハッカソンにおいて最重要APIなのだが
 4人の作業時間を合わせると、扱った時間は一番短い • InputもOutputも取り扱う • Web Audio APIは使用していない Web

    MIDI API
  22. • UIとアプリケーションの中枢はAngularJS 1.4.3を採用 • 経験者が75%という強み • 改めてモックアップを作るのに最適な
 フレームワークだと実感 AngularJS

  23. • 永続化 • 複数人同時編集の同期 • Web Music ハッカソンがGDG主催なので(?) Firebase

  24. • UIの描画はすべてSVG • D3.jsを使用 • 配列の可視化に強い SVG

  25. • ussy9さんのアイデア • three.jsで利用 • 音の再生にあわせてイイ感じに3D演出が動く! WebGL

  26. • MIDI入力をグリッドの座標に変換
 座標をMIDI出力に変換するためのロジック • 入った数値を内部の関数によって変換する
 単純なコンバータ • 前例が無いのでライブラリ的に実装 独自ライブラリ

  27. 担当者

  28. • Web MIDI API: pastelinc, armorik83 • AngularJS: _likr •

    Firebase: _likr • SVG: _likr • WebGL: ussy9 • 独自ライブラリ: armorik83
  29. ぱんだ無双!!

  30. 作業開始

  31. • GitHubにリポジトリ立ち上げて作業 • 全員Gitの知識があったのでPRベースのチーム開発 • Slackもすぐに立ち上げ、進捗や口で伝えにくい部分 (ソース周りなど)をチャットで相談 • 口頭で話しつつ、参考サイトのURLなどを貼っていく •

    GitHubと連携させてPR情報がドンドン入ってくるの
 めちゃ便利だった
  32. • AngularJS周りは_likrが整備(AngularJSのベテラン強い) • 当たり前のようにES2015 Babel + Browserify • `npm run

    watch` によるwatchifyベースの開発 • CSSなし、gulpなし、ESLintなし、テストなしの
 ハッカソンらしい軽量装備(少ないほどチーム内に広めやすい) • AngularJS周りの設計については
 ng-kyoto Angular Meetup #2で詳しく話す
  33. • 仕様の詳細を決める • ドットは縦40, 横64とする • 縦は、スケールの周期が5音〜7音のため
 6〜8オクターブ必要となることから限界の40 • 横は、4分の4拍子4小節分の16分音符数から算出


    将来的にはいくらでも可能(なはず)
  34. • データ構造的には[[0..39], [0..39]..[0..39]]
 length 40の配列を格納するlength 64の配列 • 音符(Note)は3プロパティを持つ • NoteNumber

    • Velocity • Channel • 意図的にMIDI仕様と同じ構造にした
  35. • ハッカソン時間内で全てのプロパティが有効に
 活用されなかったとしても、VelocityやChannel値は
 今後の表現に活用できるため省略せず含ませた • 絶対時間情報も持たせない • Note OnとNote Offの送出時間差で


    音符の長さを表現 • これもMIDI仕様に従っている
  36. • AngularJSのアプリケーション中枢が
 非MIDIのNote onやNote offイベントをpubする • イベントを受けたMIDIプレイヤーと3Dレンダラーが
 それぞれ作用する • MIDIプレイヤーはイベントに合わせて


    生のMIDI Note on/offを送信 • 3DレンダラーはVelocity値などを活用し
 three.js APIを叩いて表現(この辺担当してなくて詳しくない)
  37. • MIDIインタフェース(受信側)は鍵盤から入力された NoteNumber(ドレミに番号を振ったもの)を
 変換ライブラリを通して座標のY値に変換する • 変換ライブラリは2時間足らずで作成
 テスト駆動でやりたかったので、別リポジトリを立ち上げ
 gulpのwatchとMochaでガンガン回しながら開発 • gulpは定番構成を使ったので3分で開発開始できた

    • 普段からハッカソン用スケルトンみたいなのがあると強い
  38. アーキテクチャ

  39. 8FC.*%*"1* .BJO$POUSPMMFS 锃侭䕵 WJTVBMJ[FS 8FC(-䬐䔲%JSFDUJWF HSJE ء٦؛ٝ؟邌爙䬐䔲%JSFDUJWF BOHVMBSNPEVMF 'JSFCBTF 宕竲⻉ծ醱侧،ؙإأ儗ךⰟ剣

    .*%**OQVU .*%*Ⰵ⸂Ⳣ椚4FSWJDF .*%*1MBZFS .*%*⳿⸂4FSWJDF $POWFSUFS .*%*/PUF/VNCFS׾䏟垥ח 䏟垥׾.*%*/PUF/VNCFSח バックエンド フロントエンド ブラウザAPI層
  40. 結果と反省点など

  41. で、こんなんできました

  42. • 受賞して景品を頂きました! (Thanks!)

  43. • WebGL全般 • 旋律に応じてMIDIを座標に変換するコンバータ • 旋律選択(長調とBluesのみ) • MIDI入力に合わせて画面にドットが点灯 • MIDIを出力してソフトシンセ(Cubase使用)で発音

    • Firebaseでの編集同期 できたところ
  44. • ChannelやVelocityに応じた色の変化(今は黒一色) • カーソルを自由に動かせる機能
 今はドットを入力しないと隣にカーソルが移動しない やってないところ

  45. • 40*64の配列の編集はかなり重いのか
 同期がとにかく遅い • 開発中にスクリーンを真っ白にする機能をまるで
 忘れていて、デモ中に1から点を打っていく演出が
 できなかった • 開発中の大量の点があったためデモ再生で一斉に
 音が鳴り、旋律選択があまり伝わっていなかった

    惜しかったところ
  46. • MIDI入力部分のフォローが足りていなかった
 (最重要機能で完成も一番ギリギリ) • Web MIDI APIの予習はもうちょっとしておくべきだった • デバイスポート周り、端末依存しそうなコードを
 いかに抽象化できるか

    • けっこう低レイヤーで直接叩くと使いにくいという学び • 今回はDAWのソフトシンセ依存だったので可搬性・再現性が悪い
 Web Audio APIのシンセと組み合わせたらブラウザ内で完結できそう 個人的な反省点
  47. • 反省点はありつつも、6時間でここまで作れたことは自分でも驚いた • ES2015はチーム内のコーディングを
 ある程度整えるポテンシャルがある(他言語のclass構文経験者なら余裕) • AngularJSのイベント駆動でインタフェースや内部APIを実装より
 先に定めたおかげで、双方ブロッキングせずに開発が進んだ • 細かいところは詰まってないがシーケンサは


    ブラウザのみでも十分作れる(要パフォーマンス・チューニング) 感想
  48. • この人数・納期規模の開発だと
 とにかく設計力 & 実装力(あと地味に命名力) • ここが高ければ高いほど初速が良く、全体が進みだす • 配列処理周りのアルゴリズム・API暗記は必須と痛感 •

    今後、だいたい開始時に出たアイデアの7割が
 達成ギリギリラインだと見積もっていく 今後の課題
  49. • 今回のハッカソンで制作した『ドット絵シーケンサ』は
 オープンソースカンファレンス2015 Kansai@Kyoto
 のng-kyotoブースにて展示します • 8月7-8日 京都リサーチパークで開催
 http://www.ospn.jp/osc2015-kyoto/ •

    ぜひ遊びにきてね 宣伝
  50. お疲れさまでした!