|
|
|
 |
 |
 |
 |
 |
|
||||||||
|
||||||||
|
■Twitter: @FumioNonaka / Facebook Page: CreateJS / Away3D
Creators MeetUp パスにこだわる与えられた座標から軌跡などのパスを描くとき、多くの場合間隔を小さくとれば直線で結んでも差支えない。けれど、座標の間隔が大きかったり、あるいは向きが激しく変わることもある。そのようなとき、滑らかなパスを描くにはどうしたらよいか。ベジエ曲線の描き方と、座標の結び方についてご説明したい。 マウスポインタの軌跡に沿って滑らかな曲線を描く以下のサンプル001は、gihyo.jp連載「HTML5のCanvasでつくるダイナミックな表現―CreateJSを使う」第23回「マウスポインタの軌跡を滑らかな線で描きながら消す」から2回にわたって解説した[*1]。このコードでも後述と同じ考え方でパスを結んでいる。 サンプル001■EaselJS 0.8.1: Smooth Line tuned なお、このレジュメは、2015年1月17日土曜日に催された第24回Creators Meetupで務めた高座「パスにこだわる」の参加者向けとして書いた。当日のYouTube録画をつぎに掲げる。
01 ベジエ曲線とその描き方座標を結んで曲線を描くには、ベジエ曲線が用いられる。ベジエ曲線には、「2次ベジエ」と「3次ベジエ」がある(図001)。
図001■2次ベジエと3次ベジエの曲線のつくり 2次ベジエで円を描くには、セグメントを8つくらいに分けることになる(サンプル002)。 サンプル002■Drawing circle with Graphics.quadraticCurveTo() method ベジエ曲線は、アンカーポイントとコントロールポイントを結ぶハンドルが曲線の接線になる。2次ベジエではふたつのアンカーポイントがひとつのコントロールポイントを共有する(図002)。CreateJSを使った2次ベジエ曲線の描き方については、「ドラッグの軌跡を滑らかな曲線で描く」の「2次ベジエ曲線を描く」参照。 図002■コントロールポイントとふたつのアンカーポイントを結ぶハンドルが曲線の接線になる 02 座標から曲線のパスを描く試みに、直線で結ぶとジグザグな座標(図003)を、滑らかな曲線で示すにはどうしたらよいか考えたい(サンプル003)。 サンプル003■Plotting points by several types of lines 図003■直線で結ぶとジグザグの座標を滑らかな曲線で表したい 座標を順番にアンカーポイントとコントロールポイントに単純に割当てると、コントロールポイントの側は曲線になる。しかし、アンカーポイントが不連続につながってしまう(図004)。 図004■ひとつおきにコントロールポイントを割当てたのではジグザグの座標のアンカーポイントは不連続につながる そこで、考え方を変えて、座標はすべてコントロールポイントとする。そして、アンカーポイントはふたつの座標の中点をとって結ぶ(図005)。これで、座標の軌跡が滑らかな曲線で示せた。 図005■座標はコントロールポイントとして中点をアンカーポイントに定める このやり方は、座標の上に線をとおそうとはしない。軌跡が表せるような曲線を描くという考え方だ。統計でデータ(標本)の傾向を示す回帰直線を引くのと似ている(図006)。 図006■統計学の線形回帰で得られた回帰直線 03 軌跡の座標を滑らかな曲線で表す軌跡の座標を滑らかな曲線で表すコードは、つぎのような手順で書く(図007)。
図007■前の中点と今の中点を前の座標がコントロールポイントとなる曲線で結ぶ 作成者: 野中文雄 Copyright © 2001-2015 Fumio Nonaka. All rights reserved. |
|||||||
