Swift によるアルゴリズムの可視化 | try! Swift Tokyo 2018 Day2-3

視覚教材は、アルゴリズムがどのように機能するかを明確にするのに役立ちます。 このトークでは、UIBezierPathがどのように動作するかを、我々が見ることができるインタラクティブな方法で、アルゴリズムを再実装して調べてみます。 Swift Playgroundを使って、実装のフィードバックをすばやく入手し、学習ツールとして使用することができます。

Swift によるアルゴリズムの可視化

f:id:niwatako:20180302103318j:plain

ベジエ曲線についてお話しましょう

一つ一つのピクセルレンダリングするのではなく4つのポイントを作る

f:id:niwatako:20180302103438j:plain

ベジエ曲線はCADにもアニメーションタイミングモデリングにも使われていmす

UIBezierPathがSwiftでも利用できる

f:id:niwatako:20180302103459j:plain

どうやってこれが機能しているのか

f:id:niwatako:20180302103526j:plain

理解するには背後のアルゴリズムが必要です。この人が考えました。

f:id:niwatako:20180302103530j:plain

どのポイントでもいいが、ラインセグメントでつなぎ、2つのコントロールポイントを追加し、ラインセグメントをポイント感でパスする。ArbitrarilyValue0〜1を選ぶ。0はラインセグメントに沿ってポイントをプッとする。100%はカーブのエンドに行く。Tvalue50%真ん中にドットが来ることになる

f:id:niwatako:20180302103715j:plain

f:id:niwatako:20180302103718j:plain

f:id:niwatako:20180302103722j:plain

f:id:niwatako:20180302103725j:plain

実際に見てみましょう

f:id:niwatako:20180302103735j:plain

f:id:niwatako:20180302103738j:plain

開始点終点制御点

f:id:niwatako:20180302103751j:plain

ヘルパー関数

f:id:niwatako:20180302103813j:plain

デモ

f:id:niwatako:20180302103831j:plain

f:id:niwatako:20180302103824j:plain

f:id:niwatako:20180302103846j:plain

ここで描画

f:id:niwatako:20180302103908j:plain

f:id:niwatako:20180302103934j:plain

スタイルしてい

f:id:niwatako:20180302103958j:plain

f:id:niwatako:20180302104016j:plain

リニア線形代数ポイント lerp

f:id:niwatako:20180302104151j:plain

Tが1なら最初は100%、0の場合なら2つめの部分が0。加重平均の形になります。

これでタイムバリューをみていきます

f:id:niwatako:20180302104228j:plain

f:id:niwatako:20180302104331j:plain

f:id:niwatako:20180302104339j:plain

(どこか修正した?「エンドポイントでしたね」)

f:id:niwatako:20180302104343j:plain

f:id:niwatako:20180302104440j:plain

f:id:niwatako:20180302104443j:plain

f:id:niwatako:20180302104500j:plain

f:id:niwatako:20180302104513j:plain

f:id:niwatako:20180302104539j:plain

f:id:niwatako:20180302104529j:plain

f:id:niwatako:20180302104532j:plain

f:id:niwatako:20180302104604j:plain

f:id:niwatako:20180302104607j:plain

黄色い点を追加

f:id:niwatako:20180302104636j:plain

ベジエ曲線と重ねると計算がどのように行われているか分かるようになりました

f:id:niwatako:20180302104656j:plain

f:id:niwatako:20180302104709j:plain

f:id:niwatako:20180302104713j:plain

f:id:niwatako:20180302104740j:plain

f:id:niwatako:20180302104750j:plain

f:id:niwatako:20180302104805j:plain

f:id:niwatako:20180302104808j:plain

f:id:niwatako:20180302104811j:plain

最初のエレメントを除いてArraySliceに戻す

f:id:niwatako:20180302104854j:plain

f:id:niwatako:20180302104857j:plain

f:id:niwatako:20180302104900j:plain

f:id:niwatako:20180302104905j:plain

f:id:niwatako:20180302104908j:plain

挿入されたポイントを保持しすべてのArrayのポイントにループオーバーする

f:id:niwatako:20180302104939j:plain

f:id:niwatako:20180302104954j:plain

ポイントが2点あれば線が引ける

純化できる

f:id:niwatako:20180302105015j:plain

f:id:niwatako:20180302105037j:plain

f:id:niwatako:20180302105041j:plain

zipの結果は短いSequenceの長さと同じになる

ArrayPointを最初のSequenceにつかい、Dropした方をSecondにする

あたらしい interpZip

f:id:niwatako:20180302105156j:plain

ちょっとみてみましょう

コントロールポイントをいくつでも作ることができます

f:id:niwatako:20180302105221j:plain

f:id:niwatako:20180302105238j:plain

f:id:niwatako:20180302105241j:plain

f:id:niwatako:20180302105246j:plain

f:id:niwatako:20180302105342j:plain

かなりがたがたしている。Tの値を増やしていくのを大きくしてしまった。小さくするとかなりスムーズになる。

Swift Playgroundを使うことですぐにフィードバックを得られます。

様々な実験ができます。

f:id:niwatako:20180302105416j:plain

f:id:niwatako:20180302105427j:plain

[広告]面白かったら、ためになったら

  • はてなブックマークSwift タグをつけてブックマーク!
  • 「インターネットで生活を楽しく豊かにしたい」仲間を募集しています
  • Bitcoin: 3KGqXtR1ZaGVdkvcw8CCNrkDxDhdbZBYHL