graphics.drawGraphicsData のための回転対称による美的表現の模索
2009/06/17 22:03 - AS3.0
先だって学習した、Flash Player 10 から導入された graphics.drawGraphicsData を使って、何か作品っぽいもんができないかと、いろいろ試してみました。
っても、昔作ったことある作品を ActionScript 3.0 でリライトしたもんなんですけどね。 当時は AS 2 で組んだんですが、いやもうめんどくさくてめんどくさくて往生したもんです。 がしかし、ActionScript 3.0 ならスイスイと書けましたよ。ビバ！ AS 3.0！
ま、それはともかく今回の作品の話。 まずは現物の表示から。
このプログラムのコードは一体何をしているのかというと、まぁ極端に言えば円の描画です。 で、円周を描く線が複雑にクネクネ曲がっていると。
まず大まかに円を正何角形に分割するか、その回転対称軸数を決めます。
回転対称軸数が決まると、軸と軸との間の角度（以下「単位角度」）が決まりますね。 例えば回転対称軸数が6の場合（正6角形）の場合、単位角度は 360÷6 = 60度になります。
次に決めるのはその単位角度内に幾つノードを配置するかを決めます。
これは何をしているのかというと、先ほど正6角形にしましたが、それをさらに細かい正多角形に再構成するわけです。
例えばノード数を2つにした場合は正12角形になりますし、ノード数を3つにした場合は正18角形になります。 で、このノードを法則性に基づいたトゥイーンをさせることで上のような作品になるわけです。
以下、「具体事例」として、正6角形の単位角度にノードを3つ配置した、正18角形の場合について説明します。
まず、どうやって全ノードを規則正しくトゥイーンさせているのかという話。
Tweener でトゥイーンさせているのは、1つの単位角度内に置かれたノードだけです。つまり「具体事例」では Tweener の対象になっているノードは3個だけ。
では、残りの15個のノードが動く仕組みは。
Tweener でトゥイーンさせたノードの座標値を Matrix.rotate で回転させています。つまりアフィン変換で座標値を計算し、それを反映させているわけです。
繰り返しますが、「具体事例」の場合、Tweener 対象のノードは3つ。 その3ノードを仮に c0_0（第1ノード）、c1_0（第2ノード）、c2_0（第3ノード） とします。
まず、c0_0 の座標値を Matrix で単位角度（60度）分回転させ、その値を2番目の単位角度の第1ノードに割り当てます（これを c0_1 とします）。
c0_1 の座標値をさらに単位角度（60度）分回転させます。先ほどの60度回転に加えて60度回転しているので、c0_0 からは120度回転していることになります。この値は3番目の単位角度の第1ノードに割り当てます（これを c0_2 とします）。以下同様の処理を順次おこなっていくと、全ての単位角度の第1ノード座標が定まります。
各単位角度の第2ノードについては c1 に対して、第3ノードについては c2 に対して上記と同様の処理を施せば、すべてのノードの座標が定まります。
で、drawGraphicsData の構成要素である GraphicsPath の data には c0_0、c1_0、c2_0、c0_1、c1_1、c2_1、c0_2、c1_2、c2_2 ……という順番で座標値を格納していきます。
この Matrix による全ノード座標決定処理を Tweener.addTween の onUpdata のタイミングでおこない、直後に graphics.drawGraphicsData で描画するという寸法です。
今まで上のようなビジュアル描画をしたかったら、lineTo や curveTo を、必要回数だけ記述したり、ループで回したりしていましたが、drawGraphicsData 使うと実に楽チンですねー。ステキ！
