2017. 6.28.
石立 喬

Visual Studio Community 2017の使い方(9)

――― CanvasにGumowski-Mira写像を描画する ―――

 電気技術者にとって、カオスやフラクタルは興味ある対象である。Gumowski-Mira写像もその一つで、面白い図形が得られる。Sliderで数式の係数を変えながら、良い図形を探し、繰返し回数や色の階調数などはTextBoxで設定する。これは、「二次元カオス図形を芸術的に描画する」(CodeZine)の一部のUWP版である。

Gumowski-Miraアトラクタ
 欧州原子核研究機構(CERN)の二人のフランス人物理学者、Igor GumowskiとChristian Miraが1980年に発表したアトラクタ(attractor、力学的に次第に引き込まれて行く現象)で、美しい画像を描くことから多くの研究がなされ、ネット上にも多くの資料がある。この図形は数式を二次元図形化したもので、「写像」と呼ばれることが多いが、ここでは単純に図形と呼ぶことにする。。

Gumowski-Mira図形を描画するための式
 Gumowski-Mira写像に用いる式は、n番目のx、yからn+1番目のx、yを求める繰返し式と、そこで用いられる関数から成る。
 簡単で美しい画像が得られる繰返し式は、
     
で、これを繰返し式1と呼ぶことにする。これに対し、やや複雑な
     
があり、これを繰返し式2と呼ぶことにする。
 使用する関数も、二種類が知られており、
      
が簡単な方で、関数1と呼び、
      
を、関数2と呼ぶことにする。
 実際に使用して見たところ、筆者の私的な見解ではあるが、繰返し式1と関数1の組み合わせが、式が簡単で、しかも美しい画像が得られたので、これを中心にプログラムを紹介する。これ以外の組み合わせも特徴的な図形が得られるので、参考までに結果を紹介する。

プログラムの機能
 1) 起動させると、初期条件でのGumowski-Mira図形が表示され、初期設定値がTextBoxに入っている。
 2) 「Aの値」Sliderを変化させると、係数Aが変更され、新しい条件で図形が描かれる。
 3) 同様に、「Bの値」Sliderで係数Bを変化させると、それによる図形が描かれる。
 4)係数A、B以外の諸条件は、TextBoxに入力し、「描画」Buttonをクリックして画面を描画させることができる。
 5)「描画」Buttonをクリックすると、その都度、x、の初期値が乱数で発生されるので、同じ条件でも、異なった図形が得られる。
 6)x、yの初期値からx2+y2(原点からの距離の二乗に相当)を計算し、 その値をカラーで表示する。

作成したXAMLコード
 すでに前稿で説明たように、Canvas使用のためにMicrosoft.Graphics.Canvas.UI.Xamlを名前空間として指定する。Cancasの右にStackPanelを設定し(「デザイン」画面へ「ツールボックス」から持ってきて、詳細はエディタで編集)、TextBlockとTextBoxを交互に配置し、さらにその下にButtonを並べる。間隔を開けるために、Margin="0, 5, 0, 0"などを明示的に用いている。「デザイン」画面上のCanvas内で、ダブルクリックすると、canvas1_Loadedのイベントハンドラーを生成することができる。canvas1_Drawは、「XAML」エディタで直接記述した。



図1 作成したXAMLコード


プログラムの説明
 Gumowski-Mira図形を描画するプログラムはcanvas1_Draw(図3参照)に記述し、ここでは、
 1)背景の黒い矩形を描く
 2)TextBoxとSliderの値を読み込む
 3)二重のforループを回す
    ・x、yの初期値を描画数draw_numberだけ発生させる外部ループ
         x、yを乱数で発生する
         x、yの値を色に変換しておく
    ・Gumowski-Miraの式を繰返し数iteration_numberだけ繰り返す内部ループ
         繰返し式と関数を計算する
         x、yを指定された色でCanvas上にプロットする
を実行する。
 プログラム起動時に一回だけ呼び出されるcanvas1_Loaded(図5参照)には、各定数の初期設定と、各TextBoxへの書き込みを行う。
 x、yの初期値の大きさを色に変換するメソッドvalueToColor(図4参照)は、値valueと表示色の階調数color_numberを受け取って、Colorクラスの値に変換する(前稿で紹介したcountToColorと内容的には同じである)。
 Sliderを変化させることで発生するsliderA_ValueChanged、sliderB_ValueChangedイベントハンドラーと、ButtonをクリックすることによるDrawButto_Clickハンドラーには、それぞれcanvas1->Invalidate()を記述する(コードの紹介は省略)。


図2 プログラムの最初の部分でヘッダーファイルと名前空間を追加する




図3 Gumowski-Mira図形を描くcanvas1_Drawメソッド



図4 x、yの初期値の大きさx2+y2を値nで受け取り、色に変換するメソッド



図5 プログラム開始時に最初に実行するメソッドで初期設定をする


得られた結果
 プログラムを起動すると、初期設定条件でのGumowski-Mira図形が表示され、右には、その時の諸条件(初期値)が表示される。初期条件のA = 0、B = 1は特異点で、あまり面白い画像が得られない(図9下段中央参照)ので、Aを変化させて比較的美しかった画像を図6に示す。「描画」Buttunをクリックするたびに、同じ条件で、x、yの異なった初期値で図形が描かれるので、辛抱強くクリックを繰り返すと美しい画像に遭遇することがある。


図6 「Aの値」Sliderを動かして美しいと思った図形の一例



図7 「Bの値」Sliderを動かすと、全く異なった傾向の図形が得られる



図8 良く知られている図形の一つ


図形の一般的な傾向
 B = 1の時に図形として面白いパターンが得られるので、B = 1に固定して、Aを変化させてみた(図9参照)。
 1)Aが0に近い場所では、図形が円形になる。
 2)Aが-1または1に近くなると、図形が横に長くなる。
 3)Aが正で大きくなると、図形が滑らかになる(円周方向での凹凸が減る)。
 4)Aが負で大きくなると、図形にトゲが出てくる(円周方向での凹凸が激しくなる)。
 5)A = -0.5、A = 0、A = 0.5は特異点で、全く異なった放射線状の図形になる。
ただし、上記は一般的傾向であり、途中で、思わぬ美しい図形に出合うことがある。

A = -0.75 A = -0.25 A = 0.25 A = 0.75
A = -0.5 A = 0 A = 0.5

図9 B = 1に固定して、図形の変化の傾向を見た(下段は特異点)


A = 0付近が美しい
 B = 1としてAを変化させるとき、初期値0の近傍で、比較的美しい図形が得られる。ほぼ円形ではあるが、気に入ったものを図10に示す。

A = -0.11 A = -0.05 A = 0.07 A = 0.13

図10 A = 0付近の図形(B = 1)


繰返し式2と関数1を用いたいた場合
 繰返し式1を使用した場合に比べて、独立した点が多数見られ、図形としての美しさに欠ける。その中でも、比較的」美しいと感じたものを図11に示す。B = 1を使用した。

A = -0.54 A = 0.62 A = 0.76

図11 繰返し式2をtる買うと、独立した点が増えた


繰返し式1と関数2を用いた場合
 結果を図12に示す。関数1に比べて、特異点での発散がなく(A = -0.5を除く)、美しい図形を描く。特異点以外のAの値では、関数1に比べて、特に美しいとも言えず、例外的に美しい場所があった(A = 0.46)。以上は、いずれも、B = 1で描画した。B < 1では、特に関心のある図形は得られなかった。

A = -0.5 A = 0 A = 0.5 A = 0.46

図12 関数2を使った場合は、美しい特異点が見られた







「Visual C++ の勉強部屋」(目次)へ