シェイプトゥイーンの実験コードを書いてみた。

早速ですが、シェイプトゥイーンをスクリプトでというものを作ってみました。最適化まではやっていないので、ちょっと重たいかもしれませんが、そこそこに動いています。

シェイプトゥイーンの実験 - wonderfl build flash online

考え方としては、パスをIllustratorでいう複合パスという概念で扱っています。FlashのGraphicsPathは、閉じようが、閉じまいが、移動しようが、連続してようが、あくまで１つのパスです。しかしモーフィングにおいては、前後でマッチングさせる単位が分からなくなるため、閉じたパスの集合として管理しています。

前後のパスの補間は、閉じたパスをお互いに列挙し、

1. 開始のパスがあって終了のパスがない場合は、開始のパスのバウンズの中心を基準にする
2. 終了のパスがあって開始のパスがない場合は、終了のパスのバウンズの中心を基準にする
3. 片方しかない場合は、基準点に同じ数のセグメントのパスがあるもとのみなす
4. 開始終了両方とも、セグメントの数が同じ場合は特に加工しない
5. セグメント数が違う場合は、セグメント間の距離の割合が、両方のパスで同じになるようにセグメントを分割する

という感じです。

５はもうちょっと具体的に言うと、パスの距離を１としたときに、開始パスのアンカーポイントの位置が[0, 0.2, 0.4, 0.6, 0.8]とあって、終了パスのポイントの位置が[0, 0.1, 0.5, 0.9]とある場合、両方のパスのアンカーポイントの場所が、それぞれ[0, 0.1, 0.2, 0.4, 0.5, 0.6, 0.8, 0.9]になるように調整しています。Illustratorでいうアンカーポイントの追加になるます。

１～３は、そもそもパスがないですから、ある方の中心部分にパスが埋れているとみなすようにしています。ある方のパス、ない方のパスで、それぞれ同じ数のセグメントになるように、中心の座標のみを使ってmoveTo/curveToを繰り返します。

あとは、直線もすべてカーブで扱うようにしています。直線の場合は、始点と終点の50%の所にコントロールポイントが来るようにしています。これならあんまり考えることなく、カーブと直線の補間が可能です。

まだ作りかけで、線や塗にも対応させようと思います。

開発再開

アニメーションライブラリの開発を再開しました。
ずっと仕事が忙しかったので、殆ど何もできずにいましたが、
最近やっと落ち着いてきました。

アニメーションライブラリ自体の開発はほぼ終わってるのですが、
テストやチュートリアルの作成が全然というところです。

ところで、シェイプトゥイーンをスクリプトで書けるというのは需要があるのでしょうか。
まだ、具体的に練ってはいないですが、

var path1:Path = new Path();
path1.curveTo(...);
path1.curveTo(...);
path1.curveTo(...);

var path2:Path = new Path();path2.curveTo(...);
path2.curveTo(...);
path2.curveTo(...);

var path3:Path = Path.interpolation(path1, path2, 0.5);

という感じで書けるとパスのモーフィングができるという感じで考えています。

直線は開始点と終了点の中間に制御点が置かれているカーブで表現して、
あとは全てのセグメントの制御点、始点、終点の位置を、
開始と終了の間で補間すれば表現できるのではと思っています。

ただし、開始と終了でパスの数が合わない場合に、どうやってパスの数を水増しするかが問題です。
数学が苦手なのでこういうのは辛いですね。