NodeBoxで始める
ジェネラティブ・アート
Shinichi Morimoto <shnmorimoto@gmail.com>
13年9月15日日曜日
お前、誰よ
• 森本 真一 (もりもと しんいち)
• @shnmorimoto
• 株式会社キャッチボール・トゥエンティワン
• 開発部
• Web サービス開発(Python + Django)
13年9月15日日曜日
今日話すこと
• ジェネラティブ・アート(デザイン)って?
• ヴジュアライゼーションツール紹介
• ジェネラティブ・アートの基本テクニック
• Noise処理
• 群衆アルゴリズム
「ジェネラティブ・アート Processingによる実践ガイ...
ジェネラティブ・アート(デザイン)
ジェネラティブアートは、アーティストが、自然言語の文法、コンピュータプ
ログラム、機会、その他の手続き的な創意を用いて、芸術作品に対して何らか
の自立性を働かせたり、その結果を生み出すようなシステム一式を用い...
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,...
NodeBox
• Experimental Media Research Group, Sint Lucas School of arts(ベルギー)で開発
• 複数バージョンが存在
• NodeBox 3
• 最新版
• マルチプラットフォ...
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...
NodeBox 基本(図形要素、色)
stroke
strokewidth
fill
・線の太さ
strokewidth(size)
・線の色
stroke(r, g, b, a)
※RGB指定の場合
・図形の塗りつぶし
fill(r, g, b ...
NodeBox 基本(Animation)
・setup()
初期化の処理を記載。初回時に一回
だけ実行
・draw()
毎フレーム毎に実行される。画面の
更新処理を記載
・speed(x)
フレームレートの指定
・mousedown, MOU...
●ジェネラティブ・アート
- 生成的手法で生成されること
- ランダム的な要素があること
生成時に同一のものが作成されない
●NodeBox
- NodeBox3はプログラミングレス
- 開発・実行環境があるので楽!
- 基本的な図形&アニメー...
Noise 処理
13年9月15日日曜日
Noise 処理(ランダムな線の描画)
まずは直線
終点をランダムに
size(500, 100)
stroke(0,0,0)
strokewidth(5)
line(20, 50, 480, 50)
size(500, 100)
stroke...
Noise 処理(ランダムな線の描画)
ステップ毎にYをランダムな値に
size(500, 100)
stroke(0,0,0)
strokewidth(5)
step = 10
lastx = -999
lasty = -999
y = 50...
Noise 処理(ランダムな線の描画)
ステップ毎にYへの増(減)分値をランダムな値に
size(500, 100)
stroke(0,0,0)
strokewidth(5)
xstep = 10
ystep = 10
lastx = 20
l...
Noise 処理(Perlin Noise)
パーリン・ノイズ
・疑似ランダムの一種
・Ken Perlinが考案
・CGをより自然に見せるためのテクスチャ作
成に使用される(雲や炎等)
特徴
・大きな値と小さな値が混じってる
・スケールが同じ...
Noise 処理(Perlin Noiseの追加)
http://nodebox.net/code/index.php/Noise
・NodeBoxのサイトからzip(noise.zip)ファイルをダウンロード
・展開後、フォルダを「~/Lib...
Noise 処理(Perlin Noise)
noise = ximport("noise")
size(500, 100)
stroke(0,0,0)
strokewidth(5)
step = 10
borderx = 20
lastx =...
Noise 処理(ランダムな円の描画)
from math import sin, cos, radians
size(500, 300)
fill(0,0,0)
radius = 100
centx = WIDTH/2
centy = HEIG...
Noise 処理(ランダムな円の描画)
from math import sin, cos, radians
size(500, 300)
stroke(0,0,0)
strokewidth(1)
radius = 10
centx = WID...
Noise 処理(ランダムな円の描画)
from math import sin, cos, radians
noise = ximport("noise")
size(500, 300)
stroke(0,0,0)
strokewidth(5...
Noise 処理(ランダムな円の描画)
中略
size(500, 300)
strokewidth(0.5)
stroke(0, 0, 0, 0.8)
centx = WIDTH/2
centy = HEIGHT/2
for i in rang...
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 = 100
centx = WIDTH...
Noise 処理(Wave Clock)
from math import radians, pi, sin, cos
size(500, 300)
colormode(HSB, range=255)
radius = 100
centx = ...
Noise 処理(Wave Clock)
中略
radiusnoise = random()
centx = WIDTH/2
centy = HEIGHT/2
col = 0
col_change = 1
for ang in range(0,...
Noise 処理(Wave Clock)
中略
ang = 0
angnoise = random()
for i in range(0, 180):
radiusnoise += 0.005
angnoise += 0.005
ang += ...
Noise 処理(Wave Clock)
完成版はアニメーションで!
13年9月15日日曜日
Noise 処理(まとめ)
● とりあえずノイズをかけてみよう
● 自然なノイズはPerlin Noiseで
●線の長さ、角度、色、etc...、色々と
ノイズをかけると面白い!
●色々な関数をノイズに使って、自分
だけのエフェクトを!
13年...
群衆アルゴリズム(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...
群衆アルゴリズム(Boids)
size(300, 200)
for i in range(100):
x = random(WIDTH)
y = random(HEIGHT)
r = random(10)
oval(x, y, r, r)
ま...
群衆アルゴリズム(Boids)
中略
class Circle:
def __init__(self, x, y, r):
self.x = x
self.y = y
self.cx = x + (r / 2.0)
self.cy = y + ...
群衆アルゴリズム(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...
群衆アルゴリズム(Boids)
speed(30)
def setup():
global circles
circles = []
for i in range(50):
x = random(WIDTH)
y = random(HEIGHT...
群衆アルゴリズム(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 > ...
群衆アルゴリズム(Boids)
Boid(ボイド)とは、1987年にCraig Raynoldsによって発表された理論で
す。 この理論は、3つのルールを規定するだけで鳥の群れをシミュレーション
できるというものです。 ちなみにBoidという名...
群衆アルゴリズム(Boids)
Separation(引き離し)
近くの物体にぶつからない操作
d1
d2
dx1
dx2
dy1
dy2
d < αの場合
new_dx += dx
new_dy += dy
sum_s_x = 0
sum_s...
群衆アルゴリズム(Boids)
d1
d2
dx1
dx2
dy1
dy2
d > αの場合
new_dx += dx
new_dy += dy
Cohesion(結合)
群れに向かって移動する操作
Separation, Cohesionでも...
●とりあえず、オブジェクトを作成
●複数のオブジェクトをアニメーショ
ンで操作したい場合は、配列で!
●複数のオブジェクトの相互作用で
ランダムな動きを表現
群衆アルゴリズム(まとめ)
13年9月15日日曜日
More Info
● 書籍
- ジェネラティブ・アート -Processingによる実践ガイド
- Beyond Interaction[改訂第2版] -クリエイティブ・コーディングのためのopenFrameworks実践ガイド
- Node...
宣伝
• Catchball 21では開発者を募集中です!
• Python, Djangoに興味がある方
• CMSに興味がある方
• 開発プロセス改善に興味がある方
• http://www.cb21.co.jp/recruit/recru...
ご静聴ありがとうございました!
&
ご質問
13年9月15日日曜日
Upcoming SlideShare
Loading in...5
×

Node boxで始めるジェネラティブ・アート#pyconapac

2,662

Published on

PyCon Apac 2013での発表資料です。
「Node boxで始めるジェネラティブ・アート」

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,662
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
14
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Transcript of "Node boxで始めるジェネラティブ・アート#pyconapac"

  1. 1. NodeBoxで始める ジェネラティブ・アート Shinichi Morimoto <shnmorimoto@gmail.com> 13年9月15日日曜日
  2. 2. お前、誰よ • 森本 真一 (もりもと しんいち) • @shnmorimoto • 株式会社キャッチボール・トゥエンティワン • 開発部 • Web サービス開発(Python + Django) 13年9月15日日曜日
  3. 3. 今日話すこと • ジェネラティブ・アート(デザイン)って? • ヴジュアライゼーションツール紹介 • ジェネラティブ・アートの基本テクニック • Noise処理 • 群衆アルゴリズム 「ジェネラティブ・アート Processingによる実践ガイド」 「Beyond Interaction」 13年9月15日日曜日
  4. 4. ジェネラティブ・アート(デザイン) ジェネラティブアートは、アーティストが、自然言語の文法、コンピュータプ ログラム、機会、その他の手続き的な創意を用いて、芸術作品に対して何らか の自立性を働かせたり、その結果を生み出すようなシステム一式を用いて行 う、芸術的な実践を意味している。 Philip Galanter,BA, MFA, 2003,What is Generative Art? Complexity Theory as a Context for Art Theory ● 美的なものを作るアルゴリズムの方法 ● アーティストと自律システム間のコラボレーション ● 完全に決定論的なプロセスから予想できない結果を引き出す行為 ● 秩序とカオスの間のスイートスポットの探求 ● コーディングに対する新鮮で面白いアプローチ ● 大きな可能性を秘めた成長するメディア マット・ピアソン, 「ジェネラティブ・アート Processingによる実践ガイド」, p60 13年9月15日日曜日
  5. 5. KBGD01E 0012、マリウス・ワッツ(2010) http://www.flickr.com/photos/watz/4536049736/sizes/z/in/photostream/ 13年9月15日日曜日
  6. 6. 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日日曜日
  7. 7. Mondrian Architecture(2009) http://zenbullets.com/blog/?p=204 13年9月15日日曜日
  8. 8. Broken Mirrors 1–4(2011) http://zenbullets.com/blog/?p=951 13年9月15日日曜日
  9. 9. ヴジュアライゼーションツール Processing プラットフォーム:マルチプラットフォーム 言語:Java openframeworks プラットフォーム:マルチプラットフォーム 言語:C++ CINDER プラットフォーム:Windows, Mac OS X 言語:C++ NodeBox プラットフォーム:マルチプラットフォーム※ 言語:Python 13年9月15日日曜日
  10. 10. 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日日曜日
  11. 11. NodeBox 1ダウンロード・インストール http://nodebox.net/ 13年9月15日日曜日
  12. 12. NodeBox 1ダウンロード・インストール Snow Leopard以前はこっち Lion 移行はこっち 13年9月15日日曜日
  13. 13. NodeBox 1ダウンロード・インストール クリックして実行 13年9月15日日曜日
  14. 14. NodeBox 1 実行環境 実行結果表示 コード記述 実行時メッセージ表示 13年9月15日日曜日
  15. 15. NodeBox 基本(座標系) (0, 0) (0, 3) (2, 0) (4, 4) ・左上が原点(0, 0) ・右方向(x座標)、下 方向(y座標)に向かっ て座標値が大きくなる 13年9月15日日曜日
  16. 16. 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日日曜日
  17. 17. NodeBox 基本(図形要素、色) stroke strokewidth fill ・線の太さ strokewidth(size) ・線の色 stroke(r, g, b, a) ※RGB指定の場合 ・図形の塗りつぶし fill(r, g, b , a) ※色の指定方法は、RGB, HSB, CMYK等が指定可能 13年9月15日日曜日
  18. 18. NodeBox 基本(Animation) ・setup() 初期化の処理を記載。初回時に一回 だけ実行 ・draw() 毎フレーム毎に実行される。画面の 更新処理を記載 ・speed(x) フレームレートの指定 ・mousedown, MOUSEX, MOUSEY マウスのクリック検出、マウスの位置 13年9月15日日曜日
  19. 19. ●ジェネラティブ・アート - 生成的手法で生成されること - ランダム的な要素があること 生成時に同一のものが作成されない ●NodeBox - NodeBox3はプログラミングレス - 開発・実行環境があるので楽! - 基本的な図形&アニメーション ジェネラティブ・アート&Nodebox (まとめ) 13年9月15日日曜日
  20. 20. Noise 処理 13年9月15日日曜日
  21. 21. 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日日曜日
  22. 22. Noise 処理(ランダムな線の描画) ステップ毎にYをランダムな値に size(500, 100) stroke(0,0,0) strokewidth(5) step = 10 lastx = -999 lasty = -999 y = 50 borderx = 20 bordery = 10 for 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日日曜日
  23. 23. Noise 処理(ランダムな線の描画) ステップ毎にYへの増(減)分値をランダムな値に size(500, 100) stroke(0,0,0) strokewidth(5) xstep = 10 ystep = 10 lastx = 20 lasty = 50 borderx = 20 y = 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日日曜日
  24. 24. Noise 処理(Perlin Noise) パーリン・ノイズ ・疑似ランダムの一種 ・Ken Perlinが考案 ・CGをより自然に見せるためのテクスチャ作 成に使用される(雲や炎等) 特徴 ・大きな値と小さな値が混じってる ・スケールが同じ ・連続的な値 13年9月15日日曜日
  25. 25. 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日日曜日
  26. 26. Noise 処理(Perlin Noise) noise = ximport("noise") size(500, 100) stroke(0,0,0) strokewidth(5) step = 10 borderx = 20 lastx = -999 lasty = -999 ynoise = 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日日曜日
  27. 27. Noise 処理(ランダムな円の描画) from math import sin, cos, radians size(500, 300) fill(0,0,0) radius = 100 centx = WIDTH/2 centy = 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日日曜日
  28. 28. Noise 処理(ランダムな円の描画) from math import sin, cos, radians size(500, 300) stroke(0,0,0) strokewidth(1) radius = 10 centx = WIDTH/2 centy = HEIGHT/2 lastx = -999 lasty = -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日日曜日
  29. 29. Noise 処理(ランダムな円の描画) from math import sin, cos, radians noise = ximport("noise") size(500, 300) stroke(0,0,0) strokewidth(5) radiusnoise = random() radius = 10 centx = WIDTH/2 centy = HEIGHT/2 lastx = -999 lasty = -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日日曜日
  30. 30. Noise 処理(ランダムな円の描画) 中略 size(500, 300) strokewidth(0.5) stroke(0, 0, 0, 0.8) centx = WIDTH/2 centy = 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日日曜日
  31. 31. Noise 処理(Wave Clock) matt pearson, Wave Clock (2009) http://abandonedart.org/?p=276 13年9月15日日曜日
  32. 32. Noise 処理(Wave Clock) from math import radians, pi, sin, cos size(500, 300) stroke(0, 0, 0, 0.8) radius = 100 centx = WIDTH/2 centy = 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日日曜日
  33. 33. Noise 処理(Wave Clock) from math import radians, pi, sin, cos size(500, 300) colormode(HSB, range=255) radius = 100 centx = WIDTH/2 centy = HEIGHT/2 col = 0 col_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日日曜日
  34. 34. Noise 処理(Wave Clock) 中略 radiusnoise = random() centx = WIDTH/2 centy = HEIGHT/2 col = 0 col_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日日曜日
  35. 35. Noise 処理(Wave Clock) 中略 ang = 0 angnoise = 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日日曜日
  36. 36. Noise 処理(Wave Clock) 完成版はアニメーションで! 13年9月15日日曜日
  37. 37. Noise 処理(まとめ) ● とりあえずノイズをかけてみよう ● 自然なノイズはPerlin Noiseで ●線の長さ、角度、色、etc...、色々と ノイズをかけると面白い! ●色々な関数をノイズに使って、自分 だけのエフェクトを! 13年9月15日日曜日
  38. 38. 群衆アルゴリズム(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日日曜日
  39. 39. 群衆アルゴリズム(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日日曜日
  40. 40. 群衆アルゴリズム(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() まずはランダムに円を描いてみる その2 管理しやすいようにCircle クラスを作成 (x, y) r1 r (cx,cy) 13年9月15日日曜日
  41. 41. 群衆アルゴリズム(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日日曜日
  42. 42. 群衆アルゴリズム(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日日曜日
  43. 43. 群衆アルゴリズム(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_x d_y = -1 * d_y 13年9月15日日曜日
  44. 44. 群衆アルゴリズム(Boids) Boid(ボイド)とは、1987年にCraig Raynoldsによって発表された理論で す。 この理論は、3つのルールを規定するだけで鳥の群れをシミュレーション できるというものです。 ちなみにBoidという名の由来は、鳥もどきという意味 の言葉birdoid(バードイド)が短くなりこのように呼ばれるようになりまし た。 http://members.jcom.home.ne.jp/ibot/boid.html 2. Cohesion(結合) 1. Separation(引き離し) 3.Alignment(整理) 近くの物体にぶつからない操作 群れに向かって移動する操作 群れと同じ方向、速度で移動する操作 13年9月15日日曜日
  45. 45. 群衆アルゴリズム(Boids) Separation(引き離し) 近くの物体にぶつからない操作 d1 d2 dx1 dx2 dy1 dy2 d < αの場合 new_dx += dx new_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日日曜日
  46. 46. 群衆アルゴリズム(Boids) d1 d2 dx1 dx2 dy1 dy2 d > αの場合 new_dx += dx new_dy += dy Cohesion(結合) 群れに向かって移動する操作 Separation, Cohesionでもない場合 new_dx += dx new_dy += dy 簡易化して、上記とする 本当は最も近い物体との差分を考慮する Alignment(整理) 群れと同じ方向、速度で移動する操作 13年9月15日日曜日
  47. 47. ●とりあえず、オブジェクトを作成 ●複数のオブジェクトをアニメーショ ンで操作したい場合は、配列で! ●複数のオブジェクトの相互作用で ランダムな動きを表現 群衆アルゴリズム(まとめ) 13年9月15日日曜日
  48. 48. 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日日曜日
  49. 49. 宣伝 • Catchball 21では開発者を募集中です! • Python, Djangoに興味がある方 • CMSに興味がある方 • 開発プロセス改善に興味がある方 • http://www.cb21.co.jp/recruit/recruit- 13年9月15日日曜日
  50. 50. ご静聴ありがとうございました! & ご質問 13年9月15日日曜日
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×