Home > Event

Event Archive

MIDI Keyboard + visp + SiONを使って、絵を描いてみる


先月の27日に開催された東京てら子Vol.18 『夏休みの自由研究発表会』で発表した内容をざっくりと。

動画を撮影してみましたので、ご覧ください。

タイトルにもあるように、MIDI KeyboardとvispとSiONを使って、キーボードの鍵盤を叩くと音が鳴って、ランダムに円が描写されるというデモです。

MIDIキーボードを衝動買いしまして…

前回の東京てら子Vol.17(テーマは音)を終えた後、僕の中でキーボード熱が再燃しちゃいまして、MIDIキーボードを衝動買い。

演奏するだけでは勿体無いということで、キーボードを使って、何か出来ないかと…

曲を演奏したら、叩いた鍵盤と連動して、何かが描画される。曲が終わると、絵が完成(違う曲を演奏したら、違う絵になる)すると面白いんじゃないかと。

MIDIキーボードとの連携

はて、MIDIキーボードとFlashの連携はどうすればいいのか?

ほえろぐさんの以下の記事を参考にさせていただきました。

な~るほど。vispというMIDI Proxyを使ってあげると良さそうです。(そういえば、東京てら子Vol.17で、MIDIキーボードを使ってデモされたfeb19さんも、vispを使われていたような…)

vispをダウンロード&インストール

ということで、vispをダウンロードしてきます。

僕はGoogleCodeの方が分かりやすかったので、GoogleCodeから必要なものをダウンロード。

visp(GoogleCode)からダウンロード

zipファイルを解凍し、midi proxyの方は、インストールしておきます。

あとはMIDIキーボードをPCに接続して、proxyのexeを立ち上げて、コードをコンパイルすればOKです。

SiONを使ってみる

僕は勉強がてらSiONを使ってみました。

package
{
	import com.visp.midi.MidiManager;
	import com.visp.midi.NoteEvent;
	import flash.display.Sprite;
	import flash.events.Event;
	import org.si.sion.SiONDriver;
	import org.si.sion.SiONVoice;
	import org.si.sion.utils.SiONPresetVoice;

	/**
	 * MIDIキーボードとSiONの連携テスト
	 * @author flabaka
	 */
	public class SionTest extends Sprite
	{
		private var _manager:MidiManager;
		private var _sionDriver:SiONDriver;
		private var _voice:SiONVoice;
		private var _driver:SiONDriver;
		private var presetVoice:SiONPresetVoice;

		public function SionTest():void
		{
			if (stage) init();
			else addEventListener(Event.ADDED_TO_STAGE, init);
		}

		private function init(e:Event = null):void
		{
			removeEventListener(Event.ADDED_TO_STAGE, init);

			//MIDI Managerの設定
			_manager = MidiManager.getInstance();
			_manager.initialize();

			//SiONの設定
			presetVoice = new SiONPresetVoice();
			_voice = presetVoice["midi.piano1"];
			_driver = new SiONDriver(2048);
			_driver.setBeatCallbackInterval(4);
			_driver.play();
			_manager.addEventListener(NoteEvent.NOTE_ON, noteOnHandler);
		}

		private function noteOnHandler(e:NoteEvent):void
		{
			//キー番号を取得
			trace(e.pitch);
			_driver.noteOn(e.pitch, _voice, 4, 0, 0);

			//他の処理をあれこれ

		}

	}

}

ざっくりと、コードはこんな感じ。

e.pitchとすることで、どのキーが押されているのかが分かります。

presetVoiceを変更すれば、ギターとかいろんな音を出せます。

とりあえずこれで音は鳴るんですが、もっといい書き方があるのでは? と、現在あれこれ検証中。

今後はFrocessingとかHYPE Frameworkとかを絡めて遊んでみようかな? と思っています。

東京てら子Vol.18 『夏休みの自由研究発表会』


東京てら子Vol.18 『夏休みの自由研究発表会』

東京てら子Vol.18 『夏休みの自由研究発表会』を、8/27(土)に開催します。

詳細&参加表明は、以下からどうぞ。

Mt.Flash Vol.2で奥多摩に行ってきました!


8/7(日)にMt.Flash Vol.2で奥多摩に行ってきました。

今回は、奥多摩駅→鋸山→大岳山→海沢の四滝→奥多摩駅というコース。

鋸山

鋸山の途中で、「これ、フリークライミングだわ…」みたいな鎖場があって、頑張ってクリアしたら、ご褒美が…

鎖場からの眺望

差し込む光が気持ち良かった!

差し込む光が気持ちいい

大岳山

途中、雨が降ってきましたが、それほど濡れることもなく…

森林浴

海沢の四滝

折角奥多摩まで来たんだから、滝でも見ていきますか…的なノリで、まずは大滝に向かうと…

大滝

あまり期待していなかったんですが、大迫力に感動!

ねじれの滝を経て、三ツ釜の滝へ…

三ツ釜の滝

「あれっ、海沢の四滝って看板があったけど、三つしかなかったよね?」と思って、後で調べてみると、大滝の上の方に、不動滝ってのがあるみたいです。

奥多摩の山に別れを告げ、駅へと向かうことに…

緑いっぱいの奥多摩

個人的には山頂で食べたスイカが、メチャクチャ美味しかった!(写真撮ったんですが、思いっきりピンぼけしてました…)

温泉後のビールは格別です!

Mt.Flash Vol.2に参加された方のエントリ

Elevation Profile
20110807_Okutama_GPSLogData

東京てら子Vol.17 『俺的効果音の作り方&使い方』


東京てら子Vol.17 『俺的効果音の作り方&使い方』

東京てら子Vol.17を、7月23日(土)に開催します。

今回のテーマは『俺的効果音の作り方&使い方』です。

夏になると、風鈴、花火、海など、音を楽しむ機会が増えてきます。

効果音(音)って重要だよね! ということを勉強しましょう!

今回は株式会社IMJ様のご厚意により、セミナールームを使わせて頂けることになりました。

IMJ様、ありがとうございます!

という訳で、開催場所がいつもと異なりますので、参加される皆様はご注意ください!

詳細&参加表明はこちらからどうぞ!

東京てら子Vol.16 での発表内容を掻い摘んで


6/25日(土)に開催された東京てら子Vol.16 『ドキッ、javaScriptだらけの240分』で発表した内容を、掻い摘んで…

GPSロガーを買ったよ!

僕が買ったGPSロガーは、igotU GT-800というヤツです。

使い勝手などは、また別の機会にエントリすることに…

付属品として、記録したログデータをGoogleMap上にサクッと表示してくれるソフトが付いていたんですが、今回のてら子のテーマがJavaScriptだったので、ちょっと作ってみようかと…

Google先生のお世話になる

付属のソフトを使うと、GPSログが、gpxとcsvのファイル形式で書き出すことが可能です。

で、gpxを扱うにはどうしたらいいか、まずはGoogle先生のお世話になりました。

僕が見た記事は、gpxをxmlに変換して、それをJSで読み込むというものでした。

XMLを読み込んでみる

記事の通り、xmlに変換し、それをjqueryで読み込んでみました。

$(document).ready(function () {
    $.ajax({
        type: "GET",
        url: "20110619.xml",
        dataType: "xml",
        success: LoadXml
    });
});

function LoadXml(xml) {

    $(xml).find("trkpt").each(function () {
	//latのみ表示させる
	alert($(this).attr("lat"));
    });
}

こんな感じにすると、データを取得出来ました。

gpxの中を見てみると、データの形式はXMLで書かれているので、わざわざXMLに変換しなくても扱えるんじゃない? と思ったので、やってみることに…

$(document).ready(function () {
    $.ajax({
        type: "GET",
        url: "20110619.gpx",
        dataType: "xml",
        (略)

読み込むファイルを変えてあげるだけで、あとは問題なさそうでした。

データを間引きする

さて、GoogleMapで表示してみようかと思ったんですが、gpxファイルを見てみると、かなりボリュームがあります。

試しに表示してみる感じなので、データを間引きしちゃえと…

僕が使ったのは、『轍(わだち)』というフリーのソフトです。

それを使って、2700→20までデータをガッツリ間引きしちゃいました。

GoogleMapで表示してみる

当初は外部gpxを読み込んで、それを使ってほげほげする…ことを予定していたんですが、実際やってみると、(僕のやり方が悪いからだと思いますが)何だか読み込みに時間が掛かったので、今回はベタな手法(一つ一つ値を登録)を使いました。

あとチャートの作成には、Google Visualization APIを使っています。

Visualization APIは、緯度と経度を登録してあげると、そこから高度(elevation)を自動算出してくれるという、何とも便利な機能が!

画面下のチャートは、クリックした箇所の高度を別ウィンドウで表示してくれるのですが、小数点以下は切り捨てちゃっています。

あとはGoogleMapとStreetViewを組み合わせて、見た目に変化をという感じでしょうか…

データは僕のノートPCでいい感じに表示されるようにしてあるので、そこらあたりはご了承を。

ホーム > Event

Search
Feeds
Meta

flashDevelopスポンサー

Return to page top