Jeffrey Cross
Jeffrey Cross

コードボックス:フラクタルメニザリーを作成する

ウィキペディアによると、フラクタルは「部分的に分割することができる、大まかなまたは断片化された幾何学的形状であり、それぞれの部分は(少なくともおよそ)全体の縮小サイズのコピーです」。植物、雲、炎など、とても複雑で自然に見えるオブジェクトを作成するために、非常に単純なプロセスを使用します。このコードボックスでは、フラクタルのいくつかの異なるスタイルを表示するためのフラクタルメニューを作成する方法を説明します。

その過程で、私たちはProcessing入門の第9章で紹介されたオブジェクト指向プログラミング(OOP)の概念を拡張し続け、他の言語で使われているおなじみのGUIコントロールを作成するための素晴らしいcontrolP5ライブラリの使い方を示します。

IFSフラクタル

反復関数システム(IFS)は、自然に見えるフラクタルを作成するための最も簡単な手法の1つです。 IFSは、ある点を別の点に変更する方法を説明する、ほんの一握りの変換(詳細は後で説明します)で構成されています。 Black Spleenwort(一種のシダ)のように見えるBarnsley Fernは、IFSフラクタルの典型的な例ですが、さまざまな種類があります。 Larry Riddleが彼のIFSシステムページで他の人たちの良い内訳を持っています。

テクニックはこのように機能します。通常は(0,0)の単一点から開始して、IFSシステムを構成する変換の1つをランダムに適用します。次に、変換後の新しい点を取得したら、それを画面上にプロットします。これをProcessingでは、 セット() コマンド。その後、計算したところからもう一度プロセスを繰り返します。

数百回の繰り返しの後、あなたはシダの幽霊のような輪郭を見始めるでしょう。 10万回の繰り返しの後、あなたはほぼ自然のオブジェクトのように見える詳細な画像を見るでしょう。次の図は、BarnsleyシダのIFSシステムと、このプロセスを何度も適用したときに表示される画像を示しています。

詳細をもう少し解凍しましょう。変換は、ある点を別の点に変換する式です。 Getting Started with Processingの104ページで説明されている平行移動、回転、拡大縮小の変換と同様に、IFSシステムの変換は変換行列を適用することによってポイントを新しい位置にマッピングします。 。

IFSシステムを定義する表は、マトリックスで使用される値を提供します。列a、b、d、d、e、およびfは、行列内のさまざまな要素を表します。次の図は、IFSシステムの行をマトリックスに変換する方法を示しています。

例として、これは先ほど示したBarnsley Fernの3番目の変換行列です。

IFS行列の最後の列pは、変換が選択される頻度を表します。したがって、Barnsleyシダの場合、変換f 1は時間の1%、f 2は時間の85%、f 3とf 4はそれぞれ7%の時間で選択されます。これが少しわかりにくい場合は、100個のビー玉でそれぞれの袋に1つのラベルが付けられているかのように考えてみてください。あなたはf4に1、f2に85、f3に7、そしてf4に7の大理石を持っています。反復するたびに、袋から大理石をランダムに取り出し、ラベルを見て、対応する変形を適用してから、大理石を袋に戻します。

コントロールP5

IFSフラクタルの基本的な概念を理解したので、次のような使い慣れたユーザー入力コントロールを作成するためのAndreas SchlegelによるコードライブラリcontrolP5を簡単に見てみましょう。

ユーザーが図面の作成に使用する反復回数を設定できるように「ノブ」コントロールを使用し、表示するIFSシステムを選択するために「ラジオ」コントロールを使用します。

スケッチでライブラリを使用する前に、インストールする必要があります。最初のステップは、Sketchbookディレクトリに "libraries"という名前のディレクトリがあることを確認することです。処理の環境設定ウィンドウを開くと、Sketchbookディレクトリが見つかります。一番上にディレクトリ名が表示されます。

メインディレクトリを見つけたら、Windowsのエクスプローラ、Macのファインダ、UNIXの信頼できる端末などのツールを使用して、「ライブラリ」というサブディレクトリがあるかどうかを確認します。そうでない場合は、サブディレクトリを作成します(必ず「ライブラリ」という名前を付けてください)。

次に、controlP5をインストールする準備が整いました。 controlP5メインページに行き、リンクをクリックして最新バージョンのライブラリーをダウンロードしてください。ファイルをダウンロードしたら、ファイルを解凍し、ファイルを「libraries」サブディレクトリにコピーします。 Processingを再起動すると、「Sketch - > Import Library」メニュー項目の下にライブラリが表示されるはずです。

ライブラリーのインストール後に、処理を再開してください。これで、プロジェクトのフラクタルな面について少し話をする準備が整いました。

スケッチを設定する

こんにちは!これは多くの概要資料でしたが、controlP5がインストールされたので、処理を使用して前述のIFSシステムを実装する準備が整いました。処理を開始してから、次のコードをテキストエディタに貼り付けます。 (いつものように、次のボックス内のすべてのコードをハイライトしてctrl_cを押すか、このリンクをクリックしてcontrolp5_fractals.pdeをクリックしてctrl + a、ctrl + cの組み合わせを使用します。)

例を見ていくうちに気付くことが1つあります。ファイルの末尾に複数のクラス定義が含まれていることです。最後のCodebox、Swat、および(arraylist)のターゲットでは、すべてのクラスを別々のタブにまとめました。しかし、これは必須ではありません。ここで行ったように、それらすべてを1つのファイルにまとめることはまったく問題ありません。それらを別々のタブに分割したい場合は、ファイルにクラスと同じ名前を付けてください。

コードを起動すると、この記事の冒頭にあるビデオとよく似たものが表示されるはずです。ラジオボタンをクリックしてさまざまなIFSフラクタルから選択したり、ノブコントローラーを使用して反復回数を設定したりすることができます。

討論

このコードでは、プロジェクトの構成要素として機能する3つのクラスを定義しています。

  • Transformクラス。このクラスは変換行列に含まれるすべての数学を実行します。ほとんどのコードは、単にすべての変数を格納することに専念しています。の evalX() そして evalY() 渡した点の新しいX座標とY座標を返します。
  • IFSクラスこのクラスはIFSデータ構造を実装します。これは、TransformクラスのArrayListで構成されています。 変換するこれらの変換の頻度分布を表すArrayList ヒストグラム (以前のアナロジーを拡張すると、これはランダム変換の選択に使用する大理石の袋です)と説明。主な方法は次のとおりです。 addTransform()これに新しい変換が追加されます。 変形する リスト; addHistogram()これに新しい「大理石」が追加されます。 ヒストグラム 変換に基づく頻度分布 p 値;そして selectRandomTransform()で指定された頻度分布に基づいて、ランダムに変換の1つを選択するために使用されます。 ヒストグラム 配列リスト。
  • Pointクラスフラクタル内の点のx座標とy座標を保持します。

メインプログラムでは、これらのクラスをさまざまな方法で使用します。まず、おそらくコードの最も目立つ部分で、表示したいさまざまなフラクタルを定義するためにIFSとTransformを使用します。たとえば、Barnsley Fernを作成するためのコードは次のとおりです。

c =新しいIFS( "Classic Barnsley Fern"); addTransform(new Transform(0.0、0.0、0.0、0.16、0.0、0.0、0.01)); addTransform(新Transform(0.85、0.04、−0.04、0.85、0.0、1.6、0.85)); c。 addTransform(new Transform(0.2、-0.26、0.23、0.22、0.0、1.6、0.07)); addTransform(new Transform(-0.15、0.28、0.26、0.24、0.0、0.44、0.07)); patterns.add(c);

そして、これがドラゴンカーブを定義するコードです。

c = new IFS( "Dragon")。 addTransform(new Transform(0.5、-0.5、0.5、0.5、0.0,0.0、.50)); addTransform(new Transform(-0.5、-0.5,0.5、-0.5,1.0,0.0、0.50)); patterns.add(c);

次に、controlP5ノブとラジオボタンを設定します。これには2つのパートステップが必要です。最初の セットアップ() 2つのコントロールがスケッチに追加されます。ノブを追加するのはかなり簡単で、1行だけで済みます。

iterationKnob = controlP5.addKnob( "iterationKnob"、N_MIN、N_MAX、N、10,10,50);

ラジオボタンには、コントロール自体を追加するだけでなく、選択可能な項目も追加する必要があるため、もう少しコードが必要です。これは、IFSパターンのArrayListをループ処理してから、 説明 ラジオボタンの選択項目としてのフィールド。これがコードです:

ifsRadio = controlP5.addRadio( "ifsSelect"、70,10); (int i = 0; i <patterns.size(); i ++){IFS p =(IFS)パターン.get(i); ifsRadio.add(p.description、i); }

controlP5ライブラリを使用することの2番目の部分はセットアップすることです アクション方法 これは、ユーザーがコントロールと対話したときに発生します。重要なのは、コントロールのインスタンス変数の名前ではなく、コントロールを追加したときに使用した* description *と同じ名前をメソッドに付けることです。たとえば、 ifsRadio コントロール、私達が使った ifsSelect 説明として。これは、対応するメソッドが必要になることを意味します ifsSelect() ユーザーがコントロールに対して行ったクリックを受信します。このメソッドには、コントロールの現在の値を保持するパラメータも必要です。

だから、 ifsSelect() メソッドには、選択されたばかりのリストアイテムのインデックスを示すパラメータがあります。そのインデックスを使用して正しいIFSパターンを取得し、現在表示されているパターンにします。次の図は、プレイ中のすべての要素をまとめたものです。 (controlP5コントロールはすべて少し異なる動作をしますが、サイトにはそれらをすべて使用する方法の素晴らしい例があります。):

パズルの最後のピースは makeIFS() フラクタルを作成するために必要な実際の計算を作成します。 IFSシステムは非常に洗練されているので、言うべきことはそれほど多くありません。変数で指定された反復回数だけループします。 N (その値は iterationKnob() メソッド)、現在のIFSシステム(値が ifsSelect() method)をクリックしてから、各点をPointオブジェクトの配列に追加します。描画領域を埋めるように画像を拡大縮小できるように、X値とY値の範囲も追跡します。

詳細:すべてのCodeboxの列を見る

メーカーの小屋で:


Processing入門Processing、コードを使用して図面、アニメーション、インタラクティブグラフィックを作成するための簡単な言語であるProcessingを使用して、コンピュータプログラミングを簡単に学ぶことができます。プログラミングコースは通常理論から始まりますが、この本では創造的で楽しいプロジェクトに飛び込むことができます。基本的なプログラミングを学びたい人には理想的で、プログラミングのスキルがある人のためのグラフィックスの簡単な紹介として役立ちます。

シェア

コメントを残します