Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。

フィボナッチ数列というのは、簡単に言うと「隣り合う二項の和が次項の値になる」数列のこと(0, 1, 1, 2, 3, 5, 8, 13, 21, 34...)。植物の葉の付き方や、花弁の配置、星雲の渦巻きなど、自然界の至るところにあるため本質的な美を内包するとされ、多くのデザインで取り入れられています。

有名なところではローマの詩人ウェルギリウスが叙事詩『アエネイス』の構成に用いたとか、モーツァルトのソナタやベートーベンの交響曲にも使われてたりとか、ル・コルビュジェの「モデュロール」の元になってたりするようですね。隣接する二項の比が、どんどん黄金比に近付いていくことでも有名です。

というわけで、そのフィボナッチ数列をサクッと取得できるJavaScriptを作りました。ついでにSugamo.cssとかいう謎なフロントエンド集会に持ち込んでみたり。

1. var fib = {
2. num: [0,1,1],
3.  
4. get: function(n){
5. n = Number(n);
6. if (n < 0) return false;
7. if (isNaN(n)) return false;
8.  
9. if (!fib.num[n]) {
10. for (var i=2; i<n+1; i++){
11. fib.num[i] = fib.num[i-1] + fib.num[i-2];
12. }
13. }
14. return fib.num[n];
15. },
16.  
17. list: function(n){
18. n = Number(n);
19. if (n < 0) return false;
20. if (isNaN(n)) return false;
21.  
22. var list = [];
23. if (!fib.num[n]) fib.get(n);
24. for (var i=0; i<n+1; i++) {
25. list.push(fib.num[i]);
26. }
27. return list;
28. }
29. }

fib.get()で指定した項のフィボナッチ数を。fib.list()で指定項までの数列を返します。以下にデモを用意してます。

漸増する性質を利用して、以下のようなアニメーションに使用できます。

» move until F₁₅ px

グリッドや視線誘導に使えるかもしれません。

» A Fibonacci grids

各辺がフィボナッチ数な正方形を並べ、対角を通過する1/4円を描画していくと、美しい螺旋を描きます。この、いわゆる「フィボナッチ螺旋」はフラクタルな図形です。

» A Fibonacci spiral

まあ無理に使う必要もないし、多くの人にとっては単なる薀蓄ですが... 個人的には、複雑系とか遺伝的アルゴリズムなんかの入り口になった感慨深い法則です。さて、何に使えるかな？