プログラマのための数学LT会 (2017-03-29) の発表スライドです。 フラクタルの基礎となるIFS（反復関数系）にもとづいて フラクタルの概念を説明し、 実践としてIFSに基づくプログラム「fractalifs」を紹介します。

1. IFSを使ったフラクタルの描画
岩淵 勇樹 (@butchi_y)

2. まずは個人活動の紹介
フラクタル音楽
Twitter, Instagramで #フラクタル音楽 を検索！
0:00 / 0:12

3. フラクタルとは？
「自己相似」という概念
相似図形のコピーが自分自身を構成している
これを幾何学的に捉えたもの

4. フラクタルの例
コッホ曲線 (Koch curve)
0. 線分を引く
1. 線分を3等分し、中央の線分を1辺とする正三角形を描き、
下の辺を消す
2. 得られたそれぞれの線分に対して同じ操作を繰り返す
この操作を無限に繰り返して得られる図形がコッホ曲線
参考: https://ja.wikipedia.org/wiki/コッホ曲線

5. フラクタルの例
シェルピンスキーのギャスケット (Sierpinski gasket)
0. 正三角形を描く
1. 正三角形の中央の逆正三角形を取り除く
2. 得られたそれぞれの正三角形に対して同じ操作を繰り返す
この操作を無限に繰り返して得られる図形がシェルピンスキーの
ギャスケット
参考: https://ja.wikipedia.org/wiki/シェルピンスキーのギャスケット

6. IFSとは
Iterated Function System
反復関数系。
「関数(function)による変換」
を
「反復(iteration)」
して得られるフラクタル

7. 先ほどの例でいうと
コッホ曲線
1. 点集合を に縮小
i. 回転せず (0, 0) の位置に配置
ii. 60 回転し ( , 0) の位置に配置
iii. −60 回転し ( , ) の位置に配置
iv. 回転せず ( , 0) の位置に配置
この操作を無限回繰り返す
3
1
∘
3
1
∘
2
1
6
√3
3
2

8. 数式で書くと
コッホ曲線
f (x) = x
f (x) = e x +
f (x) = e x + ( + i)
f (x) = x +
※ 通常はアフィン変換（行列計算）を使いますが、
個人の趣向で複素平面上の演算にしています。
1 3
1
2 3
1 3
πi
3
1
3 3
1 − 3
πi
2
1
6
√3
4 3
1
3
2

9. 先ほどの例でいうと
シェルピンスキーのギャスケット
1. 点集合を に縮小
i. 回転せず (0, 0) の位置に配置
ii. 回転せず ( , 0) の位置に配置
iii. 回転せず ( , ) の位置に配置
この操作を無限回繰り返す
2
1
2
1
4
1
4
√3

10. 数式で書くと
シェルピンスキーのギャスケット
f (x) = x
f (x) = x + ( + i)
f (x) = x +
1 2
1
2 2
1
4
1
4
√3
3 2
1
2
1

11. どこからスタートするか
初期集合は、点でも 線でも 面でもいい
最終的には 点でも 線でも 面でもなくなる
反復回数: 1

12. どこからスタートするか
初期集合は、点でも 線でも 面でもいい
最終的には 点でも 線でも 面でもなくなる
反復回数: 5

13. どこからスタートするか
初期集合は、点でも 線でも 面でもいい
最終的には 点でも 線でも 面でもなくなる
反復回数: 10

14. ここでデモ

15. fractalifs
今回のために制作した
HTML5(JavaScript)製フラクタルエディター
https://butchi.github.io/fractalifs/
（スマホ未対応…。）

16. fractalifsの特徴
フラクタルを点集合として描画
内部的には複素IFSを利用
インタラクティブに編集できる

17. 作ってみてわかったこと
かなり広い範囲のフラクタルが描画できるが、本手法だけで
はカバーしきれない（ex: コッホ雪片）
矢印の方向（複素数の偏角）が重要

18. 自己紹介
岩淵 勇樹
2012年金沢大学自然科学研究科修了
博士（工学）
個人サイト: http://butchi.jp/

19. ご清聴ありがとうございました。
https://butchi.github.io/fractalifs/

21. 気づき

22. 配列
複素数（点）、線分は配列ライクオブジェクトにするのがよ
さげ
点は get x で this[0] 、 get y で this[1] を返す
線分は get start で this[0] 、 get end で this[1] を返
す

23. 矢印
矢印を引くのはCanvasよりSVGの方がよさげ
きれいな線が引ける
描画コストも低い（はず）

24. 複素数演算
複素数演算の plus , sub , mult 等はユーティリティー関数として
util.js にまとめて
import {plus, sub, mult} from './util';
のようにimportすればどのJavaScriptファイルからでも気軽に呼
べる