iOSで形状の基になっている神秘的な数学を検索する

これは、あるFigmaエンジニアがプログラミングの問題に対する完璧な答えをどのように探していたかについての物語です。

---

1972年の有名なインタビューで、チャールズイームズはデザインの性質に関するいくつかの基本的な質問に簡単に答えました 。 最初の質問に答えて、彼はデザインを「特定の目標を達成するための要素のレイアウト計画」と定義しました。



残りの答えも比metaまで非常に簡潔です。 しかし、イームズは設計制約の役割について尋ねられたとき、インタビューを止めて、最も長く思慮深い答えをインタビューに出しました。「設計問題の数少ない効果的な鍵の1つは、設計者ができるだけ多くの制約を認識する能力です。 これらの制約に取り組むことに対する彼の意欲と熱意。」



私は専門職のデザイナーではありませんが、コラボレーションWebデザインツールであるFigmaの開発者ですが、イームズのコメントが私の作品に当てはまるのは簡単です。 UI要素の代わりに、コードで表現された数学的概念を構成して、ツールと機能を作成します。 そして、時間、シンプルさ、サポート、さらには美学の限界も、私の作品で同様の支配的な役割を果たしています。



最近のプロジェクトでは、これらの類似点を特に強調しています。 なんとなく奇妙な名前のリスと一緒にAppleのフィギュアのサポートをFigmaに追加するように指示されました。 私はトピックを勉強し始めました。



この研究は、誤スタート、隠れた問題、新たな制約、知性、緊張、そして解決に満ちた、真の数学的なオデッセイに変わりました。 つまり、すべてのデザイナーがある程度毎日経験しているという話でした。



私の似たような数学の天才に喜びを与え、数学を使用して設計プロセス全体を示すために、各ステップを最初の正方形から最終結果まで以下に説明します。

Quadrocircle：丸め演算子

この話は、私がFigmaを設立するずっと前、つまりiOS 7がリリースされた2013年6月10日から始まりました。新しいOSには、ほとんど目立たないアップデートがありました。 角の丸い正方形の代わりに、各アイコンは四角形になりました（四角形、「正方形/長方形」と「円形」の単語の組み合わせ）。



あなたは尋ねます、違いは何ですか？ 正直なところ、それは小さいです。角の丸い通常の長方形が基準になりますが、曲線が始まる場所でファイルによってわずかに処理されます。 したがって、直線から曲線への移行はシャープではなくなります。



数学の言語で正確に定式化された場合、四角形は周囲の連続的な曲率を持ちますが、丸みを帯びた正方形はそうではありません。 これは些細なことのように思えるかもしれませんが、無意識のうちに大きな影響があります。四角形は処理された正方形のようには見えません。 それは、川の底にある滑らかな小石の形として、独立した有能なエンティティとして認識されます-単一の基本的な全体。





1.1。 丸みを帯びた正方形と四角形の比較：明らかに、差は小さい



工業デザイナーは、物体の知覚にとって丸めがどれほど重要かを長い間知っていました。 Macbookの隅や、机のランプの下にある昔ながらの有線ヘッドフォンケースをよく見てください。 角度がはっきりと対照的なまぶしさを放つ位置を見つけるのがどれほど難しいかに注意してください。



その理由は、設計者によって特別に設計された曲線の連続性です。 ソフトウェアとハ​​ードウェアの両方を開発したユニークな経験を持つAppleが、最終的に工業デザインのアイデアをインターフェイスデザインに適用し、アイコンを独自の生産物のように見せることは驚くことではありません。

フォームから式へ

もちろん、FigmaはiOSデザイナーを愛しており、ユーザーは常に適切なプラットフォーム要素を手に入れるべきだと考えています。 設計中にこの新しいフォームにアクセスできるようにするには、正確な数学的記述を見つける必要があります。 次に、このフォームをツールに埋め込む方法を理解し始めます。



幸いなことに、iOS 7のリリース以来、人々はこの質問をしてきました。もちろん、私たちはこの道を最初に行ったわけではありません！ マークエドワーズの元の基本的な作業には、アイコンの形状がスーパー楕円と呼ばれる楕円の特別な一般化であることを示すスクリーンショットが含まれていました。 次の数式は 、 a、b、およびnの選択に応じて、円、楕円、および超楕円を記述します。





2.1。 超楕円式



たとえば、 n = 2、 a = 5、 b = 3を選択すると、 x軸に沿った大きな半軸5とyに沿った小さな半軸3を持つ通常の楕円が得られます。 n = 2のままにしてa = b = 1を選択すると、単位半径の理想的な円が得られます。 しかし、 nを 2つ以上選択すると、超楕円が得られます。これは、内接する長方形の形状と融合し始める丸い楕円形で、 nが無限大になると角が完全に直線になります。 もともとAppleはn = 5の形式を選択したと想定されていました。 この式を試してみると 、iOS 7+で使用されているものに非常に近いことがわかります。



本当の記述が本当にそのようなものである場合、合理的な量のベジェ曲線を適用することができます-そして、新しい概念をFigmaに注意深く統合します。 しかし、残念なことに、 慎重なフォローアップ分析により、超楕円式は適切ではないことが示されました（ただし、今日では真の超楕円が実際に他のアイコンとして使用されています）。 実際、上記の式のすべてのオプションnには、アイコンの実際の形状と比較して、小さいが体系的な矛盾があります。



これは史上最初の行き止まりです。iOSの四角形に非常によく似たものに対するエレガントで単純な方程式がありますが、それは根本的に間違っています。 しかし、ユーザーに正しい方程式を与える必要があります。



前進するには真剣な努力が必要であり、再び私は他人によってbyかれた作物を刈り取ることができて嬉しいです。 Juicy Bitsの研究者Mike Swansonは、四角形の角度は一連のベジェ曲線に基づいていると仮定しました。 彼は遺伝的アルゴリズムを使用して、 Appleの公式形式との類似性を最適化しました。 アイコンを直接生成するiOSコードを研究したManfred Schwindの優れた直接比較から明らかなように、結果はオリジナルと一致しています。 したがって、ベジエ曲線に同じ構造を与える2つの異なるアプローチがあります。iOS7の四角形は、独立した研究者によってハッキングおよびダブルチェックされ、計算する必要さえありません。

実行中のファイル

Figmaでフォームを直接複製できないようにする2つの重要な詳細が残っています。



まず、驚くべき事実は、iOSフォーミュラのバージョン（少なくとも調査中）がいくつかの癖で作られていることです-角度は完全に対称ではありませんが、一方では明らかにここにはないはずの小さな直線セグメントがあります。 コードとテストの両方を複雑にするため、必要ありません。バグが欠落している角度の半分をミラーリングするだけで簡単に削除できます。



第二に、iOSの実際の長方形の縦横比を揃えると、アイコンの形状が、必要な四角形から完全に異なる形状に劇的に変化します。 このようなひねりは設計者にとって不快なものであり、特定の条件下でどのようなフォームが表示されるべきかを明確に決定する必要があります。



四角形を揃えるときの最も自然で便利な動作は、角の丸い部分とまっすぐな部分の間の移行の余地がなくなるまで、スムージングが徐々に消えることです。 さらに調整すると、丸みのある部分の半径が小さくなるはずです。これは、Figmaの現在の動作と一致しています。 Appleのquadrocircle公式はここではあまり役に立ちません。固定された方法で四捨五入されるからです。古い丸い長方形に近づいたり離れたりする方法についての指示を与えないからです。 本当に必要なのは、特定のパラメーター値がAppleの形状に非常に近いパラメーター化可能な丸めです。



追加のボーナスとして、角が丸い長方形の四角形への変換をパラメーター化できる場合、丸みが使用されているFigmaの他の場所、星、多角形、任意の手描きのベクターネットワークの角にも同じプロセスを適用できます。 複雑ではありますが、iOS 7の四角形を追加するよりもはるかに完全で価値のある機能に見え始めます。今では、多くの状況で使用するための無限の多様な新しい形状をデザイナーに提供し、そのうちの1つはそれがすべて開始したquadrocircraftアイコンに対応しています。



四角形の丸めパターンがスムーズに調整可能であると同時に、調整範囲から特定の便利なポイントでiOS 7の形状に準拠するという要件は、私たちの歴史の中で生じた最初の制限であり、満たすことは困難です。 バレリーナの場合、同様のタスクは飛行中の1つの写真からジャンプ全体を設計し、ある時点でジャンプ段階が写真に対応するようにすることです。 すごく聞こえます。 それで、まだ何らかの計算が必要ですか？

強力なツール：平面曲線の微分幾何学

四角形のパラメーター化に突入する前に、一歩下がって、何が起きているのかを分析するのに役立つ正式なツールからほこりを吹き飛ばしましょう。 まず、四角形の記述方法を決定する必要があります。 以前は、超楕円の場合、 xとyの方程式を使用しました。方程式の条件を満たす平面上のすべての点（ x、y ）は、超楕円を演edしました。 これは単純な方程式の場合はエレガントですが、実際の四角形はベジエ曲線のパッチワークであり、制御されていない方程式の山につながります。



この複雑さは、より明示的なアプローチを使用して処理できます.1つの変数tを取得し、有限間隔に制限し、この間隔のtの各値を四角形の周囲の個別のポイントと比較します（実際、ベジェ曲線はほとんど常にこの方法で表されます）。 角度の1つだけに集中し、それによって分析を明確な開始と終了のある曲線に制限する場合、 t = 0が行の開始に対応し、 t = 1が行の終了に対応し、 tの滑らかな変化になるように、 tと角度の間のマップを選択できます0から1までは、角の丸い部分を滑らかにトレースしました。 数学言語では、曲線の角度r（t）を記述します。





4.1。 [0,1]を使用した平面曲線の全単射



ここで、 x（t）およびy（t）は、rのxおよびy成分に対するtの別個の関数です。 r（t）は、たとえば車での旅行の独特な歴史として想像できます。 出発から到着までの各時点tについて、 r（t）を推定し、ルート上の車の位置を取得できます。 経路r（t）から、速度v（t）と加速度a（t）を導出できます。





4.2。 平坦な曲線の速度と加速度



最後に、私たちの歴史の中で重要な役割を果たす数学的曲率は、速度と加速度の観点から次のように表現できます。





4.3。 平面曲線の符号なし曲率



しかし、この式は本当に何を意味するのでしょうか？ これは少し複雑に見えるかもしれませんが、曲率は元々コーシーのために単純な幾何学的設計をしています：

1. 曲線に沿った任意の点Pの曲率中心Cは、 Pの曲線の法線と、 Pに限りなく近い別の法線の交点にあります。 （注として、ラテン語の動詞osculareから、 Cを中心とする円はPの 接触円と呼ばれます。これは「キス」を意味します。それは素晴らしいことではありませんか？）
2. 曲率半径Rは、 CとPの間の距離です。
3. 曲率κはRの逆数です。

上記のように、曲率κは負ではなく、右に曲がっても左に曲がっても違いはありません。 この違いは重要であるため、 κから符号曲率kを作成し、曲線が右に曲がる場合は正の符号を、左に曲がる場合は負の符号を割り当てます。 この概念は、車を運転することと比較することもできます。任意のポイントtで、符号曲率k（t）は、時刻tでハンドルが回転する角度であり、右折を示すプラス記号と左折を示すマイナス記号です。

ジオメトリルール：アーク長のパラメーター化

曲率の​​導入により、いくつかの詳細のみを解決することに変わりはありません。 まず、四輪車の角に沿って2台の車が移動していることを想像してください。 1台の車は急激に加速し、その後常にブレーキをかけ、もう1台の車は最後まで均等に加速します。 これら2つの異なる運転方法は、同じ経路であっても、非常に異なるトラック履歴を生じさせます。 どのように共通の分母に導くことができるのか、それを達成する方法ではなく、コーナーの形状のみに関心がありますか？ ここで重要なのは、履歴ポイントをマークするときに時間を使用することではなく、移動した合計距離、つまり円弧の長さを使用することです。 つまり、「旅行の10分間で車はどこにありましたか？」という質問の代わりに、「旅行の開始から10 マイルで車はどこにありましたか？」という質問に答える方がよいでしょう。 この軌跡の記述方法は、ジオメトリのみをキャプチャし、それ以上はキャプチャしません。



パスr（t）の履歴がある場合は、常にパスの時間tの関数としてアークsの長さを抽出し、速度を次のように統合できます。





5.1。 アーク長積分



この関係を逆にしてt（s）を見つけることができる場合、パスr（t）の履歴でtの代わりにそれを使用して、アーク長r（s）の目的のパラメーター化を取得できます。 パスのアーク長のパラメーター化は、単位速度で移動する自動車のパスの履歴に相当するため、速度v（s）が常に単位ベクトルであり、加速度a（s）が常に速度に垂直であることは驚くことではありません。 したがって、弧の長さに沿ってパラメータ化されたバリアントでは、曲率の記述は加速度値までのみ簡略化されます。





5.2。 弧の長さに沿ってパラメータ化されたバリアントの曲率



また、対応する右または左の符号を設定して、符号付き曲率k（s）を形成できます。 明らかに、曲率のより一般的な定義における複雑さのほとんどは、単純にパスの履歴の非幾何学的内容から構成されていました。 結局のところ、曲率は純粋に幾何学的な量であるため、幾何学的なパラメーター化では単純に見えることが非常にうれしいです。

曲率の​​設計、曲線の計算

次に別の詳細について。 パスr（t）の履歴の記述からアーク長パラメーターr（s）の記述に進む方法と、そこから符号曲率k（s）を抽出する方法を見つけました。 しかし、私たちは反対をすることができますか？ 曲率プロファイルを設計し、それから親曲線を導き出しますか？ 車との類推をもう一度見てみましょう。ルート全体に沿って一定の単位速度で運転しているときに、経路全体にわたってハンドルの位置を連続的に固定するとします。 このステアリングデータを取得して別のドライバーに転送した場合、ステアリングホイールの位置を正確に再現し、まったく同じ速度で運転すれば、ルートを完全に復元できますか？ 直感的に、親曲線を復元するのに十分な情報がありますが、この計算は数学的にどのように見えますか？ 少し荒いですが、これは円弧の長さをパラメータ化することでオイラーのおかげで可能です。 曲線が原点から始まり、最初にx軸に沿って始まるように座標系を選択した場合、 x（s）とy（s）はk（s）から次のように復元できます。





6.1。 曲率によって曲線を復元する



最後に、サイン関数とコサイン関数の引数に注意してください。これは符号曲率の積分です。 通常、三角関数は引数としてラジアン単位の角度を指定します。 私たちの場合、曲率によって符号化されたaからbまでの積分は、 bのレートからaのレートを引いたものです。 したがって、長方形を取り、好きなように角を丸めて、丸みを帯びた部分の曲率を測定し、結果を積分すると、常にπ/ 2が得られます。

四重構造

詳細を把握した後、これらの分析ツールを実際のフォームに適用します。 長方形の丸い角から始めましょう。角の半径は1です。 まず、角度自体を構築し、次に円弧の長さの関数として曲率を構築します。





7.1。 角丸長方形の曲率分析



ここで、実際のApple四角形の角度についてこのプロセスを繰り返します。曲率が非常に異なることがわかります。





7.2。 Quadrocircle Curvature Analysis iOS 7



曲率はややギザギザに見えますが、必ずしも悪いわけではありません。後で見るように、滑らかな曲率グラフと少数のベジェ曲線の間で妥協点を見つけることができます。iOSコーナーには3つしかありません。通常、設計者は数学的に完全な曲率プロファイルを犠牲にして、ベジェ曲線の数を減らします。詳細を破棄すると、一般的な画像が右のグラフに表示されます。曲率が上昇し、中央に揃えられ、その後下に戻ります。

ブレークスルー：パラメーター化された平滑化

ビンゴ！この最後の観察では、四角形の角度の平滑化をパラメーター化する方法の鍵となります。平滑化がゼロの場合、曲率プロファイルは丸みを帯びた長方形のようになります。つまり、カウンタートップの形になります。平滑化が徐々に増加すると、カウンタートップの高さは変化しませんが、そのエッジは急勾配になり、二等辺台形のプロファイルを形成します（もちろん、以前のように、共通の角度π/ 2）。平滑化が最大に近づくと、台形の平らな部分が消えます-そして、高さが元のカウンタートップの高さに対応する幅の広い二等辺三角形を取得します。





8.1。平滑化パラメーターのさまざまな値の



曲率プロファイルξを使用して、曲率プロファイルのこのスケッチを数学用語で表現してみましょう。ゼロから1に変化する平滑化パラメーターとして。直角がない他の形式で使用するために、回転角θも導入します。これは、長方形の場合はπ/ 2です。これらを組み合わせることにより、区分的連続関数は3つの部分で表現できます。1つは曲率を上げるため、1つはフラットトップ用、3つ目は降下用です：





8.2。パラメータ化キャンバーkvadrokrugaに



近づいたときにメモは、第1及び第3の部分（昇降）が消えることξをゼロに、及び中間部（フラットトップ）が近づいて消滅ξをユニットに。上記では、曲率プロファイルから親カーブに進む方法を示しました。曲率がゼロから始まり着実に増加する線を記述する最初の方程式でこれを試してみましょう。まず、簡単な内部積分を作成し





ます ：8.2。式8.2に関連する6.1の最初の積分



これまでのところ、すべてが正常です！続けて、次の積分ペアを形成でき





ます。式8.2に適用される6.1の2番目の積分（フレネル積分）



残念なことに、これらの積分はそれほど単純ではないため、ここで立ち往生しています。三角関数と指数の関係について聞いたことがある場合、これらの積分は誤差関数に関連していると推測できます。誤差関数は初等関数では表現できません。同じことがこれらの積分にも当てはまります。それで、私たちは何をするつもりですか？解決策はこの記事の範囲外です（ヒントについてはMath StackExchangeのこの投稿を参照）が、この場合、べき級数のサインとコサインを置き換えてから、合計と積分を変更できます：





8.4。一連のフレネル積分への展開べき級数は



ほとんど通過できないように思えるので、別の手順を実行し、各行の最初のいくつかの要素を明示的に書き、すべてを単純化してみましょう。これにより、xに対して次のいくつかの要素が得られます。およびy形式：





8.5。8.3の低次要素（n <3）

クロソイドの神格化

これは具体的な結果です！実際に、このペアの方程式のグラフを（ξ、θ、Rの適切な選択を使用して）描画し、sの関数として輪郭を取得できます。任意の数の要素と合計を計算する能力がある場合、sが増加すると、曲線は螺旋状にねじれますが、これは関心のある領域から遠く離れて発生します。



この記事の最初から論文を繰り返しますが、私たちは再びそのような研究に従事する最初ではありません。実際には非常に便利な直線の曲率のため、多くの人が過去にこの曲線に出くわしました。オイラースパイラル、コルヌスパイラル、またはクロソイドとして知られ、道路やジェットコースターなどのトラックの設計に広く使用されています。





9.1。 s = 5までのClotoid



分解がnまでしか使用されない場合8.5で述べたように、10未満の場合、最初のアーティファクトを生成するために必要なものがすべて揃っています。このシリーズは、式8.2の昇順（最初）の部分を表していますが、降順（3番目）の部分に簡単に適合させることができ、これらの部分をフラット（2番目）部分の円弧セグメントで互いに接続します。この方法は、数学的に完全な四角形の角度を提供します。これは、式8.2で最初に導入された曲率設計と完全に一致します。以下は、ξ = 0.4の四角形の角度についてクロソイドに対して実行された曲率分析





です。 9次クロソイドと円弧を使用する場合のξ= 0.4での四角形の角度



このようなエレガントな形状を得るのは良いことですが、これは理想的なバージョンにすぎないことを理解しておく必要があります。この正確な形状は、いくつかの理由で機能しません。これらのうち、主な理由は、円形部分の曲率中心が平滑化パラメーターξの関数として移動することです。理想的には、固定されます。



さらに重要なことは、私たちが定義した条件でのアーク長sの程度は9に達する可能性があることです。 figmaでは、すべての連続曲線は3次ベジェ曲線（その特別な場合は2次ベジェ曲線と線）で表される必要があります。これにより、3次および低次の用語のみの保存に制限されます。つまり、x（s）およびy（s）の上記の各シリーズ1つの要素に切り捨てられます。このような切り捨て後、図の必要なプロパティが保持されることを期待することは困難です。



残念なことに、高次のメンバーを削除するだけでは不十分です。これは、ξの値が大きい場合、結果の構築が非常にうまく機能しないためです。以下の図は、ξ = 0.9：9.3の結果を示してい





ます。 3次クロソイドおよび円弧を使用したξ= 0.9での四角形の角度



この形式は明らかに使用できません。3桁では、上昇と下降の全長に沿って曲率を増加させるのに十分ではないようです。これは、円の弧（中間セグメント）に出かけたときに大きなエラーが蓄積されていることを意味します。残念ながら、これはクロソイドを使用した結果が使用に適していないことを意味します。最初からやり直す必要があります。

永遠に続くものはない

一歩下がって、私たちの制限をもう一度考えてみてください-そして、新しい方向に出発する前に、以前の努力を最大限に活用してください。



まず、理想的なクロソイド構造には必要な曲率プロファイルがありますが、中央の円形断面の曲率中心は、平滑化パラメーターξの関数としてその位置を変更します。。 UIでは、ポイントが曲率の中心にあり、長方形を丸めるため、これは望ましくありません。ユーザーは、角をドラッグして角の半径を設定します。スムージングの変化に合わせてこのポイントが動き始めると、少し奇妙になります。さらに、iOSフォームでは、中央のセクションは、単純な丸い長方形の場合の場所になります。これは、中心位置がξから完全に独立していることを示しています。したがって、曲率の設計の同じ主な目標を維持し、ξが変化したときに円形断面が一定の曲率中心を維持するという制限を追加できます。



第二に、四角形の角を作成するためにデザイナーがあまりにも複雑なツールを必要としないことを知っています。 Appleシェイプでは（奇妙な小さな直線部分を削除した後）、円形セクションを曲線の着信部分に接続するベジエ曲線が1つだけあります。



第三に、わかりにくい技術的な制限があります。これらは最初から明らかではありませんが、深刻な実装の問題になります。それらを理解するために、半径20ピクセルの標準的な丸みを付けた100×100ピクセルの正方形を考えてください。これは、正方形の各辺に60pxの直線があることを意味します。正方形を80×100pxの長方形に平坦化すると、短辺の直線部分はわずか40pxになります。長方形を狭くして、真っ直ぐな断片になるとどうなりますか？または、20×100pxのようにさらに長方形に狭め続けたら？現時点では、Figmaは角を丸くするために適用可能な最大値を決定し、それを使用します。したがって、20×100pxの長方形には、半径10pxのフィレットがあります。

R ξ p , p(R,ξ) ξ(R,p).

四角形でのスムージングプロセスは、単純な丸み付けよりも直線側のピクセルを多く消費します。同じ正方形100×100pxを想像し、20pxの丸めを行ってから、いくつかのスムージング手順を適用して、まっすぐな側面から別の12ピクセルを削除します。これにより、直線部分にわずか36ピクセルが残ります。長方形を60×100ピクセルに狭めるとどうなりますか？類推により、スムージングスケールは、直線セクションのサイズを超えないレベルに縮小する必要があることはほとんど明らかです。しかし、特定のピクセル数を満たす量ξの計算方法は？計算は高速でなければなりません。そうしないと、この関数を実装できません。



繰り返しますが、問題は数学的に非常に正確に記述されています：半径Rの角を滑らかにする場合また、パラメータξはpピクセルを消費するため、関数p（R、ξ）はξ（R、p）で可逆でなければなりません。これはやや隠された制限であり、近くの高次クロソイドの解も除外します。



最後に、使いやすさの制限があります。スムージングの変更は、少なくとも何らかの形で目立つはずです。ゼロと1の間でスムージングパラメーターξを前後に引くと、違いがわかります！すべての作業が微妙な変化につながることを想像してください-これは受け入れられません。これは基本的に実用性の要件であり、実際、これは最も重要な制限です。

シンプルなほど良い

上記の制限を満たしながら、考えられる最も簡単なアプローチを試してみましょう。 1つのパラメーター化されたベジェ曲線を取得します。これは、円形の部分を取り、それを直線側に接続します。次の図は、適切なタイプのベジェ曲線を示しています。





11.1。四角形の角度の昇順部分の3次ベジェ曲線の制御点



このベジェ曲線のいくつかのプロパティは、さらに説明する価値があります。まず、コントロールポイント1、2、および3が並んでいます。これにより、ポイント1で曲率がゼロになり、四角形の直線部分に接続されます。一般に、座標系を定義し、ポイント1をP1に、ポイント2をP2に接続するなどの場合、ポイント1の曲率は次の式で与えられます。





11.2。図1のポイント1での単純化されていない曲率11.1



ポイント1〜3が並んでいる場合、端数削減がはっきりと見えます。同じ数式をポイント4に適用して、座標を逆順で示し





ます ： 11.3。図4の点4の簡略化された曲率11.1



理想的には、曲率は円形断面と同じ、つまり 1 / Rになり、別の制限につながります。最後に、 cと dの値は、この曲線の終点が円形部分と一致し、接触箇所に影響を与える必要があるという事実により固定されています。そのため、上記の制限の曲率は、単に私たちの価値与え、B：





11.4。図のbの解11.1曲率の連続性を提供する



曲率の​​最初の線形増加を維持することが重要な場合（ポイント1のクロソイドを使用した理想的なソリューション）、aをbに設定すると、ベジェ曲線上のすべてのポイントが修正され、潜在的なソリューションが得られます。これらの観測を使用して、平滑化ξ = 0.6 を使用して、ベジェ曲線上に単純な四角形を作成します。







見栄えがよく、ここではクロソイドの最初の計算から多くのヒントが使用されています。残念ながら、0から1 までのξの全範囲にわたる散布は、実際には目に見えません。 2つのズームレベルでの角度を以下に示します。異なる色のξ = 0.1、0.3、0.5、0.7、0.9の曲線を示します。







優れた数学的性質にもかかわらず、その効果はほとんど目立ちません。もちろん、このオプションは、クロソイドの数を減らして以前に取得した曲線よりも実際の製品に近いものです。バリエーションを増やすために数式を調整できればいいだけです！

小さなタッチ

さらに一歩進んで、どのように進めるかを考えることができます。平滑化に使用されるピクセルと平滑化パラメーターξの間に可逆的な関係が必要であることを思い出してください。まず、この変換に焦点を当てて、できるだけシンプルにすることができます。次に、それから2次円のパラメーター化を試みたときに何が起こるかを確認します。



角の単純な丸み付けでピクセルがどのように使用されるかについてはすでに知っています。必要な三角法については言及しませんが、半径Rで丸められた開口角θは、角の上部からqピクセルを使用し、qは次のように定義されます。丸め長さ









最も簡単な方法で、qに基づいてp（R、ξ）を選択するとどうなりますか





。 たとえば、12.2。丸めと平滑化のセグメントの長さ



これは、最大平滑化パラメーターでは、通常の丸めに使用したのと同じセグメント長が使用されることを意味します。この選択により、上の図の数量a + bが固定されます。リコールどのような状況の下でいることをCとD恒久的に固定するので、追加の固定されているB +、我々は最後の意思決定を行うために残されていることを意味する：どのように大きなAに対するB？繰り返しますが、最も単純な選択、つまりa = bを選択した場合、次にベジエ曲線のパラメーター化の定義を終了します。その角度と曲率を以下に示します





。12.3。単純なスムージングスキームの角度の形状と曲率のプロファイル



このような視覚的な多様性はすでに有望に見えます。曲線は魅力的でしっかりしています。しかし、曲率プロファイルは失礼です。さて、ピークを少し滑らかにすると、最終リリースの真剣な候補が得られます。脆弱なプロファイルにもかかわらず、この単純なフォームファミリーでさえ、Appleの四角形サークルバージョンに非常によく似たインスタンスがあります。ユーザーに明確な良心を持って展開するのにほぼ十分です。



次に、最後の未解決の問題である曲率プロファイルに移りましょう。むしろ均等に分割差よりもAとB、上記で行ったように、なぜ間隔aの3分の2を選択し、残りのbを選択しないのですか？これにより、曲率プロファイルの長いテールを短くし、ピークをカットすることにより、曲率が速くなりすぎるのを防ぎます。このような変更により、次のフォームが作成されます





。改善された単純な平滑化スキームの角度形状と曲率プロファイル



曲率プロファイルは大幅に改善されており、実際の製品を作成するには視覚的な多様性で十分です。平滑化パラメーターξ = 0.6は、iOSの形状にほぼ完全に一致し、生成が驚くほど単純であるにもかかわらず、曲線の良好な外観が保持されます。それでは、質問をする時が来ました：それがリリースされるのを妨げるものは何ですか？なし。

リリース後の考え方

結果として、プロセス自体を反映することが有用です。この話でも同じことが繰り返し確認されています。可能な限り単純なアプローチの強さと有効性です。最悪の場合、機能しない場合は比較の基礎が得られます。それを真剣に評価することは、アプローチとさらなるプロモーションを最終決定するときに考慮すべき最も重要なことを決定するのに役立ちます。そして、最良の場合、私たちと同じように、最も単純なアプローチはすでにかなり良い結果をもたらしています！



最後に、良い製品と完璧な製品の違いについて考えたいと思います。私は、より良い曲率プロファイルを思い付かなかったことに少し混乱しています。研究には多くの選択肢があるため、より多くの時間が割り当てられると確信しています。知的観点からすると、このような美しい一連のクロソイドを入手できたのは少し不快ですが、最終バージョンでは使用できませんでした。しかし、より重要な結論があります。小さな会社で働くときの時間制限は非常に現実的であり、それらに違反する設計は良いとは見なされません。