2017. 6.28.
石立 喬

Visual Studio Community 2017の使い方（９）

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

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

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

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

プログラムの機能
　１） 起動させると、初期条件でのGumowski-Mira図形が表示され、初期設定値がTextBoxに入っている。
　２） 「Aの値」Sliderを変化させると、係数Aが変更され、新しい条件で図形が描かれる。
　３） 同様に、「Bの値」Sliderで係数Bを変化させると、それによる図形が描かれる。
　４）係数A、B以外の諸条件は、TextBoxに入力し、「描画」Buttonをクリックして画面を描画させることができる。
　５）「描画」Buttonをクリックすると、その都度、x、の初期値が乱数で発生されるので、同じ条件でも、異なった図形が得られる。
　６）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」エディタで直接記述した。



図１　作成したXAMLコード


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


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




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



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



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


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


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



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



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


図形の一般的な傾向
　B = 1の時に図形として面白いパターンが得られるので、B = 1に固定して、Aを変化させてみた（図９参照）。
　１）Aが0に近い場所では、図形が円形になる。
　２）Aが-1または1に近くなると、図形が横に長くなる。
　３）Aが正で大きくなると、図形が滑らかになる（円周方向での凹凸が減る）。
　４）Aが負で大きくなると、図形にトゲが出てくる（円周方向での凹凸が激しくなる）。
　５）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

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


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

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

図１０　A = 0付近の図形（B = 1）


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

A = -0.54 A = 0.62 A = 0.76

図１１　繰返し式２をｔる買うと、独立した点が増えた


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

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

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







「Visual C++ の勉強部屋」（目次）へ