TOPIC > ARTICLE
HTML5でのジェネラティブ・アート［Processing、JavaScript、チュートリアル］ （『ジェネラティブ・アート』の未刊の章）
December 21, 2012(Fri)|
本記事はビー・エヌ・エヌ新社より刊行された「ジェネラティブ・アート」をスケッチするための解説書『ジェネラティブ・アート―Processingによる実践ガイド』の著者であるマット・ピアソン氏がCreativeApplications.Netでのスピンオフ企画として寄稿した原稿の翻訳版となります。「ジェネラティブ・アート」に興味がある方はぜひ本と合わせて御覧ください。
「ジェネラティブ・アート Processingによる実践ガイド」についてはこちらから。
This article is a Japanese translation of Matt Pearson’s Tutorial at CreativeApplications.Net, thanks to BNN.
『ジェネラティブ・アート』を執筆している間、いつもだったら「簡潔に」あるいは「明快に」という名のもとに、編集室の床にうち捨てられてしまうような、さまざまな脱線やおかしな戯言がありました。以下は、そんな脱線に手を加えてできた短いチュートリアルです。Processing 2.0のベータ版がリリースされることになり、いよいよこいつをCreativeApplications.Netで共有するのに好都合な時機がやってきたように思えました。なぜならP5-2のいかした特徴の1つが、HTML5への書き出しだからです。
このチュートリアルは3部構成になっています。
1. 『HTML5による実践ガイド』
私にとっては、「なぜ（why）」というのは「いかに（how）」というのと同じぐらい重要です。本には書いてありませんが、なぜそれが重要なのかをまず説明させてください。
2. ProcessingからJavaScriptへ―ばかばかしいくらい簡単な方法
ProcessingユーザーのためのHTML Canvasです。2分バージョンでお送りします。
3. JavaScriptによるジェネラティブ・アート―ちょっと難しくなるけれど、でもまだばかばかしくて簡単な方法
仲介業者の外し方。他でもない、あのブラウザのJavaScriptをいかにして手中にするか？
1. 『HTML5による実践ガイド』
『ジェネラティブ・アート―Processingによる実践ガイド』は、タイトルが示すように、ジェネラティブ・アートについての本でした。けれどもサブタイトルにあるような、Processingについての本であるとは必ずしも言えません。本の中では、このテーマを探究するのに私がなぜProcessingを最適な手段として選んだのかを説明することに1つの章のかなりの部分を費やし、さらにこの言語になじんでいないまったくの初心者へのガイドも書きました。でも読者のみなさんには、Processingがジェネラティブ・アートの探究に使える唯一のツールであるとは誤って信じてほしくなかったのです。
私のもともとの案では、読者が好きな言語を用いられるように本の中のプログラム例をメタコードの形式で書いて、この本を完全に言語不可知論的（language agnostic）［訳注：特定のプログラミング言語に依存しない形式］にするというばかばかしいアイデアがありました。あとから考えてみると、確かにこれは無茶な考えで、私自身はすべてを詰め込めてとってもハッピーかもしれないけど、メッセージの明快さは失われてしまうでしょう。読者の側に擬似コードを各々の言語に翻訳してもらわなければらないことは、アルゴリズムからセクシーなビジュアルを生み出す際の大きな障壁となったでしょう。
さらに面白半分のアイデアとして、概念の普遍性をしっかりと伝えるために、複数の言語を使うだとか、あるいは本の別版を作ってしまうことも考えました。『ジェネラティブ・アート―HTML5による実践ガイド』は、CanvasとJavaScriptの組み合わせがちょうどホットな今、まさに真っ先にやるべきもののように思えました。しかしそれでも、それはもともとの問いに答えるというよりは、むしろ目先を変えただけに過ぎないのではないでしょうか？
身近なもので、この考えを的外れなものにしてしまうのに一役買ったのがProcessing 2.0でした。Processing 1.5でIDE（統合開発環境）の状態に新しい概念が追加されました。ウィンドウの右上のボタンで「Standard」（デスクトップあるいはアプレットに出力します）、あるいは「Android」（デバイスに出力します）に、コンパイルの対象を切り替えられるようになりました。さらに2.0では、内蔵しているProcessing.jsを使ってHTML5 Canvasに直接出力できる「JavaScript」という3つ目のオプションが加わりました。これが本当にうまく機能するんです。
このことは別に、コンピュータ・コードのバベルの塔が近々に崩壊してしまうのではないかということを意味しているわけではありません。でも、メタコード／言語不可知論版の本やら量子不確定言語多元宇宙版シリーズの執筆に自分の時間を無駄にすべきでないと思わせるだけのものがありました。この本の生成の概念が、どれほど簡単にProcessingだけでなくJavaScriptでもできるのかを、ちょっとデモンストレーションだけで十分なのです。そうすれば、さらなる追求は読者のみなさんにまかせることができます。
これから、私の本の最初のコードを例にとって、それをJavaScriptに変換してみます。まずはIDEからJavaScriptに出力するという簡単なやりかたで。次にもっといい、ダーティーなやりくちの、JavaScriptで直接コーディングする方法で。
2. ProcessingからJavaScriptへ―ばかばかしいくらい簡単な方法
JavaScriptはProcessingにとてもよく似た構文をしています。でも重要な違いは、その背景や状況や文脈です。あるシナリオに完璧な道具が、必ずしも他のものに最適であるとは限りません。HTML5のいちばんの強みは、Webに目標を定めていることです。Webブラウザでネイティブ、つまりFlashやJavaのようなプラグインの必要なく動く、ということです。でも不利な点もあります。まず第一に、今のところ最新のモダンブラウザ（Google Chrome、Firefox 5+、Safari …）を必要とすること、第二にやや遅いということ。もしあなたがProcessing、ActionScript、C++のコーディングに慣れているなら、このことは重要です。けれどももし私たちがこうした要素をわかってさえいれば、HTML5をうまく使って簡単にブラウザ上でジェネラティブ・アートを制作することができます。
もしあなたが互換性のある最新のブラウザを使っていれば、zenbullets.comのトップにあるジェネラティブなアニメーションをすぐに見ることができます。
まずは、私の本のイントロ部分の29ページにあるProcessingコードの例を修正してみます。このページを読んでいるみなさんなら、Processingの基本的な知識があると考えてよいですね。もしそうでなければ、私の本のChapter 2、オンラインチュートリアル、あるいは他のすぐれたProcessingについての本などを見てください。もしあなたがJavaScriptのことだけを知りたいのなら、どうぞ次の「3. JavaScriptによるジェネラティブ・アート」まで先に進んでください。
float xstart, ystart, squaresize;
void setup() {
size(500, 500);
background(150);
xstart = random(10);
ystart = random(10);
squaresize = height/8;
}
void draw() {
fill(150, 150, 150, 15);
noStroke();
rect(0, 0, width, height);
stroke(0, 50);
fill(255, 200);
xstart += 0.02;
ystart += 0.01;
translate(width/2, height/2);
float ynoise = ystart;
for (float y = -squaresize; y <= squaresize; y+=3) {
ynoise += 0.02;
float xnoise = xstart;
for (float x = -squaresize; x <= squaresize; x+=3) {
xnoise += 0.02;
drawPoint(x, y, noise(xnoise, ynoise));
}
}
}
void drawPoint(float x, float y, float noiseFactor) {
pushMatrix();
translate(x * noiseFactor * 4, y * noiseFactor * 4);
float edgeSize = noiseFactor * 20;
ellipse(0, 0, edgeSize, edgeSize);
popMatrix();
}
本に掲載したバージョンとは、2つの重要な変化があります。
まず第一に、コードを単純にするために3Dを2Dにしました。HTML5では、現在最も洗練された方法のthree.jsを使えば3Dを扱えます。そしてProcessing.jsもWebGLを使って3Dを扱えます。しかしこの例の場合、3Dの効果は不要ですし、ブラウザでやるとちょっとオーバーヘッドがあります。ここでの変更は2行だけです。
size(500, 500);
と
translate(x * noiseFactor * 4, y * noiseFactor * 4); float edgeSize = noiseFactor * 20;
あとはsize()を変えて、canvasを小さくしています。
第二に、本のバージョンでは特大の高品位印刷用静止イメージを出力するようにデザインされていました。しかしブラウザの場合、それよりもアニメーションにして動かした方がもっと面白いでしょう。そこで私は、多くの描画コードをsetup()からdraw()に移動して、以下の行を加えました。
xstart += 0.02; ystart += 0.01;
これらのノイズ値で、フレームごとに波立たせます（このテクニックについての詳しい説明は、私の本のChapter 4を見てください）。
Processing IDEの中にこのコード（ここにあります）をコピペしてください。そうすれば上のようなイメージが表示されます。さらにもしみなさんがProcessing 2.0（ここからプレリリース版をダウンロードできます）を入れていれば、「JavaScript」にコンテクストを変えることでHTML Canvasに出力することができます。
これでおしまい。
簡単でしょ？ もう一度やってみましょうか。でも今度はセーフティネットはありませんよ。
3. JavaScriptによるジェネラティブ・アート―ちょっと難しくなるけれど、でもまだばかばかしくて簡単な方法
私たちは、すべてをやってくれる魔法のボタンを手に入れました。けれどもカーテンの後ろの仕掛けがわかれば、そこからさらに学べるものがあります。このチュートリアルで私がやろうとしている大事なポイントは、Processingはとても役に立つ便利な道具であるけれど、自分のアイデアを実現するのに実際にはProcessingを必要としないということです。JavaScriptで直接コーディングしてみましょう。
そんなに難しくありません。次の2つのステップでできます。
ステップ1：コンテクスト
すべての始まりはcanvasタグです。そこにJavaScriptの関数をもってきて、その関数を起動する命令を書きます。これはすべて以下のHTMLに含まれています。
<html>
<head>
<script type="application/javascript">
function setup() {
var canvas = document.getElementById("scrawl");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(255, 0, 0)";
ctx.fillRect (10, 10, 60, 60);
}
</script>
</head>
<body onload="setup()">
<canvas id="scrawl" width="720" height="180"></canvas>
</body>
</html>
実行すると、こうなります。Processingとの一貫性を保つために、私はJavaScriptの関数をsetup()と名付けました。その関数はHTMLのタグのなかでファイルを読み込んだ際に呼ばれます。この関数は、自分が機能していることを示すためにキャンバスに赤い正方形を描きます。
次に、Processingのdraw()関数に相当するものを実行しましょう。「interval」を使って、draw()関数を50ミリ秒ごとに呼び出します。これはProcessingでフレームレートを設定するのと同じことです。
var interval;
var width, height;
var x, y;
function setup() {
width = 720;
height = 180;
canvas = document.getElementById("scrawl");
ctx = canvas.getContext("2d");
x = 0;
y = 10;
interval = setInterval(draw, 50);
}
function draw() {
ctx.fillStyle = "rgba(255, 255, 255, 0.1)";
ctx.fillRect (0, 0, width, height);
x += 5;
if (x > width) { x = 0; }
ctx.fillStyle = "rgb(255, 0, 0)";
ctx.fillRect (x, y, 60, 60);
}
さらに、width、height、x、yといったいくつかの変数を設定します。JavaScriptでは、変数の型（int、floatなど）を設定する必要はありません。同様に、関数は戻り値の型を必要としません。関数ごとにvoidをつけて定義しなくても大丈夫です。こういう感じで、JavaScriptのコーディングは簡単ですが、その代わりに簡単にミスも犯してしまいます。
fillのスタイルの設定や長方形を描くところを見れば、Canvasの構文がProcessingとどのように違っているかがわかります。でも、他の残りのコードはProcessingとほとんど同じです。fillのスタイル定義は、関数を呼び出すというよりもむしろパラメータを設定するようなものです。私はそれを「rgb」（もしアルファ値を使うなら「rgba」）ストリングを使ってやってきました。これはCSSでパラメータを設定するのとちょっと似ています。RGB3色の値が0から255で、アルファ値は0.0から1.0の範囲になります。
fillRect関数は、Processingのrect()と同じように4つのパラメータをとります。
こんなふうに、透明な正方形がフレームごとに少しずつ像を消して（残して）いきながら動くことで、キャンバス上にフェード効果が作られることがわかると思います。
オーケー、これでコンテクストがわかりましたね。それでは次に、そこにProcessingスケッチを詰め込んでみましょう。
ステップ2：マジック
次のステップの見所は、上のProcessingバージョンからのコピー／ペーストというところです。もちろん芸術的あるいは構文的な理由（あとで説明します）で、かなりの修正もしています。アニメーションの最終版はここにあります。みなさんのブラウザの「ソースを表示（view source）」を使ってコードを取得してください。
それでは、コードを3つの部分に分けて説明していきます。まずはじめは、設定部です。
var canvas, ctx;
var interval;
var width, height;
var perlin;
var xanchor, yanchor, midx, midy, xposnoise, yposnoise;
var xstart, ystart;
var squaresize;
function setup() {
width = 720;
height = 180;
canvas = document.getElementById("scrawl");
ctx = canvas.getContext("2d");
xanchor = 550;
yanchor = 50;
perlin = new SimplexNoise();
xstart = Math.random() * 10.0;
ystart = Math.random() * 10.0;
xposnoise = Math.random() * 10.0;
yposnoise = Math.random() * 10.0;
squaresize = 22;
interval = setInterval(draw, 50);
}
ここは既に知っていることがほとんどですね。widthとheight、キャンバスへの参照、そして最後に、描画を繰り返す間隔を定義します。前の例と同じです。
最初の変更はxanchorとyanchorを定義することです。私の750×180というヘッダのサイズに合わせるために、アニメーションを右に寄せたいと思いました。この2つの変数がアニメーションの位置を決めます。けれどもこの変数の位置に固定してしまわないよう、描画ループの中でパーリンノイズを使って、位置が少しずつ変化していくようにします。
私の本のChapter 3とChapter 4で論じられているパーリンノイズは、Processingでもそうですが、JavaScriptにも組み込まれていません。でもそれは問題にはなりません。既にどこかの賢い人（いつも私たちより賢い人がいるものです）がパーリンノイズのコードをJavaScriptに移植して、公開してくれています。今回はSean “banksean” McCullochが作ってくれたものを組み込みます。ダウンロードしたら、このHTML文でページに取り込んで、私たちのコードで使えるようにします。
<script type="application/javascript" src="perlin-noise-simplex.js"></script>
setup()関数のこの行で初期化します。
perlin = new SimplexNoise();
すぐにこれを、draw()ループでどのように使うかがわかるでしょう。
残りの行では、0と10の間のランダムな浮動小数点数でxstart、ystart、xposnoise、yposnoiseの4つの変数を設定します。この部分の構文は、Processingと大きくはありませんが若干違っています。これらをどのように使うのかももうすぐわかります。squaresize変数は、Processing版でもやったように、格子の行と列の数を定義します。
次は、drawループです。
function draw() {
ctx.fillStyle = "rgba(255, 255, 255, 0.1)";
ctx.fillRect (0, 0, width, height);
ctx.strokeStyle = "rgba(0, 0, 0, 0.15)";
ctx.fillStyle = "rgba(255, 255, 255, 0.6)";
xposnoise += 0.02;
yposnoise += 0.01;
midx = xanchor + Math.floor(perlin.noise(xposnoise, 0) * 50);
midy = yanchor + Math.floor(perlin.noise(yposnoise, 0) * 50);
xstart += 0.02;
ystart += 0.01;
var ynoise = ystart;
for (var y = -squaresize; y < squaresize; y++) {
ynoise += 0.02;
var xnoise = xstart;
for (var x = -squaresize; x < squaresize; x++) {
xnoise += 0.02;
var nFactor = Math.abs(perlin.noise(xnoise, ynoise));
drawPoint(x, y, nFactor);
}
}
}
まずfillのスタイルを設定し、次に半透明な長方形を描くことで、前の例のようなフェード効果を作ります。さらにうねる円の44×44のグリッドを描く際の、strokeとfillのスタイルを設定します。さらにコードを読み進めていくと、x軸とy軸方向に-squaresizeからsquaresizeまで、格子を生成するための2つのforループが見えてきます。
次に、xposnoiseとyposnoiseを使って、先ほど定義したxanchorとyanchor変数を変動させて常に移動し続ける中心点を計算します。フレームごとにこの値を少しずつ増やしていくことで、ノイズ値がだんだんと大きくなっていきます。
midx = xanchor + Math.floor(perlin.noise(xposnoise, 0) * 50); midy = yanchor + Math.floor(perlin.noise(yposnoise, 0) * 50);
この2行で中心点を変数midxとmidyに代入します。ここでパーリンノイズがどのように機能しているかについては触れませんが（私の本を読みましょう！）、しかし値を返すperlin.noise(xin, yin) * rangeと、切り下げて整数にするMath.floor(value)というJavaScriptを確認しておいてください。Seanのノイズ関数は2次元のノイズを計算するために特化されていますが、ここでは1次元で計算すればよいので、ｙの値を0としておきます。
ループの中のループ（2重ループ）でそれぞれのグリッドの位置でのnFactor変数の値を得るために、2次元ノイズと同じようなことをやっています。そしてこの値を、円を描くdrawPoint()関数に渡します（ちょうどProcessing版でもやったように）。この方法は私の本のChapter 4でも詳説されています。上の「2. ProcessingからJavaScriptへ」で見たように、その構文はProcessing版とかなり似ています。
最後に、どのように円をCanvasに描くかを決めるdrawPoint()関数を示します。
function drawPoint(ex, why, noiseFactor) {
var x = midx + (ex * noiseFactor * 13);
var y = midy + (why * noiseFactor * 9);
var edgeSize = noiseFactor * 26;
ctx.beginPath();
ctx.arc(x, y, edgeSize, 0, Math.PI*2,true);
// x, y, rad, start angle, end angle, anti/clockwise
ctx.fill();
ctx.stroke();
}
Canvasにはellipse()関数はありませんが、arc()が同様の機能を持っています（より三角法的ですが）。そこに中心点のxとy座標、開始と終了の角度、さらに時計回りあるいは反時計回りに描くかを決めるオプションのフラグ（ブーリアン変数）を渡します。ですから、開始と終了の角度を0から360度（ラジアンで2*PI）にすると円を描いてくれます。
beginPath()というコマンドは、JavaScript版におけるbeginShape()にあたります。形の内側が塗られているか、あるいは輪郭だけであるか（つまりProcessingのfill()あるいはnoFill()）は、パスが定義された後に決めていることに注意してください。ctx.fill()を呼び出せば、それまでに定義された弧が塗り潰されて、つまり以前に設定した「fillStyle」で描かれ、そしてctx.stroke()は、同じ形を輪郭だけで以前に設定した「strokeStyle」を使用して表現します。みなさんが慣れ親しんだいつもの連続的な処理の流れに反した感じがするかもしれませんが、特に理解するのが難しいというわけでもありません。
以上で、すべて終了です。私のJavaScriptは（私のProcessingと同じように）完璧ではありませんし、私がしようとしていたことを行うのにもっと円滑な方法があると思っています。けれどもそのことはあまり重要ではありません、少なくとも、ここで私が言いたいことではありません。私が示したかったのは、別のプログラム言語にあてはめるのがどれくらい簡単かということと、Processingを使ってみなさんが開発したどんな技術も、JavaScriptや他の言語にそれほど頭を悩ませずに翻訳できるということです。
ぜひ、楽しんでください！
アーティストたちは、常に新しいメディアを探索してきました。コンピュータを使うアーティストも例外ではありません。ジェネラティブ・アート（コンピュータ・アルゴリズムから生み出されるプリントや画面イメージに対する新しい技法）は、プログラミングやコンピュータグラフィックスと個人的な表現の芸術的な交点を見い出しました。
ジェネラティブ・アートは、アルゴリズム的な技法と美しさの両方を提示するものです。この本でみなさんは、ジェネラティブ・アートのたくさんの質の高い事例と、著者でありアーティストであるマット・ピアソンが追い求めてきたユニークな作品を作るためのプログラム的な手法に出会うでしょう。この本には、文中で紹介された例を実際に作ってみるために必要な、各コンポーネントの簡潔な技術的チュートリアルがあります。それは皆さんが自分自身が作品を作るのに、どうしたらさまざまなテクニックを組み合わせたり、再使用したりできるかということに、多くの助言と示唆を与えてくれるでしょう。
CreativeApplications.Net 元記事
© 2012 CreativeApplications.Net
Licensed under a Creative Commons License.
Information
ジェネラティブ・アート Processingによる実践ガイド
http://www.bnn.co.jp/books/title_index/web/processing.html
CBCNET記事：http://www.cbc-net.com/topic/2012/12/processing-generative-art/
ISBN：978-4-86100-856-6
定価：2,520円（本体 2,400円＋税）
仕様：B5判変型／248ページ／※本書と同内容のPDFデータをダウンロードできます
発売予定日：2012年12月21日
著者：マット・ピアソン
翻訳：沖 啓介
監訳：久保田 晃弘
ジェネラティブ・アート -Processingによる実践ガイドposted with amazlet at 12.12.17Matt Pearson
ビー・エヌ・エヌ新社
売り上げランキング: 2192
