最初に左上のオブジェクトをランダム色で生成し、その後R、G、Bをそれぞれ一定量(Increment value)で変化させながら、左上→左下→右側の列上→下の順に描画しています。
生成されるパターンや印象は、初期値とRGBそれぞれの変化量によって変わります。平面グラフでは、RGBの値の変化をそれぞれ折れ線で表示しました。3次元グラフでは、RGBの軸の中に生成された色をプロットすることによって、どのくらいの色数がどのような分布で生成されるのかを確認できるようにしました。
R、G、Bの変化量は一定の幅の中でランダムに決定していますが、この幅(Increment Range)を変更できるようにしています。Increment Rangeが小さい時、平面グラフの変化の勾配は比較的ゆるやかで、生成される値もバリエーションに富んでいます。
反対に、Increment Rangeが大きいと平面グラフの変化は極端になり0と255の間を細かく行き来します。生成される色の数がすくなくなり、プロットされる点の数も少なくなります。この時、六角形の模様は同じ色の繰り返しによる一定のパターンが生まれやすくなることも分かります。
RGB初期値:
六角形のサイズ:
Size:
x方向の個数: , y方向の個数:
増分の振れ幅:
Increment Range:
Increment value: R:, G: , B:

サイズ、増分の幅を変更し [redraw]をクリックすると反映されます。 同じ値でも [redraw]をクリックする度に生成されるパターンが変化します。
上記で生成したR,G,Bの値の変化グラフ。 Increment valueが小さいとグラフの勾配はなだらかになり、Increment valueが大きいとグラフは細かい上下を繰り返します。
このグラフを表示することによって、RGBのうち2つ以上のグラフの増減周期が偶然重なっているような場合に、六角形の模様にも規則性が生まれ、美しいパターンが生成されることが分かりました。
上記で生成したR,G,Bの値の分布を、3次元レンダリングしています。生成される色数やかたよりが、模様によって変わるのがわかります。
このグラフを表示することによって、六角形のパターンに一定の美しい規則性が見出されるような場合、3次元グラフ上の色の分布が一つの領域に偏っていたり、一つの立体図形の中に収まっていたり、規則性を持って整列していたりすることが分かりました(サンプル画像)。
*:図形描画、平面グラフの描画にはtmlib.jsを、3次元グラフのアニメーションにはthree.jsを用いた。

複数のcanvasを設置し、同一の引数を、図形描画/平面グラフ/3次元グラフで表現するテスト
作成者:中村由樹子(nakamura.yukiko@ocha.ac.jp)
2017/2/23