Processingによるメディアアート製作記録3 作品：銀河鉄道の夜【プログラミング】

に続き第3回目では、実際に製作した作品の思考・製作過程を見ていきたいと思います。

■作品001:銀河鉄道の夜

最終的に出来上がった作品がこちらです。

私がProcessingを初めて最初につくった作品です。

これは宮沢賢治の銀河鉄道の夜をモチーフにしていて、銀河鉄道の夜の小説のテキストがランダムに描かれていくというものです。

言葉がどんどん描かれ、折り重なっていくと文字としてカオス状態になっていくのですが、それがさらに進むと銀河鉄道の夜の風景が浮かび上がってくる、というコンセプトです。

■実際に出来るまでに試したこと
ここからは実際に作品ができるまでに行ったことを順を追って見ていきたいと思います。

Processing触りたてということで、まずはランダムな位置に繰り返し円を描くということを行いました。

コードはこんな感じです。
————————————————————–

void setup() {

size(300, 300);//サイズは300×300

background(255);//背景は白

noStroke();//図形を描いても輪郭の線はなし

}

void draw() {

int x = int(random(300));

int y = int(random(300));

float d = random(5, 10);

fill(10);//塗りつぶす色

ellipse(x, y, d, d);//xyの位置(ランダム)に半径dの円を描いていく

}

————————————————————–

こんな感じのコードです。すごく簡単です。

次に前回紹介した「取り込んだ画像の任意の位置の色情報を取得する」コードを利用して、ランダムに描かれる円の色を取り込んだ写真の色で描くというように修正してみました。

「void setup()」という初期の設定を行うところに

myPhoto = loadImage(“yamakenlab.jpg”); //画像を読み込む」
を、

「void draw() 」という繰り返しの命令を行うところに

myPhoto.loadPixels(); //取り込んだ画像の色情報の配列を読み込む

fill(myPhoto.pixels[y*width + x]);//塗りつぶす色は、取り込んだ画像の同じ場所の色

を書き足しました。

ずいぶん進歩した感じになりました。

ここで円を描画するのではなくテキストを表示したら面白いと思い、

「ellipse(x, y, d, d);」(円を描画)を「text(“トーキョー建築トリップ”, x, y);」(文字を描画)に変更してみました。

だいぶ最終形に近づいてきましたね。

ここでただ決められた文字でなく小説の文章を描くというアイディアが浮かび、描画する文章をテキストデータから引用することにしました。

本当はウェブや違ったデータ形式から持ってきたかったのですが、まだまだ初心者なのでテキストデータを(頑張って)つくりました笑

銀河鉄道の夜を使ったのは大好きな小説ということと、文字データを入手しやすいと思ったからです。そこからだんだんとイメージが膨らみました。

実家の猫の画像からPhotoShopで作成した東京の夜空に走る銀河鉄道の夜のイメージに画像を差し替え完成です。

最終的には文字の大きさや表示する速度の調整も行っています。

例えば後半にいくに従って文字を小さくする(画像の精度が上がる)ようにしたり、描画の速度を上げたりしました。(本当は描画のタイミングなどももう少し工夫したいのですがまだ無理でした)

いかがだったでしょうか。こう見ていくと、本当に基礎の基礎だけでこうした作品ができてしまうことが分かるのではないかと思います。(作品の出来は別として)

次回はウェブカメラを使った作品についてまとめたいと思いますので、興味がわいた方は引き続き一緒にデジタルアートの世界にトリ
ップしましょう。