wonderfl CHECKMATE 第2回目 (1) -元ネタ-
2009/08/23 18:11 - AS3.0
今回は Elastic Rectangle の元ネタの話。
っても、当方にいらっしゃるような Flash 使い、ActionScript 使いの方々には、別に言わんでも分かり切ってることですかねー。
一応告白しておきますと、今もときめく fladdict さんが海外留学時代に展開していた実験サイト "vas animatum" で掲載されていた作品のひとつ "jelly coke" です。
当時のサイトはすでに消失していますが、vas animatum 自体は fladdict.net 内で再現されています。 現行 URL は以下のとおり。
なお、私の方は調整が甘々で、ちょっと乱暴に振り回すと缶がグチャグチャになっちゃうのが困りもの。
なんでドクターペッパー
そんなことはどうでもよろしいが、この jelly coke を初めて見たときの衝撃たるや、実に凄まじいものでした。 どのような ActionScript を書いたらこんなことができるのんだろうか（jelly coke の実装は processing のようですが）、いつかはこんなグニャグニャした画像表現を自力で実装してみたいものだ、と生涯の目標ともなったのです。
その後、ActionScript の学習を重ねるうち、AS2 による 3D 表現に触れました。 最初は点を使ったものでしたが、次第に面を使ったものが現れ始めます。 面表現も、平行四辺形を単一に塗りつぶすものから始まったと記憶していますが、やがて画像をテクスチャーにするものも出てきて、そしてパースペクティブも実装されるようになり、平行四辺形ではなく、もっと歪んだ四角形になってきました。
その際に知ったのが以下のテクニック。
- 長方形や正方形の画像を一つの対角線を使って二つの三角形に分割する
- それぞれの三角形を独立したムービークリップにする
- 二つのムービークリップを回転や縦横スケールを変化させて歪ませる
- そしてそれらを組み合わせることで、歪んだ四角形画像にする
この三角形の変形って jelly coke の実装にもそのまま使えるじゃん、と思いながらも幾星霜。 ActionScript も 3 になり、FlashPlayer も 10 になった今、三角形を描画するコマンドが公式に導入されました。 そう。 drawTriangles というメソッドですね。 引数の指定が多少面倒くさいけど、ずいぶん簡単に三角形が表示できるようになったもんだ。
そしてこの度の CHECKMATE の課題は、その drawTriangles メソッドを使って作品を作れというもの。 これはもう jelly coke しかないでしょう、ってなワケで Elastic Rectangle が生まれた次第です。
次回は実装の話。
