WebAudioでテルミンを作ってみた

2014/2/16 6525hit

GDG九州 冬のハッカソンに参加しました。
ハッカソンは実際に自分たちのアイディアを元にコーディングを行うイベントで、実践型の勉強会となります。
それゆえ敷居が高いイベントのように思われがちですが、実際のところ周りに聞きながら手を動かして覚えることができるので、
新しい知識を習得するのにもってこいのイベントだと思います。

イベントの様子はこんな感じ
小さなチームに別れたり個人で黙々と開発します。
1人で作業する時と違って驚くほど作業効率が上がるのがハッカソンの面白いところ。
今回は13:00に開始してアイデアソンなどを行い14:00くらいから実際の開発をスタート
19:00時点で中断して成果物を見せ合うというスケジュールでした。


実際には開発にのめり込んだ人が多く、終了時間を30分延長したので実質的には5時間半のスケジュールでした。

終わった後、それぞれの成果物を見せ合うのもハッカソンの醍醐味

今日は8チームが成果物を発表しました。

1番目は壇蜜を探せ
iBeaconを使ったAndroidアプリで隠されたタグを距離情報を元に探していくというゲーム。
見事iBeaconを見つけ出すと壇蜜の画像がゲットできます。
内容自体はかなり真面目なアプリなんですが、こうやってバカ要素を足していくのもハッカソンの醍醐味

2番目はオレログ
カレログというAndroidの行動追跡アプリが以前問題となりましたが、それに似た機能をMacで実現するというもの。
というと非常にやばそうですが、自分が作業を行った行動履歴を記録できるという普通に便利そうなアプリです。

3番目はAndroidの画像解析アプリ
画像の特異点を見つけ出し2枚の画像を元にカメラがどのように移動したのかを解析します。
ARを実現するのに必須の機能ですが、ARによくあるマーカーを使わず画像の中から自動的に特徴的な部分を探し出すタイプ。
デバッグしやすいようにNDKなどを使わず全てJavaで作られているとのこと。

4番目は私が作ったWebAudioアプリWebテルミン
後述します。

5番目はバカボンになれるアプリ
このアプリはカメラの画像を元にリアルタイムで人の顔を認証し、ほっぺたに渦巻きを合成、だれでもバカボンになれるというバカボンカメラ。
ゆるいバカボンのBGMと高速な画像解析のアンバランスが面白い


6番目はJQueryで作ったWebアプリのライフツール
全てWebですがMac OSのようなランチャーを備えフォトビューアやカレンダー、プログラミングツールなどを備えたWebで動くOSを作られていました。
画面の移動も滑らか。

7番目はangularjsで作ったオリジナルタグ
angularjsを使うと自分専用の新しいタグを作れるそうで、それを実際に試されていました。

8番目はNFCの情報書込/読み込み #gdgQ
AndroidでNFCタグにtwitterアカウントを書き込んだり、書かれたデータを読み込む機能のアプリを作られていました。

Webテルミンについて

私が初めて参加したハッカソンはAndroidの会が行ったハッカソンでその時は波形データを生成し音声を出力すると言うアプリを作りました。
当時の目標は8bitプレーヤーを作ることで「ミックミクにしてあげる」をノコギリ波で再生したりしていたのですが、
その時の技術を元に作ったのが実際にリリースにまで繋がったスマートテルミン
私が作ったアプリの中でも最大のダウンロード数を記録することになったアプリです。
今回はこのアプリをWebアプリに移植してみたいということでWebAudioで正弦波を再生するを最終目標として開発を開始しました。
実際のところは、WebAudioは想像以上に簡単に音を作ることが出来て、正弦波は開始10分で再生できてしまいました。
そこで、目標を変更し、スマートテルミンを移植したWebテルミンまで作ってしまうことにしました。

完成したものは実際に以下のサイトで遊ぶことが出来ます。
Webテルミン
電源をつけて音色を選び、カオスパッド上でカーソルを移動してみてください。
動作確認はMac版Chrome、ChromeBook Pixel、Nexus5、iPod Touchで行っています。

今回は音が楽しげに聞こえるように若干フィルターを追加しています。
そのお陰でちょっとエコーが出るようになりスマートテルミンよりもさらに不思議な音が聞こえるかと思います。
加えてチェックボックスやラジオボックスの見た目もカスタマイズしてみました。
見た目は全てHTMLとCSSのみで行っており、画像データは一切使用していません。

こんなアプリを半日で作れるのもハッカソンの魅力だなぁ
体力を激しく使うけど:-p

前:すべりやすいのタイヤ痕を本気で反証してみる 次:Google I/O 2014開催日決定

関連キーワード

[HTML5][IT][JavaScript][イベント]

コメントを投稿する