Ad Network

あわせて読みたい

  • あわせて読みたい

« 習作UI: 初めてのFlash その4 | Main | ネットの時代には「知識量・記憶力」よりは「適応力・応用力」の方がずっと大切 »

習作UI: 縁日の金魚を再現してみた

 Flashでプログラムを書く機会があったら一度は作らねばと思っていたのが、鳥や魚の群れ(flock)のシミュレーション。そこでカスタムクラスのプログラミングの練習も兼ねて作ったのがこれ。アルゴリズムそのものは、良く知られた(1)仲間と同じ方向に泳ごうとする気持ち、(2)仲間と一緒に泳ごうとする気持ち、(3)衝突を避ける気持ち、をそれぞれの魚に持たせて泳ぐ方向を少しずつ変化させる、というものである。

 プログラムはそれほど時間をかけずに作ることができたのだが、苦労したのがそういった「気持ち」の部分を表現するのに必用な具体的なパラメーター(どのくらい離れた仲間まで認識しているか、どのくらいの距離までの接近を許すか、など)を見つけ出す部分。金魚すくいの水槽の中の金魚の動きをちょうど良い感じで再現するためのパラメーターを見つけるのにかなりの試行錯誤が必要であった。

 しかし、これを作って思ったのは、Flashの開発環境は水と油で作ったドレッシングのようだということ。デザイナー向けの機能(keyframeとtweenを使ってmovie clipを作る部分)と、プログラマー向けの機能(ActionScriptを使ってインタラクティビティを実現する部分)の両方をキチンと使いこなすのは結構難しい(この例では、個々の金魚の尾びれの動きはmovie clipを使って実現しているが、泳ぎの方向の決定とフレームごとの位置の移動はActionScriptを使って実現している)。

 本来なら、こういったインタラクティビティの部分こそUIデザイナー自身がデザインしながら作るべきなのだが、この開発環境だとその部分はプログラマーに頼らねばならないのが残念なところだ。まあ、そのおかげで私みたいな「UIプログラマー」が職にありつけるのだから個人的には悪くないのだが、やはり開発ツールを作る仕事をしている私としては、「デザイナー自身がプログラムを書かずにインタラクティブなアプリケーションを作れる環境を提供せねば」とつくづく思ったしだいである。

 ちなみに、金魚を実際にすくうことは出来ないが、ちょっとしたお遊びインタラクティビティの機能も追加してみたので、マウスを水槽の上で動かしてみて欲しい。

TrackBack

TrackBack URL for this entry:
http://www.typepad.com/services/trackback/6a00d8341c4f9853ef00d83548b0f853ef

Listed below are links to weblogs that reference 習作UI: 縁日の金魚を再現してみた:

» [プログラミング]親愛なる開発者へのプチ・リバースエンジニアリング from DELPHIER@はてな
http://satoshi.blogs.com/life/2007/05/ui.html これを見て、どうやって作るんだろう?と思う人は多いはず。 残念ながら、このページからは検索結果に直結するキーワードがない。 唯一「google:flock」というキーワードが与えられているが、 これはこの実装の背景となる技... [Read More]

» 暑いときは金魚UIでも見て涼もうぜ from Another Shinjuku Confidential
http://satoshi.blogs.com/life/2007/05/u... [Read More]

» 金魚すくい from naotakegymnasium::mt
しばらく不調だったので一切blog見てなかっけど、satoshiさんのこれみて... [Read More]

» 群れのセオリー from Tocotonistの日記(晴れのち快晴)
”群れのセオリー”, NATIONAL GEOGRAPHIC 日本語版 200707, p.114-135 を読みました. 鳥,魚,ミツバチ,アリなどの生物は個体としては本当にシンプルなアルゴリズムで動いているが,群れでは協調している.そんな記事でした. 手狭になった巣から新しい住処を探すときに,... [Read More]

Comments

Meigara

これはおもしろいですねぇ! ぜひ、餌をあげてみたいです。追いかけるだけでなく。

satoshi

Meigaraさん、さっそくコメントありがとうございます。餌ですか…考えて見ますね。手をたたくとよってくるとか^^;

ひろし

これは美しいですね!しばらくみとれてしまいました。

かわうそ

これは素晴しい。色のバリエーションを増やしたり影をつけたりするだけで、さらに見栄えするのではないでしょうか。

Ken

いいですね。清涼感があります。

ちょっと違いますが、わたしのブログで、海中散歩的な3DFlash(へのリンク)を紹介したことがあります。
http://fxsystemtrader.blogspot.com/2007/05/flash-http-www.html

みっきぃ

デスクトップや携帯の画面で泳がせたいですね。

hg

かなり活発な金魚ですね。
大部分がほとんど動かなかったりその場で停止してたりしたらお祭りの金魚っぽいかもしれませんw

ガなー

素晴らしい。どれぐらい時間かかりましたか?

satoshi

 プログラムそのものは3~4時間ぐらいで作りました。そこから、金魚のデザインも含めて色々なパラメーターの調整にさらに4時間ぐらいですか。上にも書きましたが、プログラムそのものはそれほど難しくなかったんですが、「金魚に見える」ようにするのにとても苦労しました。

F

魚の気持ちをプログラムで表現とは深いですね。とても面白いです。
私も機会があったらモデリングの勉強がてら作ってみたいですね。

dasign

はじめましてです。
dasignと申します。

satoshiさんの習作を参考にさせていただきました!
http://d.hatena.ne.jp/dasign/20081211
事後報告ですみません><

Post a comment

This weblog only allows comments from registered users. To comment, please Sign In.