curveToの仕組みと1日1Wonderfl
2009 年 11 月 16 日 月曜日 by keyBOW新メンバーの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 です）
実際に見てみましょう。
上記のルールで描いた丸が、ちょうど曲線の上に重なっています。
では、この仕組みを覚えると何に役立つでしょうか。