改めてベジエ曲線と、その美しさを理解する

2020年08月10日 10:49

  • LINEで送る
改めてベジエ曲線と、その美しさを理解する

Adobe系のソフトの使い方を教えて、というのはよく聞くのですが、説明が難しいのが Illustrator のベジェ曲線。僕も感覚での操作に慣れてしまっていて、うまく説明できなくて苦手のひとつなのですが。

車のデザインの分野でルノー社のピエール・ベジェにより考案されたため名前が付いたとされていますが、それより先にシトロエン社のド・カステリョによって実現されグラフィックスで使われ始め、そのアルゴリズムにはド・カステリョの名前が付いています。
が、ベジェの方が CAD による車体設計方法の確立など、分かりやすく後世に名前を残して有名です。
ベジェがなければ、現代の車のような流れるようなボディラインの工業品は生まれていなかったかもしれません。

あと、絵描きなどグラフィッカーの人は「ベジ曲線」って言うのですが、プロダクトデザイナーなどの理系デザイナーは「ベジ曲線」って言いますよね。正しくというか普通は「ベジエ」の方だと思うのですが(授業や教本は「ベジエ」)。Adobe のヘルプファイルなどで公式に「ベジェ」と記載されてしまったことで、ベジェと呼ぶ人が多いみたい。
人口でいうと、プロより Adobe Illustrator を使うアマ絵描きさんが多いわけだから、「ベジェ曲線」って言い方が市民権を得たということですね。検索してもそっちの方が多いし。

理系の人はともかく、Adobe ソフトから入った人、絵描きから入った人は「パス」を描くときにハンドルの方向を動かすことで感覚的に曲線を描いていて、その法則性まではなかなか理解していないと思います。描き方を教えるところは多いけど、アルゴリズムまでちゃんと教えるところは少ないし、何よりグラフィッカーで理解できる人少ないから。

避けては通れないパラメトリック曲線、バーンスタイン多項式などについては丸投げしつつ。

ベジェ曲線 - Wikipedia
バーンスタイン多項式 - Wikipedia

Illustrator のパス(アンカーポイント&ハンドル)は、連結されたベジエ曲線で構成されているのですが、ハンドルと制御点を同じ図で再現してみると以下のような感じ。
これが理解できると、曲線がどのように生成されるかが理解できます。ハンドルの端点は中点になっているわけですね。

改めてベジエ曲線と、その美しさを理解する

この中点の構造が理解できない人は、英語版のベジエ曲線の項目が詳しいので、そちらを閲覧することをおすすめします。
英語が分からなくても図やアニメーションで表現されていて、特にアニメーションの方で理解できると思います。ページ下部の方で動きながら描画される曲線を見たら一発で理解できます
っていうか、Wikipedia って全世界で共通の内容を翻訳しているわけじゃなくて、それぞれの国で独立した内容で作られるのですね…。けっこうレベルが変わってきてしまう。

■Bézier curve - Wikipedia(英語)
https://en.wikipedia.org/wiki/B%C3%A9zier_curve

ちなみにド・カステリョのアルゴリズムの説明は日本版には無いのですが、英語版にはあります。

■De Casteljau's algorithm - Wikipedia(英語)
https://en.wikipedia.org/wiki/De_Casteljau%27s_algorithm


そしてもうひとつ、描画だけでなくインターフェースとしてベジエ曲線の美しさといったら。
例えば物体がだんだんと加速していく様を設定するときなど、ベジエ曲線を描いて設定、逆算することで簡単に直感的に入力することができます。音楽、動画、ありとあらゆるソフトでこの方式が採用されていますが、いつ見てもこれ凄い良いインターフェースだなと言わざるを得ません。

  

2015/06/16
おにぎりで考えるデザイン、ときどき猫
おにぎり。お米を手のひらで加圧成形しただけのライスボール。日本では古くから食べられて、保存性・携行性に優れているためお弁当としても親しまれています。家庭や母親のイメージと重ねて記憶している人も多いと思います。そんな庶民的で身近な食事にも、ちょっとしたデザインとしての気づきが。

2018/07/12
デザイナーが知っておくべき PDF の秘密
PDF形式のファイルは非常に便利で、どの企業でも PC のセットアップ時に必ず導入するプラグインのひとつだと思います。PDF って設計思想も非常に良くて、ピクセルという物理的なサイズ感の異なるモニタ画面と紙というサイズの位相を「紙への印刷サイズに最適化した状態を保存する」というアイデアで、印刷に失敗し…

2012/09/05
たまご と Superellipse
よく「たまご」に顔で表情を書くイタズラをしたことがある人も多いと思います。それをアートへと発展させてしまった作品集がありました。■10 Creative Drawing on Eggshttp://www.uphaa.com/blog/index.php/10-creative-drawing-on-eggs/卵といえばデザイン的には「オーバル」。数学的にも、いくつ…

2017/10/26
車のデザインは終息しつつあるが、人の意識は追いつかない
自動車のヘッドライトって左右に必ず設置されていますね。1つが真ん中に設置されているだけでも良いんじゃね? (そうザクのモノアイみたいに)とか思いませんか。でもあれ、夜でも遠目からでも対向車の車幅が把握できるので、どちら側に避ければいいか判断する基準にもなり、完成されたデザインともいえますね…

2012/03/27
カーデザイナーによるロボットのデザインコンペ
日産のプロダクトデザインを任されている現役のカーデザイナーが、ロボットをデザインしたら。ロボットを「車という乗り物の延長」と考えて、現実的で実用的で技術的なチャレンジもあり、しかし夢があり購入意欲を掻き立てるコンセプトデザインが面白かった「輪廻のラグランジェ」企画なのですが。そのデザイン…

2013/08/12
クルマというデザインを考える
日本にはエネルギーになるような「天然資源」がなく、だからこそ「頭脳的資源」である技術が発展しました。繊細さ、緻密、丁寧な仕事。日本の工業製品を語ればそんな言葉が出てきます。日本という国の、細部にこだわるところ、古くからの文化的な美意識は、世界各国の中でもテイストとは違う異質のディティ…

2013/07/30
ヤンマープレミアムプロジェクト
(C) YANMAR Co., Ltd. All right reserved.■YANMAR PREMIUM BRAND PROJECThttp://yanmar-pbp.jp/ヤンマーといえば、日本を代表する農業機械メーカーのうちのひとつ。そのヤンマーがブランドイメージ向上を目指すプロジェクトを開始。このプロジェクトが興味深いです。

2018/11/20
スマート農業というデザインソリューションを考える
ものづくりに携わっている人には面白いTVドラマ「下町ロケット」ですが、農業に革命をおこす センサーや GPS 技術を用いた「無人化技術」についても登場しました。高齢化や農業人口の減少の問題を解決する智慧に満ち足りたテクノロジーなのですが、宇宙へ跳ぶロケットからのつながりのあるストーリー展開ということで…





同じカテゴリー(デザインの話)の記事
デザイン産業のいま
デザイン産業のいま(2021-01-10 23:47)


このブログの新着情報を配信中!

RSSリーダーに登録することで、新着情報だけを確認することができ便利です。
上のアイコンをクリックしてご登録ください。

見るだけでは飽き足らない、あなた。あなたも小言に参加してみませんか。コメントトラックバック、ご自由にどうぞ。


入力した内容は表示されます
上の画像に書かれている文字を入力して下さい
 
<ご注意>
書き込まれた内容は公開され、ブログの持ち主だけが削除できます。
過去記事
デザイン特集
グルメ特集
アクセスカウンタ
読者登録
メールアドレスを入力して登録する事で、このブログの新着エントリーをメールでお届けいたします。解除は→こちら
現在の読者数 32人
QRコード
QRCODE
プロフィール
yasukawa
yasukawa
浜松在住クリエイター&デザイナーが仕事のことについて頑張って書いてみる。
【認知心理学、コミュニケーションデザイン、情報デザイン、UI/UX、インフォメーションアーキテクト、サイネージ(Scala)、3Dモデリング、データベースアプリ構築(FlileMaker)、Flash Script 2.0&3.0、サーバ構築(Linux)、IoTセンサー&電子工作(Arduino)
文部科学省後援情報検定 情報デザイン試験合格
日本商工会議所販売士検定試験2級合格
日本英語検定協会実用英語検定試験3級合格
デザインカレッジ 外部講師(WEBマーケティング)
日本最大級レビューメディア「zigsow」2021年ベストレビュワー