【Processing】簡単な図形をダンダムに配置して模様を作ってみよう！

Processingを使えば簡単に模様を自作できます。

この記事では、簡単な図形を組み合わせて、オリジナルの模様を作成する方法を紹介します。

三角形から作る模様

三角形をランダムに並べて模様を作成してみます。
とても簡単な例ですが、基本的な考え方が分かると思います。

基本パターンを作成する

まずは正方形のタイルを作成します。
最初に作る図形はとても簡単で、下図のような三角形を表示してみましょう。

次にProcessingのプログラムを示しますが、このプログラムを実行すると三角形の画像を作成することができます。

このプログラムではタイルをひとつ表示するだけですが、後で複数のタイルを扱うことになるので、Tileというクラスを作成しています。

displayメソッドの18行目でタイルの回転、21行目で三角形の表示をします。

35行目のdrawファンクションの中からdisplayメソッドを呼び出します。
このとき引数として、タイルの位置、サイズ、向きを指定します。

4つめの引数を0,1,2,3と変更して実行すると、三角形の向きが変わります。

コード

もとは単純な三角形でしたが、回転させることで4つのパターンを作ることができました。
正方形のタイルとしているので、簡単に組み合わせることもできます。

タイルを組み合わせてみる

次に作成したタイルを組み合わせてみます。
先ほど作成したプログラムで、drawファンクションの中を次のようにします。
向きが異なるタイルを4つ並べて表示するように変更しました。

この例では実行結果の画像のうち、真ん中のものが得られます。

4つのタイルの向きの組み合わせを変更するだけで、様々なパターンを作ることができますので、試してみてください。

コード

実行結果

より多くのタイルで模様を作る

もっとたくさんのタイルを扱えるように、プログラムに繰り返し処理を追加します。
次にサンプルプログラムを示します。

プログラムの2〜3行目の変数でタイルの行数と列数を指定します。
繰り返し処理はdrawファンクションの中に追加しました。
この繰り返し処理で、タイルを表示する位置をずらしていきます。

タイルの向きについても、ランダムに変化させるパターンと規則的に変化させるパターンを用意しました。

最初に比べるとかなり複雑な模様を生成できるようになったと思います。

ここで紹介しているのはあくまで一例ですので、他にも色々な模様を生成できると思います。

コード

ランダムなパターン

規則的なパターン

実行結果

円弧を使って色付きの模様を作成する

他に面白いパターンを生成できないか、検討してみます。
さらに色をつけてより模様らしくしてみましょう。

まずは基本パターンの生成から

ここからは、下図のような円弧を組み合わせてみます。

次に修正したプログラムと実行結果を示します。
パラメータを少し調整したのと、Tileクラスのdisplayメソッドの修正を行いました。

24〜25行目で円弧を表示するようにしました。
このプログラムを実行すると、下の実行結果の画像が得られます。

プログラムを一部変更しただけですが、全く違う模様を生成することができました。

コード

実行結果

色をつけてみる

次にタイルに色をつけて表示してみましょう。

プログラムを次のように修正してみました。

4〜5行目で、色の設定をしています。
icが円弧の内側の色、ioが外側の色で、色を分けられるようにしました。

26〜27行目でタイル全体（正方形）の塗りつぶしを行なっています。

32行目で円弧の内側の色を指定することもできますが、この例では外側の色と同じにするために、コメントアウトして、次の行でnoFill()を呼び出しています。

その後、34〜35行目で円弧を描画します。

このプログラムを実行すると、実行結果のひとつめのような模様が表示されます。

32行目をアンコメント、33行目をコメントアウトすると、実行結果のふたつめのような結果が得られます。

円弧の内側と外側で塗りつぶす色を分けることができました。

コード

実行結果

さらに模様らしくする

さいごに色のつけ方も工夫してみます。
この記事では簡単のために、回転０とπ/2のみを扱います。

より自然な模様にするために、次のようなパターンを考えてみましょう。

(a)と(b)のタイルは向きが同じですが、色の塗り方を変えています。

(a)では円弧の内側がピンクになっているのに対し、(b)では円弧の内側が青になっています。

次に(a)と(c)を比較してみます。この2つはタイルの向きは異なっていますが、色の塗り方は同じです。

(a)では円弧の内側がピンクで、(c)でも円弧の内側がピンクになっています。

これらのことから、次のような規則が考えられます。

• 隣り合うタイルの向きが同じときは、円弧の外側の色と内側の色を交換する
• 隣り合うタイルの向きが異なるときは、円弧の外側の色と内側の色を交換しない

先ほどのプログラムに、このルールを追加してみます。プログラムと実行結果を示します。

29行目のif文で円弧の外側の色を、40行目のif文で円弧の内側の色を変更しています。

changeColorという変数によって条件分岐していますが、この変数の値は69行目のcolorChangeファンクションで決定されます。

例えば、71行目のif文で隣り合うタイルの向きを比較して、向きが同じならchangeColorを変更して、向きが違えばchangeColorを同じにしています。

これはまさに先ほど決めたルールです。78行目のif文の処理も同様です。

このプログラムを実行すると、実行結果のような画像が得られます。かなり自然な模様になりました。

コード

実行結果

まとめ

今回はProcessingで簡単に模様を作成する方法を紹介しました！

やっぱりProcessingは色々なものが簡単に作成できるので、楽しいです！！

この記事で紹介したプログラムのパラメータを少し変えるだけでも、色々な模様ができると思いますので、皆さんも挑戦してみてはいかがでしょうか。