ベジェ曲線について勉強してみました。

画像を扱うプログラムを書いているのですが、文字を曲線に沿って配置したいな~なんて思いまして、曲線について勉強しております。

パソコンで曲線を扱うとなれば、なんと言っても「ベジェ曲線」が有名です。デザイン業界標準のグラフィックソフトといえる、あの Adobe Illustarator もやはりベジェ曲線を採用しています。

ベジェ曲線を描画する方法

ひと口にベジェ曲線といっても、いくつか種類があるのですが、ここでは Illustrator と同じ、「3次ベジェ曲線」についてお勉強してみたいと思います。

ベジェ曲線は、始点、終点、さらに2つの制御点を加えた、4つの点を1セットとして構成されます。

言葉で説明するのは難しいので、図解説明しちゃいますね。

b01

P0:始点 P1:制御点 P2:制御点 P3:終点

まず、それぞれの点を順に結びます。

b02

一例として、各線分の25%の位置に点を置き、それぞれP4、P5、P6とします。

b03

さらに、P4、P5、P6を線でつなぎます。

b04

この線分も同じく25%の部分に点を置き、P7、P8とします。

b05

P7とP8を線でつなぎます。

b06

この線も25%のところに点を置き、P9とします。

b07

この点がベジェ曲線上の点になります。

25%のポイントを例に説明しましたが、0%から100%まで変化させながら同じ方法でP9をプロットしていくと、以下のような曲線が出来上がります。

b08

これがベジェ曲線の作図方法です。

つまり、4つの点の座標データを元に、ゴリゴリと計算すれば曲線を近似できるということです。

はるか昔に、中学か高校で勉強したはずの代数幾何や微分積分を駆使すれば、ベジェ曲線の長さや曲線上の座標、接線なども計算できます。その結果に合わせて文字を描画すれば、曲線に沿って文字を配置するという目標が達成できそうです。

というか、出来ました。
以下の画像は、プログラム上で自動生成したものです。

あ、ちなみに左下のゴム印の写真も、プログラム上で合成したものです。
ゴム印を捺印した際のカスレた感じも、特殊な画像処理を施すことによって再現してみましたよ。

このプログラムは、カッコいいゴム印を購入できる通販サイトで使用するのですが、このサイトでは文字を入力すると即座に画像内の文字が書き換わって、その場で完成イメージが確認できる仕様になっています。

今まさに鋭意製作中ですので、完成したらまたご紹介しますね。

完成しました!

マイブランドスタンプ

終わり(^^)/

スポンサーリンク
広告(大)
広告(大)

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
広告(大)