ベジエ曲線を学習(1)

Illustrator FreeHand

[話者Ａ] キャラ絵を描きたいのだが、ペンタブレットでは描きたくないんだ。マウスで描きたい。すると、2つの方法がある。

  1. マウスでドラッグして線を引く。線補正機能のついたペイントソフトなら なめらかな線にはなる。
  2. ベジエ曲線 bezier curve で線を引く。

1のマウスで線を引くのはやってみたが、思い通りの線が引けないし修正が面倒なのと、そのソフト・OSに依存した技術になるので、あまり習熟したくならない。
2の bezier curveしかない。
そこで bezier curve学習する。


[話者Ｃ] ベジエ曲線てどのAdobe Illustrator入門書でも最初に取りあげられてるじゃん。今までも使ってたし。あらためて入門する必要あるの？


[話者Ａ] 頭の中で思い描いた線を 鉛筆で引くみたいに、bezier curveで直接引けるようになりたいからな。詳細に知っておきたい。あと、「bezier curve学習は結局慣れだよ」みたいな言説もよく耳にするので、時間かけて、早く作業できるようになりたい。


今までに購入したIllustrator入門本もあらためて読みたいところだけど、まずは Adobeのサイトで学ぼう。入門本では説明してないハンドル操作なども説明していて良質だと思うから。


[話者Ｃ] へえ。ベジエ曲線にそんな難しい操作あったっけ？


[話者Ａ] まず用語から確認していこう。以下をみながら理解していく。

http://helpx.adobe.com/illustrator/using/drawing-basics.html （英語）
http://helpx.adobe.com/jp/illustrator/using/drawing-basics.html （日本語）


この線のことを path と呼ぶ。
ひとつのpathは、複数の segment で構成される。
ひとつのsegmentは、始点と終点に anchor point がある。


[話者Ｃ] segmentっていうのはアンカーポイント「2つ」をつなぐ線で、部分線なのか。
そして1本のグネグネのpathは、複数の直線・曲線segmentがあわさってできているということだね。


[話者Ａ] anchor pointとdirection line, direction pointという用語を使うのだな。




[話者Ｃ] anchor pointには2種類あって

smooth point
「曲線segmentと曲線segment」をつなぐ。なめらかに（カクッとではなく）つなぐ。
corner point
「直線segmentと直線segment」「曲線segmentと直線segment」をつなぐ。カクカクした感じにつなぐ。

ということか。


[話者Ａ] いや、corner pointは必ずしもカクカクしないぞ。つなげたときの角度が0°とかならカクカク見えないだろ。それに「曲線segmentと曲線segment」をつないで corner pointにもできる（上記画像のωみたいなやつ）。つまり

smooth point
「曲線segmentと曲線segment」をつなぐ。なめらかに（カクッとではなく）つなぐ。
corner point
「直線segmentと直線segment」「曲線segmentと直線segment」「曲線segmentと曲線segment」をつなぐ。カクカクしてれば corner pointだがカクカクしてない場合もある。


もっとまとめると、

smooth point
「曲線segmentと曲線segment」をつなぐ。なめらかに（カクッとではなく）つなぐ。
corner point
smooth point以外。


[話者Ｃ] ふむふむ


[話者Ａ] 次は

これは色をつけるときに出てくる用語だな。

  • オブジェクトの輪郭線を「stroke 線」と呼ぶ。
  • オブジェクトの面を「fill 塗り」と呼ぶ。



[話者Ｃ] 日本語版は「ストローク」「フィル」じゃなくて「線」「塗り」と呼ぶんだね。
まあ「ストローク」というカタカナよりは「線」のほうがわかりやすいけど。


[話者Ａ] 次は

segmentまたはanchor pointを選択すると、direction handleが表示される。

direction handle 方向ハンドル
＝direction line 方向線 ＋ direction point 方向点

ということだな。


そして、

smooth point
2本のdirection lineは角度が同じ。つまり1本の一直線に見える。片方を変更すると、2本とも連動して変わる。
corner point
2本のdirection lineの角度が違う。ひとつ変更しても、ほかのdirection lineは連動しない。


[話者Ｃ] smooth pointとcorner pointの真の違いはここだったのか。
ハンドル操作するときに、2本まるごと操作できるのがsmooth point。1本ごとに操作するのがcorner pointだね。


[話者Ａ] 次は

directoin lineは曲線の半径に対して垂直‥‥これは心にとめておくだろ。


[話者Ｃ] direction lineの長さで曲線の盛り上がり方が違う‥‥なるほど。


[話者Ａ] さて、ここまで学んできたのはIllustratorの用語だ。
FreeHandではどうなっているか、見てみよう。



ハンドルという言葉は特に定義せずに出てきてるな。
で、FreeHandのanchor pointは3種類あるという。

  • curve point
  • corner point
  • connector point

[話者Ｃ] connector pointが新しく現れた‥‥？　smooth pointはどこにいった？
ねえ、IllustratorとFreeHandのベジエ曲線て違うものなの？

[話者Ａ] 同じものだよ。wikipedia:ベジェ曲線に定義されている「3次ベジェ曲線」は数学的な定義だから、ソフトによらず同じだ。

  • Illustratorの smooth pointは、FreeHandでは curve pointと呼ぶ。
  • Illustratorでは
    「直線segmentと直線segment」「曲線segmentと曲線segment」をつなぐのを corner pointと呼んでいて、
    「曲線segmentと直線segment」をつなぐのも corner pointと呼んでいた。
    FreeHandでは「曲線segmentと直線segment」のはcorner pointではなく connector pointと呼んでいる。

ポイントの性質IllustratorFreeHand
ハンドル2本が連動するsmooth pointcurve point
ハンドル1本ごとに操作する（直線と直線、曲線と曲線をつなぐ）corner pointcorner point
ハンドル1本ごとに操作する（曲線と直線をつなぐ）同上connector point

ということだな。


FreeHandのPenツールで試してみたけど、この connector pointって必要か‥‥？
corner pointをconnector pointにしても、操作もpathも変わらない。anchor point形状が三角表示になるのが違いだ。これ意味あるのかな？



[話者Ｃ] Illustratorのほうが整理されてる感じだね。
Illustratorのcorner pointとsmooth pointはハンドル操作の点で違うし。



追記：

FreeHandのconnector pointが以下で説明されています。

「斜め」の直線から曲線へスムーズにつながるということですね。「水平・垂直」の直線からしか試していなかったので、気付かなかった‥‥。


ちなみにIllustratorで同じことをするには、以下のスクリプトを使えばいいようです。


続き: [Illustrator][FreeHand] ベジエ曲線を学習(2)



Illustrator ベジェ曲線 トレーニングブック CS/CS2/CS3対応

Illustrator ベジェ曲線 トレーニングブック CS/CS2/CS3対応