ものすごい盛況でイベント自体もすごい面白かったですね。人のプログラミングの様子を見る45分ってどんな時間になるのかなーと若干不安に感じていたんですが、始まってみると思った以上に興味深くてあっという間だったです。プログラムなんてさっぱり、という感じの友人（女子）も何人か来ていたんですけども、そういう人から見ても噂には聞いていたプログラムなるものが実際に目の前でかなりのスピードで打ち込まれていくのは新鮮な体験だったみたいでした。あとASゴングのみなさま（とくに小坂さんのDirector使いっぷり＆饒舌っぷり！）も4nchor5 la6のトークもすごすぎでした。

いっぽう自分のデモはなんとも残念な感じで公開しきりでしたが…　ともかくこのイベントにむけて作ってみたものをこちらでも公開しておきます。YouTubeのストリーミング動画を物理シミュレーションで落下させて映像と音声をミックスするというコンセプトのコンテンツ「TubeObstruction」です。

• http://work.doppac.cc/as3/TubeObstruction/index.html
  • FireFox, Safariにて動作確認してます
  • ※FireFoxだと動かないこともあるみたいで、確認中です

TubeObstruction Demo from dotimpact on Vimeo.

これは

■Box2DFlashAS3の物理シミュレーションオブジェクトとしてYouTubeからダウンロードする動画を表示して、動画同士を衝突させて映像や音をミックスして遊ぶコンテンツです。動画のボールは壁や別のボールとの衝突による衝撃が起きた際だけ力の強さに応じて再生されます。

操作方法

• 入力フィールド（画面上段）
  • 検索ワードを入力してリターンすると、YouTubeでの検索結果から動画をダウンロードして、円形のオブジェクトとして落下します。
  • “＜検索ワード＞,3″のようにカンマ区切りで数字を指定すると、落ちる個数を指定できます
  • 検索ワードの代わりにYouTubeの動画パーマリンクを入力することで、特定の動画を指定できます
• スライダーパネル
  • 入力フィールドにマウスオーバーすることでスライダーパネルがスライドします
  • スライダーはマウスを載せてマウスホイール（スクロール操作）をすることで値の増減を操作します
  • TimeStep: 物理シミュレーションの時間単位を変えます。増やすことで時間単位が細かく（＝動きがスローに）なります
  • Gravity: 重力の値を変えます。増やすことで重力が強くなります
  • Density: オブジェクトの密度の値を変えます。増やすことで重量が増し、慣性が強くなるため衝突の衝撃が強くなります
  • Restitution: 衝突時の力の減衰を変えます。最大だと完全反射ですが減らすと衝突するたびに力が弱くなります
  • Friction: 摩擦力を変えます。増やすと衝突時に回転がつきやすいです
  • Impulse_Decay: 衝突時の動画再生の減衰を変えます。増やすと減衰が緩くなるので、再生される時間が長くなります
  • Play_Vibrate: 衝突時の動画再生を一定期間ごとに止めて擬似的なスローモーションをかけます。数値を小さくすると一時停止の間隔が速くなり、スローになります
  • Volume_Fade: 衝突時の動画再生のボリュームの減衰を変えます。減らすと速くフェードアウトします
• 動画ボールオブジェクト
  • 衝突時の衝撃の強さにより、動画が再生されます
  • ボールをドラッグして好きな場所に移動できます
  • マウスがボールの上にある時（ドラッグ中）にマウスホイール（スクロール操作）をすることでボールの大きさが変わります
  • ボールが大きいとボリュームが大きくなります
  • 動画の再生が進むと徐々にボールが大きくなり、再生が終了するとボールは消えます
  • ※動画ストリームの問題により、再生されないまま消滅する場合もあります
• ウインドウ
  • ウインドウのサイズを変えることで、オブジェクトが飛び回るフィールドを広げることができます
  • ウインドウを画面内でドラッグして移動させると、ドラッグ距離に応じてすべてのボールに力を与える（画面を揺らす）ことができます
  • フィールドは上部の見えないところで上端が切れているので、ボールを上に大きく飛ばすと戻ってこないことがあります。

ボールが増えれば増えるほど音像としては混沌になってしまうので、多少練習してデモではもうちょっとうまく「演奏」できるかなと思っていたんですが、前のデモの流れから説明中心のデモにしてしまったんでいまいちだったかなと。みなさまにも触ってみていただけるとうれしいです。

というかブログもまる３ヶ月ほったらかしているほどライブ感のないわたくしなのですが、デスクトップのライブパフォーマンスをテーマとするイベント「DeskTopLive.as」に出演することになりました。だいじょうぶなのか。

• BOW Presents 『DeskTopLive.as』
  • http://b-o-w.jp/events/dtlive/
  • 2009年3月13日（金） 開場19:00 開演19:30～23:00頃
  • SuperDeluxe (http://super-deluxe.com)
  • 2,000円（1ドリンク付）　※当日受付のみ

しかもお題はFlash/ActionScript。カリッカリにしないと気がすまないうえにしかもそれを全部さらけ出さないと終わった気がしないことでゆうめいなみなさまが並び立つ舞台で僕が立ち向かえそうなのは紙オムツ交換のスピードくらいかと思うわけですけども、なんらかお見せしようと思います。

そもそも去年までは年賀状も出さない自堕落な正月だったんですが、去年から紙年賀状と、同じデザインでちょっと遊べるflashオンライン年賀状をつくるようにしています。ちなみに去年は こんな感じ 。今年はサーバ通信のあるflashをつくってみたかったので、タングラム（正方形を６つのピースに切り出し、形を作って遊ぶパズル）のピースをみんなで動かして酉を作ろう！　というものに。正月のヒマなときにほかの人がピースを動かしてるのがわかるのはちょっと楽しいかも！　と思ったわけですけども、そもそも正月からだと同時につなぐ人が少なすぎてあんまり成立しなかったですな。だめじゃん。

• http://www.dotimpac.to/work/nettangram/

flashによるサーバ通信

■ちなみに「同時接続でステージのパーツを動かして遊ぶ」というのは、Just Lettersというflashをみてそのの自由さ（ルールがなんにもないのに、ただ多人数がアルファベットを動かしてるだけで遊べる！）に感銘を受けたんで、自分でもつくってみたくなったものです。flashでサーバ通信が絡むものってそんな簡単に作れるのか？　と思いきや、増井 俊之さんのUnix Magazine連載「インターフェイスの街角」で触れられていたサンプルを利用したらサーバ、クライアントともあっけなく動いて拍子抜けしました。勉強になった。もちろんパフォーマンスとか同時接続人数とかを考えるとFCSとかを使うべきなのかな。

• Just Letters
  • http://web.okaygo.co.uk/apps/letters/flashcom/
• インターフェイスの街角「flashによるサーバ通信」(PDF)
  • http://pitecan.com/UnixMagazine/PDF/if0302.pdf
• 実際に使ったサーバ用スクリプト
  • http://processing.dotimpac.to/index.php?sample%2FRuby%2FnetTangramSrv

タングラムの問題（影絵）やタングラムによるアルファベットフォントなどは「日曜日のタングラム」のものを使用させていただきました。

• 日曜日のタングラム
  • http://www1.kamakuranet.ne.jp/usasan/

えーと昨年の話ですがいちおう記録しておきます。

ひょんなことで愛知万博の日本政府パビリオン公式サイト「 サイバー日本館 」の小学生むけ（？）コンテンツ「 ニッポンカン新聞 」 のflashゲーム（というほどゲームではないですが）を４つ担当してつくりました。内容的にはいちおう環境／自然をテーマにしたもの。

• 「水でてるよ！」　http://www.nippon-kan.jp/newspaper/10/p03.php
• 「かえでのたねをとばしてみよう」　http://www.nippon-kan.jp/newspaper/11/p03.php
• 「くもったガラスにえをかこう」　http://www.nippon-kan.jp/newspaper/12/p03.php
• 「ソーラーパネルを雪かきしよう」　http://www.nippon-kan.jp/newspaper/13/p03.php

ニッポンカン新聞の「さわってみよう」ってコーナーはちょうど新聞の４コマ漫画的な位置づけにあって、ステージが妙に縦長になるという制約がなかなか面白かったです。隔週更新に間に合わせるのがきつかったですが…インタラクションとしては「水でてるよ！」のコックをプレスして閉めるのとか、「くもったガラスに絵をかこう」の妙にリアルな感覚が気に入っています（どれも処理が重くて嫌がられましたけど…）。

ビデオキャプチャ映像をリアルタイムでぼかして、指でこすれるバーチャルバスミラーとか作ってみようかな。Processingなら作れるかな？

Genetic Algorithmで驚き盤の絵を進化させるflashアプリケーションです。

これは何か

• 驚き盤のパターンを半自動生成するflashアプリケーションです。GA(Genetic Algorithm)によってパターン同士を交配し子孫を残すことで、独創的でありながら均整のある美しい驚き盤が作成できます（かも）。
• aiscript(Illustrator10用スクリプト)をflashに移植し、web上で作成できるようにしました。

GA(Genetic Algorithm)

遺伝的アルゴリズムと呼ばれます。ビット列で表されたパターンを遺伝子にみたて、二人の親の遺伝子を継承（時には突然変異）する世代交代を繰り返すことで、最適解へと収束させていくアルゴリズムです。今回は最適解というのは存在しないので、完全にランダムなパターンからユーザーの好みへとすり寄せていくための手法として使用しています。

GAによるパターン交配の例

• 親になるパターンを決めます。パターンにはそのパラメータをビットで表現したコードがあります（ここでは適当です）。

• 親パターンのコード（遺伝子）を交配します。具体的には任意の部分から先のコードを入れ替えます。

  • 親1：　01011011011　→　子1：　010110”10100”
  • 親2：　00011010100　→　子2：　000110”11011”

• 遺伝子の突然変異の表現として、決まった（低い）確率でビットが反転したりします。

  • 子1：　01011010100　→　0101101010”1”

• このように交配すると、親の性質を受け継ぎながら親とは違うパターンが誕生します。

遊ぶ

• [flashのページへ

操作

• 驚き盤本体
  • ドラッグ：円盤を回転させ、動きを確認できます
  • プレス（押しっぱなし）：回っている円盤を止めます
• Genekis（円盤に配置されているオブジェクトをここではそう呼んでいきたい！）
  • ドラッグ：Genekisの配置位置変更（回転／拡大縮小）
  • ダブルクリック：必要ないGenekisを消去
• [Generate Now!]ボタン
  • クリック：円盤上のGenekisを交配し、子孫を作ります
• [Auto Rotate]ボタン
  • クリック（トグル）：円盤が自動的に回転／停止します

操作の流れ

1. flashがロードされるとGenekisがランダムに生成されます
2. 生まれたGenekisから気に入らないものを消したり、位置を変えたりします
3. 円盤をまわして動きを確認します
4. [Generate Now!]ボタンを押し、Genekisを進化させます
5. 気に入った動きができたら、プリントアウトして裏の黒い厚紙に張り、縁とスリットを切り抜きます。割りバシにピンで留めれば驚き盤の完成です
6. 鏡をスリット越しにのぞきながら円盤をまわして楽しみましょう

こまかい仕様とうまく作るコツ

• 世代交代時、子供パターンは親パターンの数だけ生成されます。それだけでパターンの最大数（デフォルトだと８）が埋まらない場合は、ランダムパターンが充填されます。
• 親を選ぶとき、ついつい奇抜なものばかり選んでしまいがちですが、違いすぎるのばかり親にしてるといつまでたってもパターンが収束しないので、ある程度目標とするパターンを軸にして考えたほうがよさそうです。
• パターンはほとんどが３制御点のベジェ曲線ですが、たまに２制御点のとか４制御点のとかが混ざるので、それらをうまく交配させてくとおもしろいかも。
• 同様に、スリットよりフレーム数の少ない（多い）パターンが混ざります。これらは実際にのぞいたとき、パターン全体が右回転したり左回転したりするパターンです。

問題点、バグ

謝辞

• GAや遺伝子コードの表現については森川幸人さんの『マッチ箱の脳　使える人工知能のお話』を参考にしました。ありがとうございます。