$30 off During Our Annual Pro Sale. View Details »

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

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

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

OKUNOKENTARO

July 27, 2015
Tweet

More Decks by OKUNOKENTARO

Other Decks in Programming

Transcript

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

    View Slide

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

    View Slide

  3. Web Music ハッカソン?

    View Slide

  4. • Web MIDI API (Chrome 43)
    • Web Audio API (Chrome 35)
    • これらのAPIを活用するハッカソン
    • 第四回は西日本初の大会で、京都市で開催

    View Slide

  5. • MIDI検定1級所持
    • MIDI検定認定講師資格も所持

    (専門学校で講師をしていました)
    • 今はWebの仕事をしている
    • 出場するしかない
    • 今回は初ハッカソン

    View Slide

  6. チーム編成

    View Slide

  7. • armorik83
    • _likr
    • pastelinc
    • ussy9

    View Slide

  8. • armorik83 from ng-kyoto
    • _likr from ng-kyoto
    • pastelinc from ng-kyoto
    • ussy9 (内輪感あるチームに快く参加していただきありがとうございました)

    View Slide

  9. 3人もng-kyoto
    宣伝 [ng-kyoto Angular Meetup #2] [検索]

    View Slide

  10. 何をつくろう

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  14. 設計

    View Slide

  15. • ドット絵が描ける
    • ドットは鍵盤(MIDIキーボード)にて入力
    • 現在のカーソルにドットが置かれたら

    カーソルは右に動く(DAWのステップ入力的)
    • 領域外の低音を弾くとカーソルは左右に自由に動かせる

    View Slide

  16. • ドットは2値ではなくベロシティによる濃淡表現が可能
    • MIDIは16チャンネルまであるので

    チャンネルごとの色分けで最大16色使用可
    • 1ドットは16分音符1個に対応
    • 縦1ドットが半音単位だと不協和音が頻発するので

    スケール(旋律:長調、短調、Blues風など…)を選択し

    シーケンサ上のドット絵でありながら調性が整う

    View Slide

  17. • ドットは2値ではなくベロシティによる濃淡表現が可能
    • MIDIは16チャンネルまであるので

    チャンネルごとの色分けで最大16色使用可
    • 1ドットは16分音符1個に対応
    • 縦1ドットが半音単位だと不協和音が頻発するので

    スケール(旋律:長調、短調、Blues風など…)を選択し

    シーケンサ上のドット絵でありながら調性が整う
    元音楽屋として、ここかなりこだわらせてもらった

    View Slide

  18. • Firebaseによる複数人同時編集
    • WebGLによる3D表現
    • DAWではない、Webっぽさを意識

    View Slide

  19. 技術選定

    View Slide

  20. • Web MIDI API
    • AngularJS
    • Firebase
    • SVG
    • WebGL
    • 独自ライブラリ

    View Slide

  21. • ハッカソンにおいて最重要APIなのだが

    4人の作業時間を合わせると、扱った時間は一番短い
    • InputもOutputも取り扱う
    • Web Audio APIは使用していない
    Web MIDI API

    View Slide

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

    フレームワークだと実感
    AngularJS

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  26. • MIDI入力をグリッドの座標に変換

    座標をMIDI出力に変換するためのロジック
    • 入った数値を内部の関数によって変換する

    単純なコンバータ
    • 前例が無いのでライブラリ的に実装
    独自ライブラリ

    View Slide

  27. 担当者

    View Slide

  28. • Web MIDI API: pastelinc, armorik83
    • AngularJS: _likr
    • Firebase: _likr
    • SVG: _likr
    • WebGL: ussy9
    • 独自ライブラリ: armorik83

    View Slide

  29. ぱんだ無双!!

    View Slide

  30. 作業開始

    View Slide

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

    めちゃ便利だった

    View Slide

  32. • AngularJS周りは_likrが整備(AngularJSのベテラン強い)
    • 当たり前のようにES2015 Babel + Browserify
    • `npm run watch` によるwatchifyベースの開発
    • CSSなし、gulpなし、ESLintなし、テストなしの

    ハッカソンらしい軽量装備(少ないほどチーム内に広めやすい)
    • AngularJS周りの設計については

    ng-kyoto Angular Meetup #2で詳しく話す

    View Slide

  33. • 仕様の詳細を決める
    • ドットは縦40, 横64とする
    • 縦は、スケールの周期が5音〜7音のため

    6〜8オクターブ必要となることから限界の40
    • 横は、4分の4拍子4小節分の16分音符数から算出

    将来的にはいくらでも可能(なはず)

    View Slide

  34. • データ構造的には[[0..39], [0..39]..[0..39]]

    length 40の配列を格納するlength 64の配列
    • 音符(Note)は3プロパティを持つ
    • NoteNumber
    • Velocity
    • Channel
    • 意図的にMIDI仕様と同じ構造にした

    View Slide

  35. • ハッカソン時間内で全てのプロパティが有効に

    活用されなかったとしても、VelocityやChannel値は

    今後の表現に活用できるため省略せず含ませた
    • 絶対時間情報も持たせない
    • Note OnとNote Offの送出時間差で

    音符の長さを表現
    • これもMIDI仕様に従っている

    View Slide

  36. • AngularJSのアプリケーション中枢が

    非MIDIのNote onやNote offイベントをpubする
    • イベントを受けたMIDIプレイヤーと3Dレンダラーが

    それぞれ作用する
    • MIDIプレイヤーはイベントに合わせて

    生のMIDI Note on/offを送信
    • 3DレンダラーはVelocity値などを活用し

    three.js APIを叩いて表現(この辺担当してなくて詳しくない)

    View Slide

  37. • MIDIインタフェース(受信側)は鍵盤から入力された
    NoteNumber(ドレミに番号を振ったもの)を

    変換ライブラリを通して座標のY値に変換する
    • 変換ライブラリは2時間足らずで作成

    テスト駆動でやりたかったので、別リポジトリを立ち上げ

    gulpのwatchとMochaでガンガン回しながら開発
    • gulpは定番構成を使ったので3分で開発開始できた
    • 普段からハッカソン用スケルトンみたいなのがあると強い

    View Slide

  38. アーキテクチャ

    View Slide

  39. 8FC.*%*"1*
    .BJO$POUSPMMFS
    锃侭䕵
    WJTVBMJ[FS
    8FC(-䬐䔲%JSFDUJWF
    HSJE
    ء٦؛ٝ؟邌爙䬐䔲%JSFDUJWF
    BOHVMBSNPEVMF

    'JSFCBTF
    宕竲⻉ծ醱侧،ؙإأ儗ךⰟ剣
    .*%**OQVU
    .*%*Ⰵ⸂Ⳣ椚4FSWJDF
    .*%*1MBZFS
    .*%*⳿⸂4FSWJDF
    $POWFSUFS
    .*%*/PUF/VNCFS׾䏟垥ח
    䏟垥׾.*%*/PUF/VNCFSח
    バックエンド
    フロントエンド
    ブラウザAPI層

    View Slide

  40. 結果と反省点など

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  44. • ChannelやVelocityに応じた色の変化(今は黒一色)
    • カーソルを自由に動かせる機能

    今はドットを入力しないと隣にカーソルが移動しない
    やってないところ

    View Slide

  45. • 40*64の配列の編集はかなり重いのか

    同期がとにかく遅い
    • 開発中にスクリーンを真っ白にする機能をまるで

    忘れていて、デモ中に1から点を打っていく演出が

    できなかった
    • 開発中の大量の点があったためデモ再生で一斉に

    音が鳴り、旋律選択があまり伝わっていなかった
    惜しかったところ

    View Slide

  46. • MIDI入力部分のフォローが足りていなかった

    (最重要機能で完成も一番ギリギリ)
    • Web MIDI APIの予習はもうちょっとしておくべきだった
    • デバイスポート周り、端末依存しそうなコードを

    いかに抽象化できるか
    • けっこう低レイヤーで直接叩くと使いにくいという学び
    • 今回はDAWのソフトシンセ依存だったので可搬性・再現性が悪い

    Web Audio APIのシンセと組み合わせたらブラウザ内で完結できそう
    個人的な反省点

    View Slide

  47. • 反省点はありつつも、6時間でここまで作れたことは自分でも驚いた
    • ES2015はチーム内のコーディングを

    ある程度整えるポテンシャルがある(他言語のclass構文経験者なら余裕)
    • AngularJSのイベント駆動でインタフェースや内部APIを実装より

    先に定めたおかげで、双方ブロッキングせずに開発が進んだ
    • 細かいところは詰まってないがシーケンサは

    ブラウザのみでも十分作れる(要パフォーマンス・チューニング)
    感想

    View Slide

  48. • この人数・納期規模の開発だと

    とにかく設計力 & 実装力(あと地味に命名力)
    • ここが高ければ高いほど初速が良く、全体が進みだす
    • 配列処理周りのアルゴリズム・API暗記は必須と痛感
    • 今後、だいたい開始時に出たアイデアの7割が

    達成ギリギリラインだと見積もっていく
    今後の課題

    View Slide

  49. • 今回のハッカソンで制作した『ドット絵シーケンサ』は

    オープンソースカンファレンス2015 Kansai@Kyoto

    のng-kyotoブースにて展示します
    • 8月7-8日 京都リサーチパークで開催

    http://www.ospn.jp/osc2015-kyoto/
    • ぜひ遊びにきてね
    宣伝

    View Slide

  50. お疲れさまでした!

    View Slide