ベジエ曲線のなめらかさについて社内勉強会で語った
いまの勤務先にはエンジニア・デザイナーが持ち回りで発表する社内勉強会(FFTT)があるんですが、今週がわたしの当番だったので、ベジエ曲線のなめらかさの話をしました。
- デモページ:https://mashabow.github.io/bezier-smoothness/
- リポジトリ:https://github.com/mashabow/bezier-smoothness
デモとスライドを行き来しつつ、30分ほどの発表でした。
内容の補足
p. 10: G1 連続(接線連続)
Illustrator などには「スムーズポイント」という種類のアンカーポイント(始点・終点)がありますが、これは両方のハンドルが常に一直線になって動くので、G1 連続ということですね。
p. 14: 急カーブ注意の標識と曲率半径
「道路標識 R カーブ」あたりで画像検索するとわかりやすいかと思います。「R = 500 m」のように書いてあったりします。
p. 18: フォントエディタに搭載された曲率の櫛(curvature comb)
2017 年にリリースされた FontLab VI には標準搭載されています。G2 連続になるように、うまいこと自動調整してくれる機能もついています。
Glyphs や RoboFont では Speed Punk というプラグインが有名ですね。もともと、こちらの方が早くから開発されています。
デモの [G0 連続], [G1 連続], [G2 連続] ボタン
片方のベジエ曲線を調整して G0, G1, G2 連続にする機能で、calc.ts に実装があります。安直でナイーブな実装になっているので、ベジエ曲線の形や配置によっては、思わぬ結果になります。コーナーケースも考慮していません。
実際のデザイン支援に使うためには、ユーザーの意図に寄り添った「もっと頭のいい調整方法」が必要になります。
G0, G1, G2, … 連続
英語では geometic continuity といい、その頭文字をとって Gn と呼ぶようです。
Smoothness: Geometric continuity - Wikipedia
一般の n について、ちゃんとした定義をあまり把握していなかったのですが、弧長パラメータで n 回連続微分可能であれば Gn 連続、という理解でいいんでしょうか。
ちなみに、日本語のブログ記事などでは「ある程度の誤差を許した Cn 連続のことを Gn 連続と呼ぶ」という解説が散見されますが、こちらはちょっとあやしそうです。
雑感
フォントエンジニアにとっては常識レベルの内容だとはいえ、ブラウザ上ででグラフィカルにぐりぐり動かせるデモを作ってみるとやっぱり楽しいですね。今回の話、社内の業務にはまったく直結しないのですが、みなさんに興味深く聞いてもらえたようです。
ベジエ曲線を自由自在に使いこなしているデザイナーさんからも「なるほど!」「こういうことだったんか」というような反応をいただいて、発表した甲斐がありました 🍮