Vera Molnár さんの (Des)Ordres を Processing で模写

コンピュータ・アートのパイオニアのお一人、 Vera Molnár さん。彼女の 1970年代の作品を現代のツール Processing を使って模写してみました。

Vera Molnár さんは 1960年代からコンピュータを用いた作品を作っていらっしゃるアーティスト。 今でも現役でご活躍です。

Vera Molnar

そんな大先輩の作品を模写することで、Processing なんて影も形もなかった時代に思いを馳せ、豊富なツールが存在する現在のありがたさを実感しながら、スキルとモチベーションのアップを図りたいと思います。

こんな風に作りました。

今回模写した作品は「(Des)Ordres」。 1974年の作品です。

まずはランダムな太さと濃さを持つ四角形を描いてみます。

for (int i = 0; i < 5; i++) {
 float s = i * 50.0;
 stroke(0, 0, random(30.0, 90.0), 100);
 strokeWeight(random(10.0));
 rect(0.0, 0.0, s, s);
}

悪くない！
四角形の大きさもある程度ランダムにしてみましょう。

 float s = i * 50.0 * random(1.0, 1.5);

いいよ、いいよ！
これを複数並べてみるとこんな感じ。

ある程度雰囲気出てますが、よく見ると全然違います。 「(Des)Ordres」は正方形ではなく歪んだ四角形で描かれていますね。
そこで、'rect()' ではなく 'vertex()' を使って四角形を描くことにします。

うん！いい感じになりました。

コードはこうなりました。

意外とシンプルに書けたのは Processing というツールあってこそですね。

/**
* Homage to Vera Molnár.
* (Des)Ordres, 1974
*
* @author @deconbatch
* @version 0.1
* @license GPL Version 3 http://www.gnu.org/licenses/
* Processing 3.5.3
* 2021.05.02
*/

void setup() {

 int cols = 17;
 int rows = 17;

 size(640, 640);
 colorMode(HSB, 360.0, 100.0, 100.0, 100.0);
 rectMode(CENTER);
 smooth();
 noLoop();

 // '2' means margin
 float cw = width * 1.0 / (cols + 2);
 float ch = height * 1.0 / (rows + 2);

 background(0.0, 0.0, 90.0, 100.0);
 translate(cw * 1.5, ch * 1.5);
 for (int c = 0; c < cols; c++) {
   for (int r = 0; r < rows; r++) {
     drawCell(c * cw, r * ch, cw, ch);
   }
 }
}

/**
* drawCell : draws randomly distorted rectangles.
* _cx, _cy : cell location
* _cw, _ch : cell width, height
*/
void drawCell(float _cx, float _cy, float _cw, float _ch) {

 int   rectMax = 10;
 float distort = 0.1;
 PVector[] points = new PVector[4];

 noFill();
 for (int rectCnt = 0; rectCnt < rectMax; rectCnt++) {
   // calculates corner points of the distorted rectangle
   float hW = _cw * rectCnt * 0.5 / rectMax;
   float hH = _ch * rectCnt * 0.5 / rectMax;
   points[0] = new PVector(
                           _cx - (1.0 + random(-1.0, 1.0) * distort) * hW,
                           _cy - (1.0 + random(-1.0, 1.0) * distort) * hH
                           );
   points[1] = new PVector(
                           _cx + (1.0 + random(-1.0, 1.0) * distort) * hW,
                           _cy - (1.0 + random(-1.0, 1.0) * distort) * hH
                           );
   points[2] = new PVector(
                           _cx + (1.0 + random(-1.0, 1.0) * distort) * hW,
                           _cy + (1.0 + random(-1.0, 1.0) * distort) * hH
                           );
   points[3] = new PVector(
                           _cx - (1.0 + random(-1.0, 1.0) * distort) * hW,
                           _cy + (1.0 + random(-1.0, 1.0) * distort) * hH
                           );

   stroke(0.0, 0.0, random(30.0, 90.0), 100.0);
   strokeWeight(random(2.0));
   beginShape();
   // you need five points to draw a rectangle with vertex
   // for the future in using curveVertex()
   for (int corner = 0; corner < 5; corner++) {
     vertex(points[corner % 4].x, points[corner % 4].y);
   }
   endShape();
 }
}

こちらには p5.js 版のコードを載せました。

Homage to Vera Molnár : (Des)Ordres, 1974 - OpenProcessing

前例の無い中でできるか？

今でこそこれぐらいのコードで描くことができましたが、Processing なんて全く無かった時代、どうやって「(Des)Ordres」のような作品を描いたのか想像もつきません。 なによりも、コンピュータを使ってこのような作品を描こうと思いついたことがちょっと信じられません。

私がコンピュータで図を描くことを初めたときには、映画や雑誌、ポスターなど身の回りに前例はいくらでもありました。「コンピュータを使って描く」という選択は別に珍しくもない当たり前の自然なものでした。 もし身の回りにそのようなものが無く、前例がなかったところに「コンピュータで何かを描こう」という発想が私に出てきたでしょうか？

コンピュータで単純な図形でもグラフでも、何かを描くという前例は Vera Molnár さんが活動を始めた 1960年代にあったのでしょうか？ 世界初のシューティングゲーム PDP1 のスペースウォー! が 1962年、プロッターの発明が 1953年とのことなので、前例が無くはないものの、とてもありふれたものとは言えなかったはずですね。

そのような中で制作を始められた正にパイオニア、その一点だけ取っても尊敬に値すると思います。

📘 他にも note でいろんな記事書いています。

deconbatch｜note

🐦 Twitter でもいろいろ面白いの上げてるのでぜひフォローしてください。

Tweets by deconbatch

🎨 こちらのブログはソースコード付きのクリエイティブ・コーディング作品集になってます。よかったら見てね。よくなくても見てね。😉

deconbatch's Land of 1000 Creative Codings.