curveToの仕組みと1日1Wonderfl
BOW新メンバーのgupon君に聞かれたので、curveToの仕組みについてまとめてみます。
curveToの仕組み
「点Aから点Bへ向けてスタートし、点Cへ到達する曲線」をASでは
- graphics.moveTo(a.x, a.y);
- graphics.curveTo(b.x, b.y, c.x, c.y);
と書くことができます。
では、この曲線はどのようなルールで描かれているのでしょうか？
この曲線が通過する点は、以下のルールを満たします。
線分ABを t : (1-t) に内分する点をD、
線分BCを t : (1-t) に内分する点をE としたとき、
線分DEを t : (1-t) に内分する点 （ただし、0 ≦ t ≦ 1 です）
実際に見てみましょう。
上記のルールで描いた丸が、ちょうど曲線の上に重なっています。
では、この仕組みを覚えると何に役立つでしょうか。
応用1：曲線がだんだん伸びていくアニメーション
点Aから点Cまで曲線が伸びていくアニメーションを作ってみます。
曲線の始点は点Aで固定なので、moveToの引数は自明です。問題はcurveToの引数、つまり移動する点Bと点Cです。
上記のルールを見てみると、tが大きくなると点Dは点Bに近づき、点Eは点Cに近づき、点Fは点Cに近づいています。つまり、tを徐々に増加させることで移動する点Cを得ることができそうです。
残るは移動する点Bですが、こちらは点Aから出て点Bへ向かう点、ということで試しに点Dをそのまま使ってみます。
と、動いてしまいました。
（点Bの移動はちゃんと計算で導くこともできますが、つまらないのでパスします）
応用2：複雑な曲線を伸ばす
複数のcurveToからなる曲線を、上記の方法で延ばしていきます。
配列に格納したそれぞれのPointをコントロールポイントとして使い、アンカーポイントには隣り合うPointの中点を使うのが滑らかに繋げる常套手段です。
さて、これらの方法を使って二人でWonderflに投稿してみました。
僕
gupon
gupon君にはこれから毎日Wonderflに投稿してもらおうと思っています。乞うご期待！