今回至上のライブコーディング! 「Swift によるアルゴリズムの可視化」 #tryswiftconf

はじめに

モバイルアプリサービス部の中安です。

セッションのレポートを書かせていただきます。

講演概要

公式ページからの引用

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

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

スライド資料

内容

NSScreencastという教材サイトに携われているベンさんの講演でした。

概要にもあるように何の可視化なのかというと「ベジェ曲線」についてのアルゴリズムです。UIBezierPathはCoreGraphicを使った実装ではよく出てきますが、はっきりいうとその仕組というか、ちゃんと理解はしていなかったように思います。

考え方

登壇者のスライドから拝借したのですが

青い点が始点と終点です。そして灰色の点が「コントロールポイント」(制御点)と呼ばれ、二つ存在します。 この始点と一つ目の制御点、一つ目の制御点と二つ目の制御点、二つ目の制御点と終点の間の N%　の位置に新たな点が打たれます(赤い点)。 そして、それぞれの間にも同じように求めた緑の点が打たれ、それらの間にもオレンジの点が打たれます。 これらの点は同じ色同士で直線が結ばれます。

この N% が 0%〜100% になるにつれ　オレンジの点が移動していくわけですが、その軌跡がベジェ曲線になるとのことです。

ライブコーディング

この説明だけで終始すると、もしかしたら算術的な話で眠くなったかもしれません。

でも、登壇者はplaygroundを使ってアルゴリズムを説明しながらライブコーディングをしてくれました。 描画のためのViewを置き、点が打たれ、線でつながり、 UISliderを動かすとともに生き物のように全ての要素が動いていく様は面白いものでした。

「論ずるより動かしてみせたほうが早い」

視覚的なフィードバックがすぐに得られるという意味では、Processingでのコーティングを見ているかのようでした。

複数の制御点を打っても理屈は同じ

デモの最後は二点に限らず、複数の制御点を打つ場合のコードにまで言及されました。(zip関数を使うなど)

詳しい話はこちらの方を参照いただくといいと思いますが、

How Bézier Paths Work

何にせよ、フィードバックがすぐ見れるのでよいですよね。

感想

今回のセッションの中でもっとも面白かったセッションの一つでした。やっぱりライブコーディングは見てて楽しい。会場の人とのやりとりもありますし。

そしてplaygroundの使い方のひとつの提案をもらったように思いました。さっそく実際に自分でも書いてみたくなりましたもの。