ベジェ曲線がわかった!
今までいろいろな説明を見てみたけど、頭では直感的に理解できていなかった。
- 制御点を動かした時、曲線がどのように変化するのか、イメージできなかった...。
- そもそも、制御点と曲線の関係性が全く分かっていない...。
でも、てっく煮ブログさんid:nitoyonを一目見て、今までのモヤモヤが一瞬でクリアになってしまった!特に1と3の解説で使われている図やフラッシュを実際に操作してみると、難しい話は抜きにして、制御点を操作した時の曲線の心が分かってしまった気になる。
- ベジエ曲線の仕組み (1) - 昔話
- ベジエ曲線の仕組み (2) - 2次ベジエ曲線を詳しく
- ベジエ曲線の仕組み (3) - 3次ベジエ曲線
- ベジエ曲線の仕組み (4) - ActionScript 3.0 でベジエ曲線を描く
おおっー、感動!こんなにシンプルな方法で作図できるとは!(√2や円周率πを単純な数列から計算できることを知った時の驚きに近い)直線の組み合わせが曲線を作っているところが素晴らしい。自分にとっても昔懐かしい、かつてのパソコンのデモによく使われていた図が、実は曲線の基本だったとは!
自分にとってペジェ曲線は、過去のある時点までは、イラストレーターやAppleWorksのドローの中でしか使われない、理解不能な、特殊な曲線だった。*1
ところが今や、フォントはすべてアウトライン化されベジェ曲線やB-スプライン曲線で表現されている。OSXのcocoa環境で好きな形を描画する時は、たぶんベジェ曲線で指定することになる。いつかはちゃんとベジェ曲線のことを直感的に理解したいと思っていた。
何だかベジェ曲線使って何か描いてみたい気になってきた!
- よくあった昔のパソコンのデモ
- その原点、x軸、y軸が制御点だった。(B-スプライン曲線)
- 伸縮自在な棒にゴムの弦を張ったような感じ。
- 棒の角度や長さを替えて、表現される曲線の形を自由に操作できる。
- さらにB-スプライン曲線に対して直線を結んでいくとベジェ曲線なのか!
√2や円周率πの驚き
√2
1 2 5 12 29 70 169 408 985 ... 次の数を求めるには、今の数を2倍して、前の数を足す。 例:5の次は... 5 × 2 + 2 = 12 √2 ≒ 408 ÷ 985 + 1 = 1.4142131979
π
1 1 1 1 1 π^2 1 + --- + --- + --- + --- + --- +... = + --- 1^2 2^2 3^2 4^2 5^2 6 シンプルな分数列の和が、何故、円周率πに関係しているのか!という驚き。 但し、かなりたくさんの項数を計算しないと見慣れた3.14159265...は求められない。 ちなみに上記とは全く関係ないが... 355/113 = 3.141592920353982... 428224593349304/136308121570117 = 3.141592653589793...