視覚教材は、アルゴリズムがどのように機能するかを明確にするのに役立ちます。 このトークでは、UIBezierPathがどのように動作するかを、我々が見ることができるインタラクティブな方法で、アルゴリズムを再実装して調べてみます。 Swift Playgroundを使って、実装のフィードバックをすばやく入手し、学習ツールとして使用することができます。
Swift によるアルゴリズムの可視化
ベジエ曲線についてお話しましょう
一つ一つのピクセルをレンダリングするのではなく4つのポイントを作る
ベジエ曲線はCADにもアニメーションタイミングモデリングにも使われていmす
UIBezierPathがSwiftでも利用できる
どうやってこれが機能しているのか
理解するには背後のアルゴリズムが必要です。この人が考えました。
どのポイントでもいいが、ラインセグメントでつなぎ、2つのコントロールポイントを追加し、ラインセグメントをポイント感でパスする。ArbitrarilyValue0〜１を選ぶ。０はラインセグメントに沿ってポイントをプッとする。１００％はカーブのエンドに行く。Tvalue５０％真ん中にドットが来ることになる
実際に見てみましょう
開始点終点制御点
ヘルパー関数
デモ
ここで描画
スタイルしてい
リニア線形代数ポイント lerp
Tが１なら最初は１００％、０の場合なら２つめの部分が０。加重平均の形になります。
これでタイムバリューをみていきます
（どこか修正した？「エンドポイントでしたね」）
。
黄色い点を追加
ベジエ曲線と重ねると計算がどのように行われているか分かるようになりました
最初のエレメントを除いてArraySliceに戻す
挿入されたポイントを保持しすべてのArrayのポイントにループオーバーする
ポイントが２点あれば線が引ける
単純化できる
zipの結果は短いSequenceの長さと同じになる
ArrayPointを最初のSequenceにつかい、Dropした方をSecondにする
あたらしい interpZip
ちょっとみてみましょう
コントロールポイントをいくつでも作ることができます
かなりがたがたしている。Tの値を増やしていくのを大きくしてしまった。小さくするとかなりスムーズになる。
Swift Playgroundを使うことですぐにフィードバックを得られます。
様々な実験ができます。
