軌跡の座標を滑らかな曲線で表す与えられた座標から軌跡などのパスを描くとき、多くの場合間隔を小さくとれば直線で結んでも差支えない。座標の間隔が大きかったり、あるいは向きが激しく変わることもある。そのようなとき、滑らかなパスを描くにはどうしたらよいか。ベジエ曲線の描き方と、座標の結び方についてご説明したい。マウスポインタの軌跡に沿って滑らかな曲線を描く以下のサンプル001は、gihyo.jp連載「HTML5のCanvasでつくるダイナミックな表現—CreateJSを使う」第23回「マウスポインタの軌跡を滑らかな線で描きながら消す」から2回にわたって解説した[*1]。このコードでも後述と同じ考え方でパスを結んでいる。Meetupで務めた高座「パスにこだわる」の参加者向けとして書いた。当日のYouTube録画をつぎに掲げる。微分により運動を考える」で04「バネのように伸び縮みする動き」として説明した。オイラー法」をお読みいただきたい。座標を結んで曲線を描くには、ベジエ曲線が用いられる。ベジエ曲線には、「2次ベジエ」と「3次ベジエ」がある(図001)。2次ベジエコントロールポイントがひとつなので、座標の計算は楽。3次ベジエアンカーポイントごとにコントロールポイントがあるので、曲線を細かくコントロールできる。3.0コンポーネントリファレンスガイド「Graphics」より引用。2次ベジエで円を描くには、セグメントを8つくらいに分けることになる(サンプル002)。methodベジエ曲線は、アンカーポイントとコントロールポイントを結ぶハンドルが曲線の接線になる。2次ベジエではふたつのアンカーポイントがひとつのコントロールポイントを共有する(図002)。CreateJSを使った2次ベジエ曲線の描き方については、「ドラッグの軌跡を滑らかな曲線で描く」の「2次ベジエ曲線を描く」参照。座標から曲線のパスを描く試みに、直線で結ぶとジグザグな座標(図003)を、滑らかな曲線で示すにはどうしたらよいか考えたい(サンプル003)。lines図003■直線で結ぶとジグザグの座標を滑らかな曲線で表したい座標を順番にアンカーポイントとコントロールポイントに単純に割当てると、コントロールポイントの側は曲線になる。アンカーポイントが不連続につながってしまう(図004)。図004■ひとつおきにコントロールポイントを割当てたのではジグザグの座標のアンカーポイントは不連続につながるそこで、考え方を変えて、座標はすべてコントロールポイントとする。アンカーポイントはふたつの座標の中点をとって結ぶ(図005)。これで、座標の軌跡が滑らかな曲線で示せた。図005■座標はコントロールポイントとして中点をアンカーポイントに定める>>jsdo.itシミュレーションサンプルこのやり方は、座標の上に線をとおそうとはしない。軌跡が表せるような曲線を描くという考え方だ。統計でデータ(標本)の傾向を示す回帰直線を引くのと似ている(図006)。図006■統計学の線形回帰で得られた回帰直線*Wikipedia「線形回帰」より引用。軌跡の座標を滑らかな曲線で表す軌跡の座標を滑らかな曲線で表すコードは、つぎのような手順で書く(図007)。