ハロウィーンということでHTML5で動くパーティー用のVJツールを作ってみました
2013 - 10 - 27
Happy Halloween VJ
もうすぐハロウィーンですね。
みなさんは、ハロウィーンパーティーなどに繰り出して、パーティーを盛り上げていることだと思いますが、ハッカーのはしくれは技術でハロウィーンを盛り上げます。
というわけで、ハロウィーンのパーティーとかで使えるVJツールを作ってみました。
Happy Halloween VJ » http://halloween.ryooopan.com
スクリーンショットはこんな感じ。
ブラウザは今のところChromeをサポートしています。(他のブラウザだとうまく動かないかも) マイクをONにすると、周りの音を拾ってきていい感じにエフェクトがかかる感じになっています。
特にパーティー会場でプロジェクターとかで写すといい感じです。
HTML5 + Canvas
実装はすべてHTML5で書いてます。
ちなみに画像は一つも使ってません。かぼちゃと思われるものが上から降ってきてますが、これも画像ではなくCanvasで描いています。
本当は、Leap Motionと合わせてマウスエフェクトをLeap Motionでできるようにしたかったんですが、実装できる時間が5〜6時間くらいしか時間がなかったので、次に持ち越しということで。
スクラッチでとにかく実装することを目的としたので、コードはかなり汚いですが、一応さらしておきます。
もう少し時間ができたら、きれいにします。
作った経緯
もともとLabCafeのハロウィーンパーティー(Tech or Treat)にMitakalabが呼ばれて、なんか音楽系のちょっとアートっぽいのを出そうってことで、イベントの前日に夜な夜な作ってました。(他にこれとは別に、めっちゃシュールなハロウィーンゲームも作ってましたが。笑)
というのも実は、ちょうど先週GoogleでWeb Musicハッカソンがあって、それにMitakalabで出てたんですけど、そのハッカソンがめっちゃアツくて。
そこにいた、@sascacciさんの作品にめっちゃインスパイアされて、自分でもちょっとこういうの実装してみよう、ということで作ってみたのが経緯です。
ちょっと話は変わりますが、Googleのハッカソンはめっちゃでアツかったので、次回やる時はみなさんもぜひ一緒にハックしましょう。笑
(Googleのハッカソンについては、河合さんがブログ記事にまとめてくれたので、リンクを張っておきます。 Web Music ハッカソン #1 やりました。)
このブログの「80円の自作LeapMotionを使った楽器」というものが僕らのそれです。笑 めっちゃシュールなものをひたすら楽しく作ってました。笑
そんなこんなで、作ったものなんですが、ブラウザでだれでも動かせるしせっかくなんで公開しようってことになって今に至っている感じです。
というわけで
ハロウィーンパーティーを楽しむ人も、友達同士で家でワイワイ楽しむ人も、自宅でひきもって楽しむ人も。
ハロウィーンの雰囲気をそれっぽく楽しんでみてください。
というわけで、Happy Halloween :)
Happy Halloween VJ » http://halloween.ryooopan.com