読者です 読者をやめる 読者になる 読者になる

roombaの日記

読書・非線形科学・プログラミング・アート・etc...

ヒマワリと黄金比の関係をインタラクティブなアニメーションにする【Javascript】【Canvas】

はじめに

先日、『数学で生命の謎を解く』という本を読みました。この本の第4章「花の中にみつかるフィボナッチ」には、植物の葉・ヒマワリの種子・パイナップルの模様がフィボナッチ数列*1と深く関わっていることが説明されています。

「花の中のフィボナッチ」は数学と生命科学の関係を述べた文章に必ずと言っていいほど登場する鉄板ネタなのですが、本書には以下のような興味深いモデル(フォーゲルのモデル)が紹介されていました。

1979年にミュンヘン工業大学のヘルムート・フォーゲルが、ヒマワリの種子が取る幾何の単純な数学的表現を考え、それを使って、そのような配置に黄金角が特別適している理由を説明した。*2
フォーゲルのモデルでは、n番目の原基は137.5度のn倍の角度に置かれ、中心からの距離はnの平方根に比例する。これらの二つの数によって原基の位置が決定し、ホフマイスターの生長らせんは、中心から外側へ行くにつれ巻き方がきつくなる、フェルマーらせんと呼ばれるものであることが分かる。
フォーゲルはこのモデルを用いて、同じ生長らせんを使いながらも黄金角137.5度からわずかにずらしたときに、花頭がどうなるかを導き出した。結果は、(中略)黄金角を使ったときにだけ、種子は隙間や重なりを作らずにびっしり並ぶのだ。角度を10分の1度変えただけで、パターンが壊れて一種類のらせんだけになり、種子のあいだに隙間ができてしまう。


数学で生命の謎を解く』p59 (太字は引用者による)

これを自分で実装し、アニメーションにしてみました!

(↓これは静止画です)
f:id:roomba:20151028171134p:plain

もくじ

方法

原理

やりたいことは、

  1. 「ヒマワリの種子がどのような配置をとるか」を知り、
  2. その配置を描画すること

です。つまり、それぞれの種子の座標を数式で表すことができればほとんど終わりです。


幸いなことに、上に引用した文章の中に必要な情報がすべて書かれています。もう一度引用すると:

フォーゲルのモデルでは、n番目の原基は137.5度のn倍の角度に置かれ、中心からの距離はnの平方根に比例する

(注:「原基」は「種子」と読みかえればおおむね大丈夫です。)


これを数式に置き換えましょう。原点を中心とし、原点からの距離をr、x軸から反時計回りの角度をθとするとき、上記の引用により、n番目の種子に関するr, θは以下のように表せることになります。
{ \displaystyle
\begin{eqnarray}
  \begin{cases}
    r = r_0 \sqrt{n} & 
    \\
    \theta = n \theta_0
  \end{cases}
\end{eqnarray}
}

ここでr0,は比例定数で、ちょうど良い値を試行錯誤で探せばよいでしょう。θ0は調整可能なパラメータで、これが黄金角137.5度のときにヒマワリの種子のような配置が実現され、黄金角からずれたときには別の配置をとることが予想されます。したがって、後ほどこのパラメータを変化させた時の配置の変化をアニメーション化することになります。

上記のr, θによる極座標表記をxy座標に変換するには、
{ \displaystyle
\begin{eqnarray}
  \begin{cases}
    x = r cos\theta & 
    \\
    y = r sin\theta
  \end{cases}
\end{eqnarray}
}
というよく知られた変換式を用います。下図も参考に。
f:id:roomba:20151028161643j:plain

これらを考慮すると、n番目の種子のxy座標は以下の式で得られることになりますね。
{ \displaystyle
\begin{eqnarray}
  \begin{cases}
    x =  r_0 \sqrt{n} cos(n \theta_0) & 
    \\
    y = r_0 \sqrt{n} sin(n \theta_0)
  \end{cases}
\end{eqnarray}
}
この式に基づき、たとえばn=1番目からn=100番目程度までの位置に円を描画することで、フォーゲルのモデルにおけるヒマワリの種子の配置をみることができます。

実装方法

上のような式に基づいてお絵描きをします。HTML5 Canvasを用いました。

上式に含まれていたパラメータθ0を黄金角137.5度からプラスマイナス5度程度に変化させ、種子の配置がどのように変化するかをアニメーションにします。

結果

とりあえずできたものを貼付けます。ブラウザ上で動くはずですが、スクロール中はアニメーションが停止するかもしれません。

アニメーション

自動的にスタートするはずですが、動いていなかったらresetをクリック(タップ)後にstartをクリック(タップ)してください。

  • stopをクリック(タップ)すると一時停止
  • resetをクリック(タップ)するとはじめに戻る
  • startをクリック(タップ)すると再開


θ0 (theta0)が黄金角137.5度付近になったときに種子がうまく散らばっているのが見て取れたでしょうか?


参考までに、θ0 = 137, 137.5, 138度における画像を以下に貼っておきます。
f:id:roomba:20151028171028j:plain

インタラクティブ

先ほどはtheta0を自動的に変化させるだけでしたが、こちらはスライドバーを自分で動かすことによって種子の配置が変化する様子を観察することができます。



プログラム

以下のリンクに公開しています。自由にご利用下さい。
Fibonacci - jsdo.it - Share JavaScript, HTML5 and CSS

わからないところがあれば気軽にコメントお願いします。

参考

以下の書籍から着想を得ました。

数学で生命の謎を解く

数学で生命の謎を解く

*1:フィボナッチ数 - Wikipedia

*2:Vogel, Helmut. "A better way to construct the sunflower head." Mathematical biosciences 44.3 (1979): 179-189.