四角形の自由変形

この参考サイトをブクマしたのは春でした。FLASHで「あること」ができたらいいなーと思って情報集めをしたのです。しかし、コードがほとんど理解できず塩漬けにしていました。しかーし、あれからずっと勉強していたのだ。

「読める！読めるぞ！！」

私も古い秘密の名前を持っているんだよ、リュシータ。 じゃなかった、とにかく見てください。

• 左下のスライダーで画像を回転させます
• チェックボックスで線の描画を切り替えられます
• 右下のNumeral Stepperで分割する数を指定します

FLASHでは平行四辺形の変形は割と簡単にできるようになったのですが、台形への変形はそのままではできません。そこでBitmapを三角形に分割して個別に変形し再配置すると、それっぽく見えるようになります。

分割数を上げるとよりなめらかに変形できるのがわかると思います。このコードでは分割線を2Dで計算しているので歪みが出ています。ここも3Dで計算できたら完璧なんですが・・それは置いといて先に「カバーフロー」を作ろうかな。

ところで、参考にしたコードには１カ所だけ間違いがありました。

var ttb0 : Point = getPoint(tb1, tb0, v0);
var ttb1 : Point = getPoint(tb1, tb0, v1);
var ttb2 : Point = getPoint(tb3, tb2, v0);
var ttb3 : Point = getPoint(tb3, tb2, v1);

この部分、

var ttb0 : Point = getPoint(tb2, tb0, v0);
var ttb1 : Point = getPoint(tb2, tb0, v1);
var ttb2 : Point = getPoint(tb3, tb1, v0);
var ttb3 : Point = getPoint(tb3, tb1, v1);

縦方向に座標をリストするので順番が変わります。 作者さんはわかっているんでしょうけども。