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

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

シェイプトゥイーンの実験 - 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%の所にコントロールポイントが来るようにしています。これならあんまり考えることなく、カーブと直線の補間が可能です。

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