こんにちは、NUMです。
最近はちょっと制作をお休みして仕事の方の勉強をしていました。
自分の趣味の範囲だけの勉強をしていると、どうしても知識が偏ってしまうので
仕事の面でスキルアップしたか感じにくいところがありました。
でも、ジェネラティブアートを趣味にしていて仕事に活きる場面も沢山ありました。
以下は僕が感じたことです。
プログラムを書けるようになる
最適化を意識するようになる
数学を使う案件に拒否反応がなくなる
難しい概念を噛み砕いて説明できるようになる（ブログを書いているので実感している）
まあ趣味も仕事もバランスが大事ですね笑
今回は黄金数という不思議な性質を持つ数を使って遊んだり、調べたことを書いていこうと思います。
目次
黄金数とは
黄金数とは(1+√5)/2です。φ（ファイ）という記号で記載されたりします。
黄金数を少数にすると1.618….（....の部分は無限に続く非循環少数）となります。
1.618という数を見てピンときた人がいると思いますが
黄金比の1：1.618で使用されている数字です。
黄金比は芸術でよく耳にしますよね。モナリザ、ミロのヴィーナス、富嶽三十六景など。
でも芸術だけじゃなくて自然界にも頻繁に現れます。
植物の葉序、ひまわりの種の配置、ウサギのつがいなど他にも沢山ありますが
これには全て黄金数が現れてきます。
葉序の場合、葉が重ならず効率よく太陽光が当たる角度（黄金角）で葉が配列されていくと言われています。
ひまわりの種の場合、ひまわりの種がついている円の中に、一番多く種を保有できる並びと言われています。この並びにも黄金数が関係しています。
不思議ですね。こういう都市伝説的なの結構好きなんですよね。
これにはフィボナッチ数列という数字の並びが関係しています。
フィボナッチ数列
以下のような数列をフィボナッチ数列と言います。
1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233, 377…..
この数列は「n番目= n-1番目 + n-2番目」（ただし最初の1を除く）という特徴を持っています。
でも、この数列が黄金比にどう関わっているのか疑問ですね。
数列の隣り合う数を分数にして（n/n-1）少数で表してみます。
1/1 = 1.000
2/1 = 2.000
3/2 = 1.500
5/3 = 1.666
8/5 = 1.600
13/8 = 1.625
21/13 = 1.615
34/21 = 1.619
55/34 = 1.617
数が大きくなるにつれて、ある数に近づいていくことが分かります。
それは「1.618」です。さっきのパートで説明した黄金数です。
ちなみにフィボナッチ数列の一般項は以下となります。ここにも黄金数がありますね。
黄金数の特殊な性質は他にもあります。
「0.618…」（黄金数から1を引いた値）で1を割った時、黄金数が現れます。
1/0.618… = 1.618…
これをx = 1.618…を使った方程式で表し、方程式を解きます。
x = 1 / x - 1
x (x - 1) = 1
x^2 - x = 1
x^2 - x -1 = 0
この方程式は普通には解けないので、解の公式を使って解くと、、、また出てきた笑
x = (1+√5)/2, (1-√5)/2
フィボナッチ数列と黄金数は切っても切り離せない関係のようです。
以下は任意の数のフィボナッチ数列を作成するプログラムです。
/**
* 指定した要素数のフィボナッチ数列を作成
* @param1 int 配列の要素数
* @return int[] フィボナッチ数列
*/
int[] calcFibonacciSequence(int len) {
int[] fibo = {0, 1};
int startIndex = fibo.length;
// 指定要素数までフィボナッチ数を配列に追加していく
for (int i = startIndex; i<len; i++) {
fibo = append(fibo, fibo[i-1]+fibo[i-2]); // (n-1)+(n-2)の値を配列に追加
}
return fibo;
}
次は上記プログラムで作成したフィボナッチ数列を使って色んな形を作っていきます。
フィボナッチ数列の可視化
次は待ちに待ったProcessingでフィボナッチ数列の可視化の実装です。
可視化の手順は以下です。これを繰り返し実行します。
1. フィボナッチ数を辺の長さに使って正方形作成
2. 次のフィボナッチ数を右（x座標：フィボナッチ数×拡大値 , y座標：0）に配置
3. 次のフィボナッチ数を下（x座標：0 , y座標：フィボナッチ数×拡大値）に配置
なぜこのような手順なのかというと、フィボナッチ数列の特徴を考えると分かります。
1, 1, 2, 3, 5, 8, 13, 21, 34, , 55, 89, 144, 233, 377…..
図1は手順を可視化したものです。
フィボナッチ数が3の場合、2（1つ前）と1（二つ前）が正方形の辺の長さになるので
3の正方形の左側が2と1の正方形の辺とぴったりと一致します。（赤色の辺の部分）
同様に5の場合は3,2なので正方形の上側が一致します。
図1
この仕組みを使ってフィボナッチ正方形を右、下と交互に描画していくプログラムが以下です。
/**
* フィボナッチ数を辺の長さとした正方形を描画
* @param1 int[] フィボナッチ数列
* @param2 int 拡大値
*/
void showFibonacciSquare(int[] fiboArray, float scl) {
int arrayLen = fiboArray.length-1;
for (int i = 0; i < arrayLen; i++) {
float x = 0;
float y = 0;
float fiboNum = fiboArray[i] * scl; // フィボナッチ数
float sideLen = fiboArray[i+1] * scl; //辺の長さ
// 正方形の座標は数列の値を使用
// パターンは (x,0) or (0,y)の繰り返し
if (i % 2 == 1) {
x = fiboNum;
y = 0;
} else {
x = 0;
y = fiboNum;
}
rect(x,y,int(sideLen), int(sideLen));
}
}
上記プログラムをカスタマイズしてみました。
3色使うと、隣あう正方形の色は被らないので綺麗に見えますね。
色をどのようにして循環させるかはちょっと頭を捻らないといけないので是非試してみてください。
フェルマー螺旋（黄金角）の可視化
フェルマー螺旋とは極座標でr = ±a√θで表現できる曲線です。
と聞いても僕は訳わからなかったのでもう少し噛み砕くと
フェルマー螺旋における半径は、a：拡大値とθ：角度を掛けることで求めることができます。
つまり、aが大きいと半径も大きくなるということですね。
黄金数を角度にしたものを黄金角（137.508°）と言います。
以下はフェルマー螺旋を黄金角で回転させていくプログラムです。
/**
* 黄金角を使ったフェルマー螺旋の可視化
* @param1 int 螺旋の中心x座標
* @param2 int 螺旋の中心y座標
* @param3 int 拡大値
* @param4 int 点の描画数
*/
void fermatSpiral(int x, int y ,int scl,int iterations) {
float goldenNum = (1 + sqrt(5)) / 2; // 黄金数
for (int ang = 0; ang < iterations; ang++) {
float r = scl * sqrt(ang); // フェルマー螺旋の半径：拡大値×√角度
float theta = TWO_PI * ang * goldenNum; // iが増加するごとに黄金角(137.508°)ずつ回転していく
float cosx = x + r * cos(theta);
float siny = y + r * sin(theta);
point(cosx, siny);
}
}
描画するとある形が浮かび上がります。そうです、ひまわりの種の模様です。
角度を黄金角に指定した場合でないと、この模様は出てこないのです。
角度によってこんなに形が変化するというのは、ジェネラティブアートの楽しさですよね。
まとめ
以上が黄金数についての内容になります。
実は、黄金長方形の黄金螺旋分割のプログラムを作りたかったのですが、
全然うまくいかず渋々諦めてしまいました。
時間が経てばひらめくかもなので今回はこの内容で終わろうと思います、、、
（分かりやすい参考文献があれば教えてほしいです。）
最後に黄金数を使った応用作品の紹介です。
こちらはフェルマー螺旋にチューリングパターンを使った作品です。
どちらも自然界で模様を作り出す数式です。
何だか爬虫類の鱗を思わせるような模様ですよね。
鱗の配置がとても心地よく、ずっと見ていられます。
たまたまフェルマー螺旋にチューリングパターンを組み合わせてみましたが、
この二つは親和性高そうな気がします。
これからも自分の作品に積極的に黄金数を取り入れて、無意識に美しいと感じてもらえるような作品を作っていきたいと思いました。
最後まで読んでいただきありがとうございました！
参考文献
Comments