IFSを使ったフラクタルの描画
24
IFSを 使 っ た フ ラ ク タ ル の 描 画 岩 淵 勇 樹 (@butchi_y)
-
Upload
yuuki-iwabuchi -
Category
Technology
-
view
66 -
download
0
Transcript of IFSを使ったフラクタルの描画
IFSを使ったフラクタルの描画岩淵 勇樹 (@butchi_y)
まずは個人活動の紹介フラクタル音楽
Twitter, Instagramで #フラクタル音楽 を検索！
0:00 / 0:12
フラクタルとは？「自己相似」という概念相似図形のコピーが自分自身を構成しているこれを幾何学的に捉えたもの
フラクタルの例コッホ曲線 (Koch curve)
0. 線分を引く1. 線分を3等分し、中央の線分を1辺とする正三角形を描き、
下の辺を消す2. 得られたそれぞれの線分に対して同じ操作を繰り返す
この操作を無限に繰り返して得られる図形がコッホ曲線
参考: https://ja.wikipedia.org/wiki/コッホ曲線
フラクタルの例シェルピンスキーのギャスケット (Sierpinski gasket)
0. 正三角形を描く1. 正三角形の中央の逆正三角形を取り除く2. 得られたそれぞれの正三角形に対して同じ操作を繰り返す
この操作を無限に繰り返して得られる図形がシェルピンスキーのギャスケット
参考: https://ja.wikipedia.org/wiki/シェルピンスキーのギャスケット
IFSとはIterated Function System
反復関数系。
「関数(function)による変換」を「反復(iteration)」して得られるフラクタル
先ほどの例でいうと
コッホ曲線1. 点集合を に縮小
i. 回転せず (0, 0) の位置に配置ii. 60 回転し ( , 0) の位置に配置
iii. −60 回転し ( , ) の位置に配置iv. 回転せず ( , 0) の位置に配置
この操作を無限回繰り返す
31
∘31
∘21
6√3
32
数式で書くと
コッホ曲線f (x) = x
f (x) = e x+
f (x) = e x+ ( + i)
f (x) = x+
※ 通常はアフィン変換（行列計算）を使いますが、 個人の趣向で複素平面上の演算にしています。
1 31
2 31 3
πi
31
3 31 − 3
πi
21
6√3
4 31
32
先ほどの例でいうと
シェルピンスキーのギャスケット1. 点集合を に縮小
i. 回転せず (0, 0) の位置に配置ii. 回転せず ( , 0) の位置に配置
iii. 回転せず ( , ) の位置に配置
この操作を無限回繰り返す
21
21
41
4√3
数式で書くと
シェルピンスキーのギャスケットf (x) = x
f (x) = x+ ( + i)
f (x) = x+
1 21
2 21
41
4√3
3 21
21
どこからスタートするか初期集合は、点でも 線でも 面でもいい
最終的には 点でも 線でも 面でもなくなる
反復回数: 1
どこからスタートするか初期集合は、点でも 線でも 面でもいい
最終的には 点でも 線でも 面でもなくなる
反復回数: 5
どこからスタートするか初期集合は、点でも 線でも 面でもいい
最終的には 点でも 線でも 面でもなくなる
反復回数: 10
ここでデモ
fractalifs今回のために制作したHTML5(JavaScript)製フラクタルエディター
https://butchi.github.io/fractalifs/（スマホ未対応…。）
fractalifsの特徴フラクタルを点集合として描画内部的には複素IFSを利用インタラクティブに編集できる
作ってみてわかったことかなり広い範囲のフラクタルが描画できるが、本手法だけではカバーしきれない（ex: コッホ雪片）矢印の方向（複素数の偏角）が重要
気づき
配列複素数（点）、線分は配列ライクオブジェクトにするのがよさげ
点は get x で this[0] 、 get y で this[1] を返す
線分は get start で this[0] 、 get end で this[1] を返す
矢印矢印を引くのはCanvasよりSVGの方がよさげ
きれいな線が引ける描画コストも低い（はず）
複素数演算複素数演算の plus , sub , mult 等はユーティリティー関数として util.js にまとめて
import {plus, sub, mult} from './util';
のようにimportすればどのJavaScriptファイルからでも気軽に呼べる
