ベジエ曲線を学習(1)

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

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

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


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


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


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


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


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

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 がある。


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


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




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

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

ということか。


[話者A] いや、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以外。


[話者C] ふむふむ


[話者A] 次は

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

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



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


[話者A] 次は

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は連動しない。


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


[話者A] 次は

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


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


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



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

  • curve point
  • corner point
  • connector point

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

[話者A] 同じものだよ。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と呼んでいる。


ということだな。


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



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



追記:

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

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


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


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



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

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