Home > Archives > 2011-09

2011-09

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とかを絡めて遊んでみようかな? と思っています。

Home > Archives > 2011-09

Search
Feeds
Meta

flashDevelopスポンサー

Return to page top