みなさん、フラクタルはお好きですか？私は大好きです。
妻や同僚にフラクタルの美しさを語ったら「フラクタルって・・なんだっけ・・？」と言われたので、この記事ではフラクタルの美しさを楽しみながら、自作した Web サービス Fractalium を使ってフラクタルを作ってみる方法を解説します。
AI といっしょに Fractalium を開発した話もあるよ。
1. フラクタルとは
例えばこんなやつです。
上の図は「シェルピンスキーの三角形」と言う有名なフラクタルです。
フラクタルは「自己相似」といって、その図形の一部に自分自身が現れます。
上の図系の左下の三角形を拡大してみましょう。
おや！最初の図形と同じ形になってますね！このようにどれだけ拡大しても同じ図形が繰り返される無限ループな図形がフラクタルです。
（厳密な定義は Wikipedia を読んでください）
フラクタルの作られ方
さて、ではこのシェルペンスキーの三角形はどのように作られているのでしょうか？
| 第1世代 | 第2世代 | 第3世代 | 第4世代 | 第5世代 |
|---|---|---|---|---|
 |
 |
 |
 |
 |
- 上の図のように、最初に1つの大きな三角形を書きます。（第1世代）
- そして、1つの三角形を3つの小さな三角形に置き換えます。（第2世代）
- さらに第2世代のそれぞれの三角形を、更に小さな3つの三角形で置き換えます。（第3世代）
このように、「1つの三角形を3つの小さな三角形に置き換える」操作を無限に繰り返すことでシェルペンスキーの三角形が出来上がります。
なので、シェルペンスキーの三角形を書くために必要な情報はたったの2つです。
- もとの図形（大きな3角形）
- 次の世代になるときの、複製の配置（小さな3つの三角形それぞれの配置）
以下は後で紹介する Fractalium の画面ですが、上が1のもとになる図形、下が2のコピーの配置ですね！
次の世代の画像を作る場合、その世代の各三角形に対して、2のコピーを適用してあげると次の世代が作れます。
様々なフラクタル
それでは、様々な美しいフラクタルを見ていきましょう！
それぞれのタイトルが Fractalium のリンクになっているので、クリックするとそのフラクタルの作られ方を見たり、世代（depth）を変更したりすることができます。
ピタゴラスの木
ブロッコリーみたいなフラクタルですね。「正方形の上に、斜め45度の正方形を２つ追加する」というルールで作られるフラクタルです。
コッホ曲線
雪の結晶のようなフラクタル。無限にチクチクしてます。
Vicsek fractal
タイルの模様のようなフラクタル。フラクタルをデザインに取り入れるとオシャレだといつも思ってます。
ドラゴン曲線
複雑な形ですが、「1本の線を直角な2本の線に置き換える」というとてもシンプルなルールから生まれる図形。シンプルなルールが生む複雑さがとても私は好きです。
木
そのへんに生えてる木も実はフラクタル的な構造を持っています。「ある枝から斜めにさらに枝が生えてくる」というシンプルなルールを適用していくとフラクタルが生まれるのです。
サイクロントライアングル（自作）
これは私が見つけたフラクタルの中でも一番のお気に入りです。
三角形の中に三角形が現れ、サイクロンのように回転していきます。
しかし、実はルールは、1本の線を2つに分けて、片方を回転し長さをちょっと長くしただけ。シンプルながら不思議な図形です。
さきっちょを拡大してみると複雑な模様が現れます。
2. Fractalium
美しいフラクタルの世界はいかがでしたでしょうか。
これらの画像はすべて Fractalium で描いたものです。
Fractalium は誰でも簡単にフラクタルを作れる Web サービスです。少なくとも今のところは無料で使えます。
フラクタルを作る
フラクタルを選ぶ
https://halhorn.github.io/fractalium/?from=qiita にアクセスすると表示するフラクタルを選ぶ画面になります。
まずはプリセットからフラクタルを表示してみましょう。
選ぶとそのフラクタルが表示されます。
別のフラクタルを選ぶ場合、「Open」ボタンを押すと別のフラクタルを選べます。「New Fractal」を押せば1から自分で作ることもできます。
今回はシェルペンスキーの三角形を選んでみましょう。
フラクタルを編集する
開くと以下のような画面が出てきます。
（スマホの場合配置が異なります）
depth
まずは、 depth を変えてみましょう。左右にスライダーを動かします。
| depth:1 | depth:2 | depth:3 | depth:4 | depth:5 |
|---|---|---|---|---|
|
|
|
|
|
depth を大きくするたびにフラクタルが細かくなっていきますね！
Placement
次に Placement パネルから、フラクタルの次の世代を作るときの複製の配置を変えてみましょう。
右下の三角形を選択して、ドラッグ&ドロップでぐりぐり動かしてみましょう。
全体の図形も変形しましたね！
次に Placement 画面の選択された黄色枠の外側をドラッグしてみましょう。三角形が回転し、フラクタル全体も変形します。
また、黄色い枠の端っこをドラッグ&ドロップするか、選択された状態でピンチイン・ピンチアウトすることで複製の拡大縮小もできます。
「snap」ボタンを押すか Ctrl キーを押すと、位置や角度が適当な値にスナップされます。水平な位置で揃えたい、切りの良い角度にしたい場合に使えます。
そんなこんなでいじっているともととは全く違うフラクタルが出来上がりました。
Seed
もとの図形を三角形じゃない形にしたければ「Seed」パネルを編集します。
「Shape」ボタンから四角形、星型などのプリセットを選んでもいいですし、直接 Seed パネルに線を描くこともできます。
作ったフラクタルを保存・共有する
いじっているうちになんだかまた美しいフラクタルを作ってしまいました。蝶みたい。
作ったフラクタルを保存するには、 Share ボタンから「Copy Link」を押しましょう。
リンクがコピーされます。これを何処かにメモしておけば、後でまた同じ画面を開くことができます。もしくは Twitter なりどこにでもシェアすることで他の人も同じフラクタルを見ることができます。
ちなみに上のフラクタルの URL はこちら。
https://halhorn.github.io/fractalium/?from=share#v=1&depth=11&g=0&line=0.0,0.0,0.0,1.0&line=-0.25,0.75,0.0,1.0&line=0.25,0.75,0.0,1.0&replica=x:0.0,y:0.0,r:0.0,s:0.753611&replica=x:-0.25,y:0.0,r:1.5708,s:0.5&replica=x:0.276335,y:-0.00349343,r:-1.5708,s:0.5
技術的なお話をすると、Seed の設定や Placement の設定など、フラクタルを構成するルールを URL で表現しています。
Share ボタンから「Download image」すれば画像を保存できます。
ただし保存時には見栄えするようやや線を太くしてたりするので編集画面そのままの絵にはなりません。
みなさんもぜひいろいろな美しいフラクタルを作って、シェアしてください！
X: @halhorn にリプライで教えてくれたり、 #fractalium をつけて投稿してくれると私がとても喜びます！