見て、試して、... 楽しもう

概要

HTML5とJavascriptで記述された小さな、 しかし楽しめる“遊び心プログラム”を集めたものです。 見るだけでも楽しめますが、 用意されている設定以外にも自分で新たな設定をすること等をして 自分だけの楽しみ方もできるように作っています。

HTML5のCanvas機能等を使っています。 新たに何かをインストールする必要はなく、 お使いのブラウザ (ただしHTML5に対応しているブラウザ) の中で 実行させることができます。 確認はChromeで行なっています。

一覧

ここに掲載しているプログラムの概要を示します。 使い方等の詳細は、このページの下部の補足の中にあります。

Mandelbrot描画 Mandelbrot (マンデルブロー) フラクタル集合の近似画像を、 与えられた範囲と描画方法に基づいて描画します。  (補足へ)
立体視画像の作成: 2変数関数版 z = F(x,y) と表現される2変数関数のグラフを、 立体的に見ることができるようにします。  (補足へ)
グラフ描画 y = F(x) 版 y = F(x) と表現される通常の関数表現のグラフを描画します。  (補足へ)
媒介変数版 媒介変数 t を使って x = F(t)、y = G(t) と表現されるグラフを描画します。  (補足へ)
極座標関数版 極座標系 (r, θ) を使って r = F(θ) と表現されるグラフを描画します。  (補足へ)
様々なモアレ LL, CC, CL, CP, CR, PP, PL, PR, RR, RL 単純な繰返し模様を重ねると縞模様 (モアレ, 干渉縞) が見えることがあります。 L:平行線群、 C:同心円群、 P:小円群、 R:放射線群 を組み合わせ、一方を少しずつ動かしてモアレの変化を見ることができます。  (補足へ)
ランダムドット群の重ね合わせ 2つの同じランダムドット群の一方を回転/縮小して重ね合わせると、不動点を中心にして同心円/放射/渦巻といった模様が見えてきます。  (補足へ)
回転移動円と点の軌跡 サイクロイド外サイクロイド内サイクロイド 円が直線状を滑ることなく回転移動する時、円上の点(あるいは円内の点)はどのような曲線を描くでしょうか。また直線ではなく他の円の外側/内側を回転移動する場合はどうでしょうか。 それを実験するものです。  (補足へ)

履歴

補足

1. Mandelbrot描画

【使い方】については、上の「Mandelbrot描画」をクリックした先にあります。

【その他】
Mandelbrot集合とは、 ある式を繰り返し適用した時に発散しないようにできる複素数値の集合です(*)。 どんなに小さな部分を取っても類似の形状が出現する フラクタル画像の代表例として知られています。
詳しくは 「渕上季代絵:CによるフラクタルCG, サイエンス社 1993.3」 をご覧下さい。 疑似Mandelbrot集合を求める計算式等を参考にしています。
(*) z0 = 0、 zn+1 = zn2 + C で定義される複素数値の数列 { zn } が発散しない C の集合。


2. 立体視画像の作成: 2変数関数版

【概要追加】
多くの点がノイズのように散乱しているとしか見えない画像なのですが、 視点を調整して見ることで立体像が浮かび上がってきます。 立体視画像の中のSingle Image Random Dot Stereogramに分類される画像です。

【使い方】
z = F(x, y) という2変数関数を与えてそのグラフを3次元的に表示します。 予めいくつかの関数例が用意されていますので、 それらの中から1つを指定して表示させることもできます。
関数 F(x, y) はその本体を“Javascript の式”の形で与えます。 “Javascript の式”として誤っていると何も表示されません (暴走する可能性もありますので、 文法的・意味的に間違っていないことをしっかり確認して下さい)。
x と y の範囲はいずれも -6.5 〜 6.5 で、 関数値は -8 〜 8 におさまるようにして下さい。 小さすぎる関数値や大きすぎる関数値はそれぞれ -8 と 8 に変更されます。 関数値が小さいほど奥に、大きいほど手前に見えるように表示されます。

【その他】
立体的に見えるようになるのに多少のコツは必要ですが、 僅かな訓練で容易に見ることができるようになると思います。 周辺部の立体像は明瞭でありません。 多くの点を描画し終えるまで多少の時間がかかります。
「何森仁:ステレオグラムをつくろう あなたも3Dアーティスト、日本評論社、1993」 を参考にしています。


3. グラフ描画 (y = F(x) 版、媒介変数版、極座標関数版)

y = F(X) 版 では、 関数 F(x) を与え、そのグラフを描画します。 x の初期値、その刻み幅も与えます。
媒介変数版では、媒介変数 t を使って 関数 F(t) と G(t) を与え、 x = F(t)、y = G(t) と表現されるグラフを描画します。 t の初期値、その刻み幅も与えます。
極座標関数版では、極座標系 (r, θ) を使い、 関数 F(θ) を与え、r = F(θ) と表現されるグラフを描画します (関数表現では θ の代わりに変数 t を使います)。 t の初期値、その刻み幅も与えます。
いずれの版も、 描画される座標値の範囲に応じて、縮小描画されていきます。

【使い方】
まず関数 F や G を与えます。 いくつかの例が用意されていますので、それらから1つを選ぶこともできます。 関数は、“Javascriptの式”の形で与えて下さい。 “Javascript の式”として誤っていると何も表示されません (暴走する可能性もありますので、 文法的・意味的に間違っていないことをしっかり確認して下さい)。
「実行」ボタンを押すと描画が始まり、 「中断」で描画が中断されその後の「再開」で描画が再開されます。 「中断」後にパラメータを変更して「実行」で、 新しいパラメータに対する描画が開始されます。 「中断」後にパラメータを変更しても、 「再開」では直前の状況での描画が再開されます。

【その他】
x あるいは t の変化に対して描画位置の変化が少ない場合、 グラフの一部である軌跡が表示されないことがあります。 初期値等にかかわらず、x軸とy軸は必ず表示されます。 刻み幅は負でも構いません。


4.1 様々なモアレ

【使い方】
単純な繰返し模様として、 平行線群(L)、同心円群(C)、小円群(P)、放射線群(R)を用意しています。 まずその組合せの1つを、LL, CC, …, RLの中から選びます。 新しい画面が表示されますので、 それぞれの群に対して、線の間隔、線の太さ等のパラメータを与えます (例がすでに入力されていますので、何も与えずに実行させることもできます)。 “OKボタン”で与えられた状況での初期配置が表示されます。

実行とは一方の群が少しずつ移動するもので、 “Run/Stop”ボタンで実行開始・中断・再開をします。 中断し、パラメータを変更して“OK”ボタン後に“Run/Stop”ボタン押下で、 新しい状況での実行が開始されます。

【その他】
斜めの平行線群や同心円群等では、重なりがなくても縞模様が見られる部分があります。 これは画面が小さい画素の集まりであるためで、ここでの実験とは関係ありませんが、 これもモアレの例です。

4.2 ランダムドット群の重ね合わせ

【使い方】

  1. ランドムドットの個数、時計回りの回転角(°)、縮小率(%)を設定し(予め初期値が入っていますので、変更不要ならそのまま)、initボタンを押します。
  2. dx, dy (ずらして重ねる時のx,y方向の距離)を設定し(これも初期値が入っています)、Stackボタンで重ねます。 animのRunボタンで回転角を少しずつずらしながら重ねていき、Stopボタンで中断し、Contボタンで再開します。
  3. 任意の時点でinitボタンを押すことで、異なるランダムドット群での試行となります。

「涌井良幸、涌井貞美:パソコンで遊ぶ数学実験、講談社 2003.2」 を参考にしています。


5. 回転移動円と点の軌跡

直線上の回転移動(サイクロイド)、他の円の外側の回転移動(外サイクロイド)、他の円の内側の回転移動(内サイクロイド)の3種類があります。 回転移動する円をアニメーション表示しつつ、その周あるいは内部の点の軌跡を表示します。

【使い方】

  1. いずれの場合も、1つの設定値を予め用意しています。initボタンでその状況が表示されます。
  2. サイクロイドの場合、軌跡を表示する点の位置(直線からの距離)を設定できます。
  3. 外サイクロイドと内サイクロイドの場合、固定の円の半径、回転移動する円の半径、回転移動する円内の点の位置(接点からの距離)を設定できます。
  4. Runボタンで回転移動が開始され、指定された点の軌跡が一定間隔毎に赤点で表示されます。回転移動中は、Stopボタンで一時的に中断し、Contボタンで再開されます。