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

はじめに

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

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

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

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

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

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

もくじ

はじめに
方法
- 原理
- 実装方法
結果
- アニメーション
- インタラクティブ版
プログラム
参考
HTML5 Canvasによるアニメーションの関連記事

方法

原理

やりたいことは、

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

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

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

フォーゲルのモデルでは、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番目程度までの位置に円を描画することで、フォーゲルのモデルにおけるヒマワリの種子の配置をみることができます。