258250ed-5d95-82c5-4fb4-21b66bebe27b

random()とnoise()の違い

Processingで乱数を取得する関数にrandom()とnoise()がありますが、両者には違いがあります。

random()

乱数を呼び出すたびに取得し、返り値はfloat型になります。
引数に何も記述しないと0.0〜1.0の範囲の乱数を取得します。
random(max);
引数が1つのときは0〜maxの範囲の乱数を取得します。
random(min, max);
引数が2つのときはmin〜maxの範囲の乱数を取得します。

539f17e3-c1da-73b0-278c-eaa30a9c83b1

random.pde

size(500,100);
background(255);
strokeWeight(5);
smooth();
stroke(0, 30);
line(20,50,480,50);

int step = 10;
float lastx = -999;
float lasty = -999;
float y = 50;
int borderx=20;
int bordery=10;

stroke(0);
for (int x=borderx; x<=width-borderx; x+=step) { y = bordery + random(height - 2*bordery); //from 10 to 90 if (lastx > -999) {
    line(x, y, lastx, lasty);
  }
  lastx = x;
  lasty = y;
}

yの値は10から90の範囲を取得します。

noise()

こちらも乱数を取得しますが、正確にはパーリンノイズという主に自然物を描写する際に使用するノイズ値を取得します。
0.0から1.0の間のfloat型を取得します。

258250ed-5d95-82c5-4fb4-21b66bebe27b
noise.pde

size(500, 100);
background(255);
strokeWeight(5);
smooth();
stroke(0, 30);
line(20, 50, 480, 50);
stroke(0);
int step = 10;
float lastx = -999;
float lasty = -999;
float ynoise = random(10);
float y;
for (int x=20; x<=480; x+=step) { y = 10 + noise(ynoise) * 80; //from 10 to 90 if (lastx > -999) {
    line(x, y, lastx, lasty);
  }
  lastx = x;
  lasty = y;
  ynoise += 0.1;
}

この例では変数ynoiseをrandom(10)からはじめ、
その値を0.1ずつ増やしてnoise()の引数にしています。パーリンノイズはゲーム開発において炎、雲、水などに使用されているので、random()より自然な動きを作り出すことができます。
パーリンノイズについては奥が深く、今回は触り程度の内容なので、機会があれば続きを投稿したいと思います。

参考:ジェネラティブ・アート―Processingによる実践ガイド

180px-Processing_Logo_Clipped.svg

参考にしている本、サイト

ここでは僕が参考にしている本やサイトを紹介します。
Processingはデジタルアートやビジュアルデザインの表現のためのプログラミング言語です。
実行すればすぐに結果が見られ、他の言語でも使用される変数宣言やif文、for文、オブジェクト指向などの勉強も一通りできるので、初心者向きの言語です。
しかし奥も深いので、美しいグラフィックを制作するには、それなりの学習が必要になります。
個人的にはProcessingが一番使いやすく、馴染んでいるのでよく使います。
しかしオブジェクトが多くなると徐々に処理速度が低下しやすいのが難点です。

https://processing.org/

■本

オフィシャルにリファレンスがありますが、最初は本の方がいいと思います。
順序だって学習でき、サンプルや索引があるものが良いです。

・初級編

Processing:ビジュアルデザイナーとアーティストのためのプログラミング入門
Processing開発者のベン・フライ、 ケイシー・リースによって書かれた入門書なので、間違いはないです。
問題は値段。僕も以前英語版を購入しようか迷いましたが、値段がアレなので我慢しました。


Built with Processing[Ver. 1.x対応版] -デザイン/アートのためのプログラミング入門
僕が最初に手に取ったのはこれより改訂前の本でしたが、良き入門書です。
今読み返してもわかりやすいのですが、さすがに内容が古いかも。

・初〜中級編

[普及版]ジェネラティブ・アート―Processingによる実践ガイド
僕が一番オススメしたいのがこの本。
後半は難しくなるので初心者〜中級者向けといったところでしょうか。
ただのリファレンス本ではなく、デザインやアートの視点から順序だてて教えてくれます。
著者マット・ピアソンのジェネラティブアートに関する哲学も書かれていて、読み物としても最高です。

・上級編

ビジュアライジング・データ ―Processingによる情報視覚化手法
2008年出版と古いですが、データの視覚化については今でも参考になります。
途中から難しくなりますと前書きにありますが、最初から難しく、途中から難易度MAXに到達します(笑)

上記の他にも僕が読んでいない日本語の入門書があるので、自分にあった本をます一冊読みこむと良いと思います。

■Web

次はいよいよ自分がイメージしたグラフィックをwebで参考にして実現する番です。
僕が参考にしているサイトをいくつか紹介します。
世の中には本当にすごい、そしてやさしい人が多いです。

Processing学習ノート
Processingの基本から教えてくれます。
説明も丁寧で、今もよく参考にさせてもらっています。

OpenProcessing
Processingの猛者達が自身の作品をアップしています。
嬉しいのはソースコードが見られること。
コードを見たり、写経したりして、どのように組んでいるのかが参考になります。
ただ、高度なプログラミングを駆使している人が多く、レベル高いです。全体的に。

AbandonedArt.org
マット・ピアソンのサイト。こちらのソースコードも参考になります。
レベルも基本が身についていれば理解できるし、勉強にもなります。
憧れの人です。実際に会ったら目をキラキラさせてサインください!!と言っちゃうレベル。

Tutoprocessing
こちらはフランス語(!)ですが初級、中級、上級と分けたチュートリアルがあるので、コードだけ読めればなんとか参考になります。

{Software} Structures by Casey Reas et al.
全体的に難しいですが、Processingで著名な面々のサンプルがあります。
もう更新はされていないようです。

onsen

spider

こちらは宇宙のイメージというより抽象的なグラフィックかなと思い、違うカテゴリにしました。
ContextFreeというツールを使用しています。
今じゃあまりバージョンアップもされず、使用している人も少ないみたいで寂しい限りですが、簡単なグラフィックを作るには良いツールだと思います。
時流に乗れず廃れた感があるところが、また好きなところです。

I think this is an abstract graphic, not images of space. I shared this to different categories.
I use ContextFree.
Now, this is not updated and I feel lonely because only a few people use it.
But this is good tool designing simple graphic.