曲線補間


任意の点を通過する曲線を描く場合、cubicCurveToを使うとなめらかでシンプルなカーブを描ける。

曲線補間 – wonderfl build flash online

たとえば、マウスの軌跡に合わせた線が欲しいとする。
mouseMoveなり、enterFrameなりで座標を取得することになるわけだけれども、マウスの移動が早い場合座標同士が離れてしまうので、カクカクな線になってしまう。
これをスムーズな曲線にしたい場合、何らかの方法で補完してあげる必要がある。
今までのcurveToの場合、与える座標に対してぴったり一致させる曲線を描くのが難しかった。
cubicCurveToだと、簡単ってのがここで示そうとしていること。

小さな丸が、ランダムに生成した座標。
これらを薄いグレーの直線で結んでいる。
赤や青のラインはcurveToで曲線を作っている。
青のラインは綺麗なんだけど、実際は丸を通過していない。マウスの軌跡くらいならほとんどの場合これで十分だけど。
赤のラインは、小さな丸をちゃんと通過しているけど、なめらかなカーブが作れない場合がある。工夫すればカーブ自体はなめらかになるかもしれないけど、複雑なラインになってしまうのは避けられない。
緑のラインはcubicCurveToを使ったもの。ちゃんと丸を通過している。