{{indexmenu_n>7}}

====== Composition ======
ピエト・モンドリアンの作品の中で最も有名とも言える，Compositionの作品群があります．
>ピエト・モンドリアン（ピート・モンドリアン、Piet Mondrian、本名ピーテル・コルネーリス・モンドリアーン Pieter Cornelis Mondriaan 1872年3月7日 - 1944年2月1日）は19世紀末-20世紀のオランダ出身の画家。ワシリー・カンディンスキー、カジミール・マレーヴィチらと並び、本格的な抽象絵画を描いた最初期の画家とされる。 出典: フリー百科事典『ウィキペディア（Wikipedia）』

{{ :lecture:design_with_prototyping:1920px-piet_mondriaan_1930_-_mondrian_composition_ii_in_red_blue_and_yellow.jpg?nolink&400 |}}
Piet Mondriaan, 1930 - Mondrian Composition II in Red, Blue, and Yellow. Lisenced by Public Domain.

上記作品はその中の一つです．青，白，黄色，赤の四色をカンバスに引かれた線を基準にそれぞれの四角を塗りつぶしています．従来絵画とは，自然界における対象物を綿密に観察し，それらを模写または再構成することが多かった中．このような抽象画は描き方そのものに大きな変化がありました．絵画というよりは工業製品や設計物に近い，手続き的な技法となっています．今回の絵画の特徴は，上下左右に引かれた線及び，それを基準にした四角になります．
このような四角を引くための基準となる線のことをグリッドと呼びます．グリッドは様々な視覚的コンテンツにおいて基礎的に用いられる手法です．基本となる縦及び横の線を引き，その線を基準に様々なものをレイアウトします．例えばポスターやウェブデザイン，アプリケーションGUIなどにコンテンツを配置する場合，このようなグリッドを基準にしてコンテンツを視覚的に揃えることが行われています．

グラフィックデザインなどでは，このようなグリッドが無意識的に利用されており，私達はこのグリッドを通じてポスターなどに載せられたコンテンツや情報を受け取っているわけです．もちろん絵画においてもこのような考え方は構図と呼ばれ，例えばセザンヌの構図等は良く練られた構図としてしばしば紹介されています．

  * {{http://siritai.jp/lecture/artcritic/res_artcri/res_cezanne.html|「セザンヌの構図(Cézanne's Composition)」, Erle Loran}}

絵画の発展とともに構図の様式が定式化され，様式にとらわれる技法を皮肉ったとも考えることができますし，対象物の抽象化を図る過程において，このようなグリッドだけを残した絵画が描かれるのも納得が行くのではないでしょうか．抽象的であるからこそ，鑑賞者に対して解釈の余白を多く提示してくれています．
===== 手順 =====
下記に示す手順は，アルゴリズムにおける再帰呼び出しと呼ばれるものです．具体的にいうと，例えば func()という関数があったとします．このfunc()という関数をfun()関数の中でさらに呼び出すことです．

  - 四角を描く
  - その四角の中から，一点を選択する
  - その点を境界として4つの四角形を新たに描く．
  - 2,3を繰り返す．

===== プログラム =====
{{ :lecture:design_with_prototyping:mondorian.png?nolink&600 |}}
<file .pde mondorian.pde>
/*
  Reference: https://makezine.com/2011/05/11/codebox-explore-recursion-with-processing/
*/

int N = 2;  // Number of recursive steps

// Draw a Mondarian-inspired image using recursion
void piet(int x0, int y0, int x1, int y1, int N) {
  if (N == 0) {
    // Base case -- draw a colorful rectangle with a thick black border 
    int sw = 10; //this is the stroke width for the rectangle's border
    color c[] = { #ff0000, #0000ff, #ffff00, #ffffff}; //Mondarian color palatte    
    fill(c[int(random(c.length))]);
    stroke(0);
    strokeWeight(sw);
    rect (x0, y0, x1-x0, y1-y0);
  } else {
    //Recursive step -- recursively break the current rectangle into 4 new random rectangles
    int i = int(random(x0, x1)); //Pick a random x coordinate inside the current rectangle
    int j = int(random(y0, y1)); //Pick a random y coordinate inside the current rectangle
    piet(x0, y0, i, j, N-1); // Recurse on upper left rectangle
    piet(i, y0, x1, j, N-1); // Recurse on upper right rectangle
    piet(x0, j, i, y1, N-1); // Recurse on lower left rectangle
    piet(i, j, x1, y1, N-1); // Recurse on lower right rectangle
  }  
  save("mondorian.png");
}

// keep draw() here to continue looping while waiting for keys
void draw() {
}

//Draw a new image each time a key is pressed
void keyPressed() {
  background(0);
  piet(1, 1, 500, 500, N);
}

//Draw the first image
void setup() {
  size(500, 500);
  piet(1, 1, 500, 500, N);
}
</file>
==== 練習 ====
上記プログラムを参考にして，様々なCompositionを作成してみましょう．


====== Reference ======
  * Codebox: Explore Recursion with Processing
    * https://makezine.com/2011/05/11/codebox-explore-recursion-with-processing/