NodeBoxで始めるジェネラティブ・アートShinichi Morimoto <shnmorimoto@gmail.com>

13年9月15日日曜日

お前、誰よ

• 森本 真一 （もりもと しんいち）

• @shnmorimoto

• 株式会社キャッチボール・トゥエンティワン

• 開発部

• Web サービス開発（Python + Django）

13年9月15日日曜日

今日話すこと

• ジェネラティブ・アート（デザイン）って？

• ヴジュアライゼーションツール紹介

• ジェネラティブ・アートの基本テクニック

• Noise処理

• 群衆アルゴリズム

「ジェネラティブ・アート　Processingによる実践ガイド」 「Beyond Interaction」

13年9月15日日曜日

ジェネラティブ・アート（デザイン）

ジェネラティブアートは、アーティストが、自然言語の文法、コンピュータプログラム、機会、その他の手続き的な創意を用いて、芸術作品に対して何らかの自立性を働かせたり、その結果を生み出すようなシステム一式を用いて行う、芸術的な実践を意味している。

Philip Galanter,BA, MFA, 2003, What is Generative Art? Complexity Theory as a Context for Art Theory

● 美的なものを作るアルゴリズムの方法● アーティストと自律システム間のコラボレーション● 完全に決定論的なプロセスから予想できない結果を引き出す行為

● 秩序とカオスの間のスイートスポットの探求● コーディングに対する新鮮で面白いアプローチ● 大きな可能性を秘めた成長するメディア

マット・ピアソン, 「ジェネラティブ・アート　Processingによる実践ガイド」, p60

13年9月15日日曜日

KBGD01E 0012、マリウス・ワッツ(2010)

http://www.flickr.com/photos/watz/4536049736/sizes/z/in/photostream/

13年9月15日日曜日

Process 14 / Image 4、C. E. B. Reas(2008)

http://reas.com/iperimage.php?section=works&work=p14_images1_p&id=0

13年9月15日日曜日

Mondrian Architecture(2009)http://zenbullets.com/blog/?p=204

13年9月15日日曜日

Broken Mirrors 1–4(2011)

http://zenbullets.com/blog/?p=951

13年9月15日日曜日

ヴジュアライゼーションツール

Processingプラットフォーム：マルチプラットフォーム言語：Java

openframeworksプラットフォーム：マルチプラットフォーム言語：C++

CINDERプラットフォーム：Windows, Mac OS X

言語：C++

NodeBoxプラットフォーム：マルチプラットフォーム※言語：Python

13年9月15日日曜日

NodeBox

• Experimental Media Research Group, Sint Lucas School of arts（ベルギー）で開発

• 複数バージョンが存在

• NodeBox 3

• 最新版

• マルチプラットフォーム

• Node型のプログラミング環境（拡張はPythonで記述）で開発・実行環境を提供

• NodeBox 1

• Mac OS X のみ開発・実行環境を提供

• インターフェースはPython

• NodeBox OpenGL

• マルチプラットフォーム

• Pythonのライブラリとして提供

13年9月15日日曜日

NodeBox 1ダウンロード・インストール

http://nodebox.net/

13年9月15日日曜日

NodeBox 1ダウンロード・インストール

Snow Leopard以前はこっち

Lion 移行はこっち

13年9月15日日曜日

NodeBox 1ダウンロード・インストール

クリックして実行

13年9月15日日曜日

NodeBox 1 実行環境

実行結果表示コード記述

実行時メッセージ表示

13年9月15日日曜日

NodeBox 基本（座標系）

(0, 0)

(0, 3)

(2, 0)

(4, 4)

・左上が原点（0, 0）・右方向（x座標）、下方向（y座標）に向かって座標値が大きくなる

13年9月15日日曜日

NodeBox 基本（図形）・直線line(start_x, start_y, end_x, end_y)

・四角rect(start_x, start_y, width, height)

・円oval(start_x, start_y, width, height)

※rect, ovalは左上の頂点を指定

13年9月15日日曜日

NodeBox 基本（図形要素、色）

strokestrokewidth

fill

・線の太さstrokewidth(size)

・線の色stroke(r, g, b, a)

※RGB指定の場合

・図形の塗りつぶしfill(r, g, b , a)

※色の指定方法は、RGB, HSB, CMYK等が指定可能13年9月15日日曜日

NodeBox 基本（Animation）・setup()

初期化の処理を記載。初回時に一回だけ実行

・draw()

毎フレーム毎に実行される。画面の更新処理を記載

・speed(x)

フレームレートの指定

・mousedown, MOUSEX, MOUSEYマウスのクリック検出、マウスの位置

13年9月15日日曜日

●ジェネラティブ・アート

- 生成的手法で生成されること

- ランダム的な要素があること

生成時に同一のものが作成されない

●NodeBox

- NodeBox3はプログラミングレス

- 開発・実行環境があるので楽！

- 基本的な図形&アニメーション

ジェネラティブ・アート&Nodebox

(まとめ）

13年9月15日日曜日

Noise 処理

13年9月15日日曜日

Noise 処理（ランダムな線の描画）

まずは直線

終点をランダムに

size(500, 100)stroke(0,0,0)strokewidth(5)line(20, 50, 480, 50)

size(500, 100)stroke(0,0,0)strokewidth(5)randx = random(WIDTH)randy = random(HEIGHT)line(20, 50, randx, randy)

13年9月15日日曜日

Noise 処理（ランダムな線の描画）

ステップ毎にYをランダムな値に

size(500, 100)stroke(0,0,0)strokewidth(5)step = 10lastx = -999lasty = -999y = 50borderx = 20bordery = 10for x in range(borderx, (WIDTH - borderx), step): y = bordery + random(HEIGHT - 2 * bordery) if (lastx > -999): line(x, y, lastx, lasty) lastx = x lasty = y

13年9月15日日曜日

Noise 処理（ランダムな線の描画）

ステップ毎にYへの増（減）分値をランダムな値に

size(500, 100)stroke(0,0,0)strokewidth(5)

xstep = 10ystep = 10lastx = 20lasty = 50borderx = 20y = 50

for x in range(borderx, (WIDTH - borderx), xstep): ystep = random(20) - 10 y += ystep line(x, y, lastx, lasty) lastx = x lasty = y

13年9月15日日曜日

Noise 処理（Perlin Noise）

パーリン・ノイズ・疑似ランダムの一種・Ken Perlinが考案・CGをより自然に見せるためのテクスチャ作成に使用される（雲や炎等）

特徴・大きな値と小さな値が混じってる・スケールが同じ・連続的な値

13年9月15日日曜日

Noise 処理（Perlin Noiseの追加）

http://nodebox.net/code/index.php/Noise

・NodeBoxのサイトからzip（noise.zip）ファイルをダウンロード

・展開後、フォルダを「~/Library/Application Support/NodeBox」に配置

~/Library/Application Support/NodeBox

13年9月15日日曜日

Noise 処理（Perlin Noise）

noise = ximport("noise")

size(500, 100)stroke(0,0,0)strokewidth(5)

step = 10borderx = 20lastx = -999lasty = -999ynoise = random()for x in range(borderx, (WIDTH - borderx), step): y = 10 + noise.generate(ynoise) * 80 if (lastx > -999): line(x, y, lastx, lasty) lastx = x lasty = y ynoise += 0.1

ステップ毎にYをランダム（パーリンノイズ）な値に

13年9月15日日曜日

Noise 処理（ランダムな円の描画）from math import sin, cos, radians

size(500, 300)fill(0,0,0)

radius = 100centx = WIDTH/2centy = HEIGHT/2

for ang in range(0, 360, 5): rad = radians(ang) x = centx + (radius * cos(rad)) y = centy + (radius * sin(rad)) oval(x, y, 5, 5)

θ(sin θ, cos θ)点線の円を描画

13年9月15日日曜日

Noise 処理（ランダムな円の描画）

from math import sin, cos, radians

size(500, 300)stroke(0,0,0)strokewidth(1)

radius = 10centx = WIDTH/2centy = HEIGHT/2

lastx = -999lasty = -999

for ang in range(0, 1440, 5): radius += 0.5 rad = radians(ang) x = centx + (radius * cos(rad)) y = centy + (radius * sin(rad)) if (lastx > -999): line(x, y, lastx, lasty) lastx = x lasty = y

円を螺旋に変更

13年9月15日日曜日

Noise 処理（ランダムな円の描画）from math import sin, cos, radiansnoise = ximport("noise")

size(500, 300)stroke(0,0,0)strokewidth(5)radiusnoise = random()

radius = 10centx = WIDTH/2centy = HEIGHT/2

lastx = -999lasty = -999

for ang in range(0, 1440, 5): radiusnoise += 0.05 radius += 0.5 n_radius = radius + (noise.generate(radiusnoise) * 200) - 100 rad = radians(ang) x = centx + (n_radius * cos(rad)) y = centy + (n_radius * sin(rad)) if (lastx > -999): line(x, y, lastx, lasty) lastx = x lasty = y

螺旋にNoiseを追加

13年9月15日日曜日

Noise 処理（ランダムな円の描画）中略size(500, 300)strokewidth(0.5)stroke(0, 0, 0, 0.8)centx = WIDTH/2centy = HEIGHT/2

for i in range(100): lastx = -999 lasty = -999 radius = 10 radiusnoise = random() startangle = random(360) endangle = 1440 + random(1440) anglestep = 5 + random(3) for ang in range(startangle, endangle, anglestep): radiusnoise += 0.05 radius += 0.5 n_radius = radius + (noise.generate(radiusnoise) * 200) - 100 rad = radians(ang) x = centx + (n_radius * cos(rad)) y = centy + (n_radius * sin(rad)) if (lastx > -999): line(x, y, lastx, lasty) lastx = x lasty = y

ランダムな螺旋を100回繰り返し描画

13年9月15日日曜日

Noise 処理（Wave Clock）

matt pearson, Wave Clock (2009)http://abandonedart.org/?p=276

13年9月15日日曜日

Noise 処理（Wave Clock）from math import radians, pi, sin, cos

size(500, 300)stroke(0, 0, 0, 0.8)

radius = 100centx = WIDTH/2centy = HEIGHT/2

for ang in range(30, 180): rad = radians(ang) x1 = centx + radius * cos(rad) y1 = centy + radius * sin(rad)

opprad = rad + pi x2 = centx + radius * cos(opprad) y2 = centy + radius * sin(opprad) line(x1, y1, x2, y2)

(x1, y1)

(x2, y2)

13年9月15日日曜日

Noise 処理（Wave Clock）from math import radians, pi, sin, cos

size(500, 300)colormode(HSB, range=255)

radius = 100centx = WIDTH/2centy = HEIGHT/2col = 0col_change = 1

for ang in range(30, 180): rad = radians(ang) x1 = centx + radius * cos(rad) y1 = centy + radius * sin(rad)

opprad = rad + pi x2 = centx + radius * cos(opprad) y2 = centy + radius * sin(opprad) if col > 255: col_change = -1 if col <= 0: col_change = 1 col += col_change

stroke(0, 0, col) line(x1, y1, x2, y2)

明度をステップ毎に変更

13年9月15日日曜日

Noise 処理（Wave Clock）中略radiusnoise = random()centx = WIDTH/2centy = HEIGHT/2col = 0col_change = 1

for ang in range(0, 360): radiusnoise += 0.005 radius = noise.generate(radiusnoise) * 550 + 1 rad = radians(ang) x1 = centx + radius * cos(rad) y1 = centy + radius * sin(rad)

opprad = rad + pi x2 = centx + radius * cos(opprad) y2 = centy + radius * sin(opprad) if col > 255: col_change = -1 if col <= 0: col_change = 1 col += col_change

stroke(0, 0, col) line(x1, y1, x2, y2)

半径にnoiseを追加

13年9月15日日曜日

Noise 処理（Wave Clock）中略

ang = 0angnoise = random()

for i in range(0, 180): radiusnoise += 0.005 angnoise += 0.005 ang += (noise.generate(angnoise) * 6) - 3 if ang > 360: ang -= 360 elif ang < 0: ang += 360 radius = noise.generate(radiusnoise) * 550 + 1 rad = radians(ang) x1 = centx + radius * cos(rad) y1 = centy + radius * sin(rad)

opprad = rad + pi x2 = centx + radius * cos(opprad) y2 = centy + radius * sin(opprad) if col > 255: col_change = -1 elif col <= 0: col_change = 1 col += col_change

stroke(0, 0, col) line(x1, y1, x2, y2)

回転軸にnoiseを追加

13年9月15日日曜日

Noise 処理（Wave Clock）

完成版はアニメーションで！

13年9月15日日曜日

Noise 処理（まとめ）

● とりあえずノイズをかけてみよう

● 自然なノイズはPerlin Noiseで

●線の長さ、角度、色、etc...、色々とノイズをかけると面白い！

●色々な関数をノイズに使って、自分だけのエフェクトを！

13年9月15日日曜日

群衆アルゴリズム（Boids）

http://wired.jp/2010/06/22/%E9%B3%A5%E3%81%AE%E7%BE%A4%E3%82%8C%E3%81%8C%E3%80%8C%E4%B8%80%E4%BD%93%E3%81%A8%E3%81%AA%E3%82%8B%E3%80%8D%E4%BB%95%E7%B5%84%E3%81%BF%E5%8B%95%E7%94%BB/

13年9月15日日曜日

群衆アルゴリズム（Boids）

size(300, 200)

for i in range(100): x = random(WIDTH) y = random(HEIGHT) r = random(10) oval(x, y, r, r)

まずはランダムに円を描いてみる

(x, y)r1

r2

13年9月15日日曜日

群衆アルゴリズム（Boids）中略class Circle: def __init__(self, x, y, r): self.x = x self.y = y self.cx = x + (r / 2.0) self.cy = y + (r / 2.0) self.r = r self.c = color(random(), random(), random(), 0.3) def draw(self): fill(self.c) oval(self.x, self.y, r, r)

for i in range(50): x = random(WIDTH) y = random(HEIGHT) r = random(30) circle = Circle(x, y, r) circle.draw()

まずはランダムに円を描いてみる その２管理しやすいようにCircle クラスを作成

(x, y)r1

r

(cx,cy)

13年9月15日日曜日

群衆アルゴリズム（Boids）

class Circle: def __init__(self, x, y, r, d_x, d_y): self.x = x self.y = y self.cx = x + (r / 2.0) self.cy = y + (r / 2.0) self.r = r self.c = color(random(), random(), random(), 0.3) self.d_x = d_x self.d_y = d_y def draw(self): fill(self.c) oval(self.x, self.y, self.r, self.r) def update(self): self.x += self.d_x self.y += self.d_y

self.cx = self.x + (r/2.0) self.cy = self.y + (r/2.0)

ランダムに円を動かしてみるCircleに速度を追加する

updateでx座標、y座標を速度の分だけ更新

dx

dy

13年9月15日日曜日

群衆アルゴリズム（Boids）

speed(30)

def setup(): global circles circles = [] for i in range(50): x = random(WIDTH) y = random(HEIGHT) r = random(30) d_x = random(-5, 5) d_y = random(-5, 5) circle = Circle(x, y, r, d_x, d_y) circles.append(circle)

def draw(): global circles for circle in circles: circle.draw() circle.update()

1. 初期化時にcircleを作成し、配列に格納2. 毎フレーム毎にcircleを描画3. 描画に各circle毎にx座標、y座標を更新

13年9月15日日曜日

群衆アルゴリズム（Boids）

def update(self): if self.cx < 0 or self.cx > WIDTH: self.d_x = -1 * self.d_x if self.cy < 0 or self.cy > HEIGHT: self.d_y = -1 * self.d_y

壁に当たると反射するように変更

d_x = -1 * d_x

d_x = -1 * d_xd_y = -1 * d_y

13年9月15日日曜日

群衆アルゴリズム（Boids）Boid（ボイド）とは、1987年にCraig Raynoldsによって発表された理論です。 この理論は、３つのルールを規定するだけで鳥の群れをシミュレーションできるというものです。 ちなみにBoidという名の由来は、鳥もどきという意味の言葉birdoid（バードイド）が短くなりこのように呼ばれるようになりました。

http://members.jcom.home.ne.jp/ibot/boid.html

2. Cohesion（結合）

1. Separation（引き離し）

3. Alignment（整理）

近くの物体にぶつからない操作

群れに向かって移動する操作

群れと同じ方向、速度で移動する操作

13年9月15日日曜日

群衆アルゴリズム（Boids）Separation（引き離し）近くの物体にぶつからない操作

d1

d2

dx1

dx2

dy1

dy2

d < αの場合new_dx += dxnew_dy += dy

sum_s_x = 0 sum_s_y = 0 sum_s_t = 0 d_s_x = 0 d_s_y = 0 for member in group: d = dist(circle.cx - member.cx, circle.cy - member.cy) #separation if d < 10: d_x = circle.cx - member.cx d_y = circle.cy - member.cy d_x, d_y = normalize(d_x, d_y, 1.0) sum_s_x += d_x sum_s_y += d_y sum_s_t += 1 if sum_s_t: d_s_x = float(sum_s_x) / sum_s_t d_s_y = float(sum_s_y) / sum_s_t

13年9月15日日曜日

群衆アルゴリズム（Boids）

d1

d2

dx1

dx2

dy1

dy2

d > αの場合new_dx += dxnew_dy += dy

Cohesion（結合）群れに向かって移動する操作

Separation, Cohesionでもない場合new_dx += dxnew_dy += dy

簡易化して、上記とする本当は最も近い物体との差分を考慮する

Alignment（整理）群れと同じ方向、速度で移動する操作

13年9月15日日曜日

●とりあえず、オブジェクトを作成

●複数のオブジェクトをアニメーションで操作したい場合は、配列で！

●複数のオブジェクトの相互作用でランダムな動きを表現

群衆アルゴリズム（まとめ）

13年9月15日日曜日

More Info● 書籍

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

- Beyond Interaction[改訂第2版] -クリエイティブ・コーディングのためのopenFrameworks実践ガイド

- NodeBoxで始めるプログラミング入門

● Webサイト

- NodeBox チュートリアル

- http://nodebox.net/code/index.php/Tutorial

- Processing チュートリアル

- http://processing.org/tutorials/

- AbandonedArt.org（Processingによるサンプルが豊富に掲載）

- http://abandonedart.org/

13年9月15日日曜日

宣伝• Catchball 21では開発者を募集中です！

• Python, Djangoに興味がある方

• CMSに興味がある方

• 開発プロセス改善に興味がある方

• http://www.cb21.co.jp/recruit/recruit-

13年9月15日日曜日

ご静聴ありがとうございました！＆ご質問

13年9月15日日曜日