ホーム / お勉強 /

カッコいい構図を描くコードを書きたい

2022年8月30日火曜日

Processing お勉強

t f B! P L

アニメ「ブルー・ピリオド」を観ました。その中で「丸と三角形だけでカッコいい構図をたくさん描く」訓練が紹介されていました。

作中の『また似たような構図になったなあって思うことない？』というセリフにドキッとした私は、この訓練をやることにしました。

 

まずは名画を模写

とはいえ、普段キャンバスの真ん中にモチーフをドカンと置く「日の丸構図」しかやってない、構図の「こ」の字もわからない私には、丸と三角で構図を「作る」訓練はまだ早い気がします。

そこで、まずは過去の美術作品の構図を模写して、構図とはどういうものか、どうやって作るものかを学ぶことにしました。

最初に模写するのはパウル・クレー 1930年の作品「Polyphonic Architecture」です。


セントルイス美術館より(Public Domain)

ぱっと見、様々な大きさの四角形が無造作に置かれているように見えます。しかし、模写してみると、四隅に置いて位置をずらした正方形、下から上、上から下へ伸びる縦に長い長方形が見えてきました。そして、それらの四角形の重なりで構図を作ってるらしいことがわかります。

模写する前と後で、なんだか別の絵のように見えてきました。これは面白い！

 

私のやりたいことはコードを書くこと

このように、構図を作る訓練を始めましたが、私がやりたいのは「カッコいい構図を描く」ことではありません。私の目標は「カッコいい構図を描くコードを書く」です。

今のところカッコいい構図を作る方法論は何も掴めていません。一個模写したぐらいで掴めるわけありませんね。

そんなわけで、今回のコードは見たものを再現しようとするベタなコードです。 Processing で書きました。クレーの作品は四角の配置、大きさに法則的なものがあるんだろうと思いますが、そこもまだわかっておらず、四角形の大きさはランダムにしました。


/** 
 * カッコいい構図を描くコードを書きたい
 * ref. Polyphonic Architecture by Paul Klee
 *      https://www.slam.org/collection/objects/17586/
 * 
 * Processing 3.5.3
 * @author @deconbatch
 * @license CC0 https://creativecommons.org/publicdomain/zero/1.0/
 * @version 0.1
 * created 2022.08.30
 */

void setup() {

  size(670, 600);
  colorMode(HSB, 360.0, 100.0, 100.0, 100.0);
  smooth();
  noLoop();

  background(30.0, 60.0, 50.0, 100.0);
  rectMode(CENTER);

  // 4隅に正方形に近い四角形を2個ずつ
  blendMode(SUBTRACT);
  stroke(0.0, 0.0, 30.0, 100.0);
  for (int c = 0; c < 4; c++) {
    pushMatrix();
    translate((c % 2) * width, ((c < 2) ? 0.0 : height));
    for (int i = 0; i < 2; i++) {
      float w = random(0.3, 0.6) * (i + 1) * width;
      float h = w * random(0.9, 1.1);
      fill(
           random(150.0, 210.0),
           random(75.0, 85.0),
           random(5.0, 15.0),
           100.0
           );
      rect(0.0, 0.0, w, h);
    }
    popMatrix();
  }

  // 縦長の長方形を、中央付近上から2個、下から1個
  blendMode(BLEND);
  stroke(0.0, 0.0, 10.0, 100.0);
  for (int c = 0; c < 3; c++) {
    pushMatrix();
    translate(width * random(0.4, 0.6), ((c % 2) * height));
    float w = random(0.4, 0.8) * width;
    float h = random(0.8, 1.8) * height;
    fill(
         random(330.0, 390.0) % 360.0,
         random(20.0, 40.0),
         random(65.0, 75.0),
         20.0
         );
    rect(0.0, 0.0, w, h);
    popMatrix();
  }

}

完全な運任せ構図。いいなと思う構図は滅多にでません…

 

まとめ

こんなベタで運任せなコードじゃ「カッコいい構図を描くコード」を書いたことになりません。まだまだこれからです。

美術作品の模写は思っていたよりも面白く、今後も楽しく続けていけそうです。

 

QooQ