octech このページをアンテナに追加 RSSフィード

2008-09-30 ぐるぐる

[][][]AS3でもエッシャーっぽい絵を出してみた 16:17 AS3でもエッシャーっぽい絵を出してみたを含むブックマーク

エッシャーっぽい絵づくりアルゴリズム

とても面白いアルゴリズムを実装している人がいた。

元になっている論文はこちららしい。

これがpythonで実装されているので、AS3に移植してみた。

移植は難しくなかった

論文を見ても正直、自分で理解をすることは難しい。考えた仕組みを論文にしてくれる人がいて、また、それを読みpythonで実装しソースまで公開してくれている人がいるのはとてもうれしい。

f:id:octech:20080930160840j:image

読みやすいソースなので、簡単にできたので、自分のAS3ソースも公開しよう。

Spark projectに登録してみた

どうせ公開するなら、思いっきり!と思い立って、Spark projectコミットしてみた。(yossyさん、迅速なコミッタ登録ありがとうございました)

http://www.libspark.org/wiki/octech/Escher

使い方のコツ

EscherImageコンストラクタに渡している R1, R2というパラメータ をうまく指定しないと、画像の外側が表示されてしまう。これらのパラメータの意味を理解しないと、「簡単にぐるぐるにできる」とは言えない。(上記サンプルの場合、手で調整しています)論文の方を読んでみればヒントがあるかもしれないので、今度読んでみよう。

エッシャー

ちなみにこちらは「M.C.エッシャーの展覧会で限定公開・発売された3DCGアニメーション作品」らしい。

M.C.エッシャー CONTRAST [DVD]

M.C.エッシャー CONTRAST [DVD]

ちょっと見てみたい。

2008-10-03の更新(その1)

zahirさんのエントリに触発されて、高速化を試みました。(というか、元々無駄が多いコードだったのでそれを見直しました。)

2008-10-03の更新(その2)

id:rezooさんのコメントのおかげで、R1, R2のパラメータの意味がはっきり分かったので、それらを変更するメソッドを実装しました。

デモswfではマウスカーソルのXY座標それぞれをR1, R2に対応させてみたり、ぐるぐるアニメーションさせて、どのくらい処理速度が重いのか分かるようにしました。重いですね。。

rezoorezoo 2008/10/03 01:41 こんにちは。いやぁーわざわざAS3で実装していただけるとは思ってもいませんでした。これでしたらもう少しソースコードを丁寧に書いておいたほうが良かったです…

> R1, R2というパラメータ をうまく指定しないと、画像の外側が表示されてしまう。これらのパラメータの意味を理解しないと、「簡単にぐるぐるにできる」とは言えない。
もう知っていましたらすみませんが、このパラメータは変形に用いる円環領域の内径,外径(単位はpx)を表しています。「円環」というのは要はドーナツ状のリングのことです。論文のFigure 2を参照すれば大体感覚が掴めるとおもいます。この領域の中のピクセルが変換に使われます。

たとえば、元の画像の大きさが640x480[px]の場合、指定できるr2の最大値は240となります。r1は0からr2の間でしたらなんでも構いませんが、できるだけr2に近づけるとよりぐるぐるした絵が生成されるはずです。

octechoctech 2008/10/03 19:02 rezooさん!
pythonソースは読みやすかったですよ!意味が分かる感じに書かれていたので、すらすらと移植できました。
そしてr1, r2パラメータの説明ありがとうございます!なんとなくグルグルの半径かな?とは思っていたのですが、これではっきり分かりました。
いろいろ遊んでみます!