砂のアスキーアート

もう多分10年くらい前なんだけど「砂」というアプリケーションが好きで、よく遊んでた・・・というか眺めてた。

その「砂」のiPhone版が出たとか言うのをたまたま目にして説明文読んでたら、あれって実はすごく簡単なアルゴリズムで動いてたらしい。

http://ccnet.dip.jp/sand/#HowToMove

• 下に何もなければ下に動く
• 右と下に障害物があって左に何もなければ左に動く
• 左と下に障害物があって右に何もなければ右に動く
• 上のみがあいている場合は一定の確率で上に動く
• 左右に何もなくて下に障害物があるときは右か左か それとも動かないかのどれかを適当に選ぶ

これならJavaScriptでもできるじゃん、と思ってやってみた。ただし、そのままJSに移すだけだといまいち面白みがなかったので、ちょうど開催中だったHTML5コンテストの「アスキーアートカテゴリ」に無理やり絡めた。（しかしHTMLとアスキーアートを組み合わせるって誰がどうやって思いついたんだろ・・・

http://physicsketch.appspot.com/sandjs/index.html

テキストエリアに好きなアスキーアートをコピペして、「Set」ってボタンを押すと砂のアスキーアートができるのでよかったらちょっと試してみてください。

砂のマミ先輩

さて、さっきのはcanvasにfillTextしたのをgetImageDataで取ってきたわけだけど、fillTextの代わりにdrawImageを使えば任意の画像を砂にできるはず。試しにやってみたら面白かったのでサクッとAppEngineで公開してみた。

http://sandfalljs.appspot.com/

画像をアップロードして砂の元に使うとこんな感じになる。ご存じない方のために紹介しておくと、サンシャインは砂の超人ですね。

アップロードした画像を砂の元に使う以外にも、次のようなパラメータが指定可能。

sandfalljs.appspot.com/?s=[砂にする画像のキー]&w=[壁にする画像のキー]&sc=[砂の色]&wc=[壁の色]&th=[閾値(0-255)] 

むさくるしいサンシャインなんて見ても楽しくないと思うので、皆様が暖かく幸せな気持ちで一杯になってもらえるよう上記のパラメータを駆使してマミ先輩を作ってみた。なかなかいい感じになったと思う。

ただ、思いの外ショッキングな絵面になってしまったので上のマミ先輩はただの画像。動くところを見てみたい人は下のリンクをどうぞ。
http://bit.ly/e6fJHV