Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ドット絵シーケンサ 技術的うらばなし
Search
OKUNOKENTARO
July 27, 2015
Programming
2
1.6k
ドット絵シーケンサ 技術的うらばなし
Web Musicハッカソン#4@京都にて制作した『ドット絵シーケンサ』の技術的な話をまとめました。
OKUNOKENTARO
July 27, 2015
Tweet
Share
More Decks by OKUNOKENTARO
See All by OKUNOKENTARO
Podcastを継続する技術 / refactoradio-240119
okunokentaro
1
130
Webアプリケーション設計の第一歩は ディレクトリの整理から / Encraft 1
okunokentaro
31
9.7k
JSONとJSON Schemaを改めて理解する / tokyo_study
okunokentaro
9
2.1k
それでもどうしてRecoilを使うのか / Harajuku.ts Meetup Recoil
okunokentaro
19
5.3k
TypeScriptは10年でこんなに進化しました / TechFeed Experts Night 11
okunokentaro
6
1.6k
Hasura.io RDBをサクサク作る方法はARやO/RMだけじゃなくなりました/hasura-io
okunokentaro
5
600
コードには型アノテーションよりも要件アノテーションを増やせ!/harajukuts2
okunokentaro
13
6.1k
10年と3ヶ月でWebサービスを作った話 / Piyogrammer Conference 2021
okunokentaro
2
950
any禁止 絶対に型付けを諦めないための便利なユーティリティ関数 / techstand6
okunokentaro
21
6.4k
Other Decks in Programming
See All in Programming
CSC307 Lecture 13
javiergs
PRO
0
150
Trial
cairolibrary720
1
130
実用的かつリーズナブルな 「Azure × Gemini × LINE」~キャラクターBot 実装ライブデモ~
tomodo_ysys
1
170
最近追加した型の紹介とその振り返り
aki19035vc
0
180
Ruby メモリ管理 プログラミング
megmogmog1965
0
130
3 Effective Rules for Success with Signals in Angular
manfredsteyer
PRO
0
120
はしめてのプログラミングとロボット制御
watawatavoltage
0
290
AHC035解説
terryu16
0
720
CSC307 Lecture 11
javiergs
PRO
0
240
DDDを志して3年経ったら「DDDの皮を被ったクリーンアーキテクチャ」になった話【デブサミ2024夏】
texmeijin
1
620
【Go言語】ジェネリクス
tomo1227
0
170
Introduction of Happy Eyeballs Version 2 (RFC8305) to the Socket library
coe401_
1
220
Featured
See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
44
4.7k
Bootstrapping a Software Product
garrettdimon
PRO
304
110k
Building an army of robots
kneath
301
42k
Thoughts on Productivity
jonyablonski
64
4.1k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
662
120k
Designing for Performance
lara
604
67k
The Illustrated Children's Guide to Kubernetes
chrisshort
39
47k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.4k
Designing the Hi-DPI Web
ddemaree
276
34k
RailsConf 2023
tenderlove
16
720
Fashionably flexible responsive web design (full day workshop)
malarkey
399
65k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
149
45k
Transcript
ドット絵シーケンサ 技術的うらばなし Web Music ハッカソン #4 @京都 Jul 25, 2015
• armorik83 • 京都市 • Webエンジニア • 元音楽屋、MIDI講師
Web Music ハッカソン?
• Web MIDI API (Chrome 43) • Web Audio API
(Chrome 35) • これらのAPIを活用するハッカソン • 第四回は西日本初の大会で、京都市で開催
• MIDI検定1級所持 • MIDI検定認定講師資格も所持 (専門学校で講師をしていました) • 今はWebの仕事をしている • 出場するしかない •
今回は初ハッカソン
チーム編成
• armorik83 • _likr • pastelinc • ussy9
• armorik83 from ng-kyoto • _likr from ng-kyoto • pastelinc
from ng-kyoto • ussy9 (内輪感あるチームに快く参加していただきありがとうございました)
3人もng-kyoto 宣伝 [ng-kyoto Angular Meetup #2] [検索]
何をつくろう
DAWでこういう遊びをした人、居るはず
音符をドットに見立てて絵が描けるやつ作るか!
で、こんなん作りました
設計
• ドット絵が描ける • ドットは鍵盤(MIDIキーボード)にて入力 • 現在のカーソルにドットが置かれたら カーソルは右に動く(DAWのステップ入力的) • 領域外の低音を弾くとカーソルは左右に自由に動かせる
• ドットは2値ではなくベロシティによる濃淡表現が可能 • MIDIは16チャンネルまであるので チャンネルごとの色分けで最大16色使用可 • 1ドットは16分音符1個に対応 • 縦1ドットが半音単位だと不協和音が頻発するので スケール(旋律:長調、短調、Blues風など…)を選択し
シーケンサ上のドット絵でありながら調性が整う
• ドットは2値ではなくベロシティによる濃淡表現が可能 • MIDIは16チャンネルまであるので チャンネルごとの色分けで最大16色使用可 • 1ドットは16分音符1個に対応 • 縦1ドットが半音単位だと不協和音が頻発するので スケール(旋律:長調、短調、Blues風など…)を選択し
シーケンサ上のドット絵でありながら調性が整う 元音楽屋として、ここかなりこだわらせてもらった
• Firebaseによる複数人同時編集 • WebGLによる3D表現 • DAWではない、Webっぽさを意識
技術選定
• Web MIDI API • AngularJS • Firebase • SVG
• WebGL • 独自ライブラリ
• ハッカソンにおいて最重要APIなのだが 4人の作業時間を合わせると、扱った時間は一番短い • InputもOutputも取り扱う • Web Audio APIは使用していない Web
MIDI API
• UIとアプリケーションの中枢はAngularJS 1.4.3を採用 • 経験者が75%という強み • 改めてモックアップを作るのに最適な フレームワークだと実感 AngularJS
• 永続化 • 複数人同時編集の同期 • Web Music ハッカソンがGDG主催なので(?) Firebase
• UIの描画はすべてSVG • D3.jsを使用 • 配列の可視化に強い SVG
• ussy9さんのアイデア • three.jsで利用 • 音の再生にあわせてイイ感じに3D演出が動く! WebGL
• MIDI入力をグリッドの座標に変換 座標をMIDI出力に変換するためのロジック • 入った数値を内部の関数によって変換する 単純なコンバータ • 前例が無いのでライブラリ的に実装 独自ライブラリ
担当者
• Web MIDI API: pastelinc, armorik83 • AngularJS: _likr •
Firebase: _likr • SVG: _likr • WebGL: ussy9 • 独自ライブラリ: armorik83
ぱんだ無双!!
作業開始
• GitHubにリポジトリ立ち上げて作業 • 全員Gitの知識があったのでPRベースのチーム開発 • Slackもすぐに立ち上げ、進捗や口で伝えにくい部分 (ソース周りなど)をチャットで相談 • 口頭で話しつつ、参考サイトのURLなどを貼っていく •
GitHubと連携させてPR情報がドンドン入ってくるの めちゃ便利だった
• AngularJS周りは_likrが整備(AngularJSのベテラン強い) • 当たり前のようにES2015 Babel + Browserify • `npm run
watch` によるwatchifyベースの開発 • CSSなし、gulpなし、ESLintなし、テストなしの ハッカソンらしい軽量装備(少ないほどチーム内に広めやすい) • AngularJS周りの設計については ng-kyoto Angular Meetup #2で詳しく話す
• 仕様の詳細を決める • ドットは縦40, 横64とする • 縦は、スケールの周期が5音〜7音のため 6〜8オクターブ必要となることから限界の40 • 横は、4分の4拍子4小節分の16分音符数から算出
将来的にはいくらでも可能(なはず)
• データ構造的には[[0..39], [0..39]..[0..39]] length 40の配列を格納するlength 64の配列 • 音符(Note)は3プロパティを持つ • NoteNumber
• Velocity • Channel • 意図的にMIDI仕様と同じ構造にした
• ハッカソン時間内で全てのプロパティが有効に 活用されなかったとしても、VelocityやChannel値は 今後の表現に活用できるため省略せず含ませた • 絶対時間情報も持たせない • Note OnとNote Offの送出時間差で
音符の長さを表現 • これもMIDI仕様に従っている
• AngularJSのアプリケーション中枢が 非MIDIのNote onやNote offイベントをpubする • イベントを受けたMIDIプレイヤーと3Dレンダラーが それぞれ作用する • MIDIプレイヤーはイベントに合わせて
生のMIDI Note on/offを送信 • 3DレンダラーはVelocity値などを活用し three.js APIを叩いて表現(この辺担当してなくて詳しくない)
• MIDIインタフェース(受信側)は鍵盤から入力された NoteNumber(ドレミに番号を振ったもの)を 変換ライブラリを通して座標のY値に変換する • 変換ライブラリは2時間足らずで作成 テスト駆動でやりたかったので、別リポジトリを立ち上げ gulpのwatchとMochaでガンガン回しながら開発 • gulpは定番構成を使ったので3分で開発開始できた
• 普段からハッカソン用スケルトンみたいなのがあると強い
アーキテクチャ
8FC.*%*"1* .BJO$POUSPMMFS 锃侭䕵 WJTVBMJ[FS 8FC(-䬐䔲%JSFDUJWF HSJE ء٦؛ٝ؟邌爙䬐䔲%JSFDUJWF BOHVMBSNPEVMF 'JSFCBTF 宕竲⻉ծ醱侧،ؙإأ儗ךⰟ剣
.*%**OQVU .*%*Ⰵ⸂Ⳣ椚4FSWJDF .*%*1MBZFS .*%*⳿⸂4FSWJDF $POWFSUFS .*%*/PUF/VNCFS䏟垥ח 䏟垥.*%*/PUF/VNCFSח バックエンド フロントエンド ブラウザAPI層
結果と反省点など
で、こんなんできました
• 受賞して景品を頂きました! (Thanks!)
• WebGL全般 • 旋律に応じてMIDIを座標に変換するコンバータ • 旋律選択(長調とBluesのみ) • MIDI入力に合わせて画面にドットが点灯 • MIDIを出力してソフトシンセ(Cubase使用)で発音
• Firebaseでの編集同期 できたところ
• ChannelやVelocityに応じた色の変化(今は黒一色) • カーソルを自由に動かせる機能 今はドットを入力しないと隣にカーソルが移動しない やってないところ
• 40*64の配列の編集はかなり重いのか 同期がとにかく遅い • 開発中にスクリーンを真っ白にする機能をまるで 忘れていて、デモ中に1から点を打っていく演出が できなかった • 開発中の大量の点があったためデモ再生で一斉に 音が鳴り、旋律選択があまり伝わっていなかった
惜しかったところ
• MIDI入力部分のフォローが足りていなかった (最重要機能で完成も一番ギリギリ) • Web MIDI APIの予習はもうちょっとしておくべきだった • デバイスポート周り、端末依存しそうなコードを いかに抽象化できるか
• けっこう低レイヤーで直接叩くと使いにくいという学び • 今回はDAWのソフトシンセ依存だったので可搬性・再現性が悪い Web Audio APIのシンセと組み合わせたらブラウザ内で完結できそう 個人的な反省点
• 反省点はありつつも、6時間でここまで作れたことは自分でも驚いた • ES2015はチーム内のコーディングを ある程度整えるポテンシャルがある(他言語のclass構文経験者なら余裕) • AngularJSのイベント駆動でインタフェースや内部APIを実装より 先に定めたおかげで、双方ブロッキングせずに開発が進んだ • 細かいところは詰まってないがシーケンサは
ブラウザのみでも十分作れる(要パフォーマンス・チューニング) 感想
• この人数・納期規模の開発だと とにかく設計力 & 実装力(あと地味に命名力) • ここが高ければ高いほど初速が良く、全体が進みだす • 配列処理周りのアルゴリズム・API暗記は必須と痛感 •
今後、だいたい開始時に出たアイデアの7割が 達成ギリギリラインだと見積もっていく 今後の課題
• 今回のハッカソンで制作した『ドット絵シーケンサ』は オープンソースカンファレンス2015 Kansai@Kyoto のng-kyotoブースにて展示します • 8月7-8日 京都リサーチパークで開催 http://www.ospn.jp/osc2015-kyoto/ •
ぜひ遊びにきてね 宣伝
お疲れさまでした!