習作UI: 縁日の金魚を再現してみた
2007.05.26
Flashでプログラムを書く機会があったら一度は作らねばと思っていたのが、鳥や魚の群れ(flock)のシミュレーション。そこでカスタムクラスのプログラミングの練習も兼ねて作ったのがこれ。アルゴリズムそのものは、良く知られた(1)仲間と同じ方向に泳ごうとする気持ち、(2)仲間と一緒に泳ごうとする気持ち、(3)衝突を避ける気持ち、をそれぞれの魚に持たせて泳ぐ方向を少しずつ変化させる、というものである。
プログラムはそれほど時間をかけずに作ることができたのだが、苦労したのがそういった「気持ち」の部分を表現するのに必用な具体的なパラメーター(どのくらい離れた仲間まで認識しているか、どのくらいの距離までの接近を許すか、など)を見つけ出す部分。金魚すくいの水槽の中の金魚の動きをちょうど良い感じで再現するためのパラメーターを見つけるのにかなりの試行錯誤が必要であった。
しかし、これを作って思ったのは、Flashの開発環境は水と油で作ったドレッシングのようだということ。デザイナー向けの機能(keyframeとtweenを使ってmovie clipを作る部分)と、プログラマー向けの機能(ActionScriptを使ってインタラクティビティを実現する部分)の両方をキチンと使いこなすのは結構難しい(この例では、個々の金魚の尾びれの動きはmovie clipを使って実現しているが、泳ぎの方向の決定とフレームごとの位置の移動はActionScriptを使って実現している)。
本来なら、こういったインタラクティビティの部分こそUIデザイナー自身がデザインしながら作るべきなのだが、この開発環境だとその部分はプログラマーに頼らねばならないのが残念なところだ。まあ、そのおかげで私みたいな「UIプログラマー」が職にありつけるのだから個人的には悪くないのだが、やはり開発ツールを作る仕事をしている私としては、「デザイナー自身がプログラムを書かずにインタラクティブなアプリケーションを作れる環境を提供せねば」とつくづく思ったしだいである。
ちなみに、金魚を実際にすくうことは出来ないが、ちょっとしたお遊びインタラクティビティの機能も追加してみたので、マウスを水槽の上で動かしてみて欲しい。
これはおもしろいですねぇ! ぜひ、餌をあげてみたいです。追いかけるだけでなく。
Posted by: Meigara | 2007.05.26 at 06:20
Meigaraさん、さっそくコメントありがとうございます。餌ですか…考えて見ますね。手をたたくとよってくるとか^^;
Posted by: satoshi | 2007.05.26 at 06:49
これは美しいですね!しばらくみとれてしまいました。
Posted by: ひろし | 2007.05.26 at 08:11
これは素晴しい。色のバリエーションを増やしたり影をつけたりするだけで、さらに見栄えするのではないでしょうか。
Posted by: かわうそ | 2007.05.26 at 08:57
いいですね。清涼感があります。
ちょっと違いますが、わたしのブログで、海中散歩的な3DFlash(へのリンク)を紹介したことがあります。
http://fxsystemtrader.blogspot.com/2007/05/flash-http-www.html
Posted by: Ken | 2007.05.26 at 14:56
デスクトップや携帯の画面で泳がせたいですね。
Posted by: みっきぃ | 2007.05.27 at 01:14
かなり活発な金魚ですね。
大部分がほとんど動かなかったりその場で停止してたりしたらお祭りの金魚っぽいかもしれませんw
Posted by: hg | 2007.05.27 at 19:00
素晴らしい。どれぐらい時間かかりましたか?
Posted by: ガなー | 2007.05.30 at 00:13
プログラムそのものは3~4時間ぐらいで作りました。そこから、金魚のデザインも含めて色々なパラメーターの調整にさらに4時間ぐらいですか。上にも書きましたが、プログラムそのものはそれほど難しくなかったんですが、「金魚に見える」ようにするのにとても苦労しました。
Posted by: satoshi | 2007.05.30 at 05:20
魚の気持ちをプログラムで表現とは深いですね。とても面白いです。
私も機会があったらモデリングの勉強がてら作ってみたいですね。
Posted by: F | 2007.05.31 at 02:10
はじめましてです。
dasignと申します。
satoshiさんの習作を参考にさせていただきました!
http://d.hatena.ne.jp/dasign/20081211
事後報告ですみません><
Posted by: dasign | 2008.12.10 at 20:54