Empfohlen
Weitere ähnliche Inhalte
Andere mochten auch
Andere mochten auch (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (9)
Node boxで始めるジェネラティブ・アート#pyconapac
- 2. お前、誰よ • 森本 真一 （もりもと しんいち） • @shnmorimoto • 株式会社キャッチボール・トゥエンティワン • 開発部 • Web サービス開発（Python + Django） 13年9月15日日曜日
- 3. 今日話すこと • ジェネラティブ・アート（デザイン）って？ • ヴジュアライゼーションツール紹介 • ジェネラティブ・アートの基本テクニック • Noise処理 • 群衆アルゴリズム 「ジェネラティブ・アート Processingによる実践ガイド」 「Beyond Interaction」 13年9月15日日曜日
- 4. ジェネラティブ・アート（デザイン） ジェネラティブアートは、アーティストが、自然言語の文法、コンピュータプ ログラム、機会、その他の手続き的な創意を用いて、芸術作品に対して何らか の自立性を働かせたり、その結果を生み出すようなシステム一式を用いて行 う、芸術的な実践を意味している。 Philip Galanter,BA, MFA, 2003,What is Generative Art? Complexity Theory as a Context for Art Theory ● 美的なものを作るアルゴリズムの方法 ● アーティストと自律システム間のコラボレーション ● 完全に決定論的なプロセスから予想できない結果を引き出す行為 ● 秩序とカオスの間のスイートスポットの探求 ● コーディングに対する新鮮で面白いアプローチ ● 大きな可能性を秘めた成長するメディア マット・ピアソン, 「ジェネラティブ・アート Processingによる実践ガイド」, p60 13年9月15日日曜日
- 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日日曜日
- 9. ヴジュアライゼーションツール Processing プラットフォーム：マルチプラットフォーム 言語：Java openframeworks プラットフォーム：マルチプラットフォーム 言語：C++ CINDER プラットフォーム：Windows, Mac OS X 言語：C++ NodeBox プラットフォーム：マルチプラットフォーム※ 言語：Python 13年9月15日日曜日
- 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日日曜日
- 12. NodeBox 1ダウンロード・インストール Snow Leopard以前はこっち Lion 移行はこっち 13年9月15日日曜日
- 15. NodeBox 基本（座標系） (0, 0) (0, 3) (2, 0) (4, 4) ・左上が原点（0, 0） ・右方向（x座標）、下 方向（y座標）に向かっ て座標値が大きくなる 13年9月15日日曜日
- 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. NodeBox 基本（図形要素、色） stroke strokewidth fill ・線の太さ strokewidth(size) ・線の色 stroke(r, g, b, a) ※RGB指定の場合 ・図形の塗りつぶし fill(r, g, b , a) ※色の指定方法は、RGB, HSB, CMYK等が指定可能 13年9月15日日曜日
- 18. NodeBox 基本（Animation） ・setup() 初期化の処理を記載。初回時に一回 だけ実行 ・draw() 毎フレーム毎に実行される。画面の 更新処理を記載 ・speed(x) フレームレートの指定 ・mousedown, MOUSEX, MOUSEY マウスのクリック検出、マウスの位置 13年9月15日日曜日
- 19. ●ジェネラティブ・アート - 生成的手法で生成されること - ランダム的な要素があること 生成時に同一のものが作成されない ●NodeBox - NodeBox3はプログラミングレス - 開発・実行環境があるので楽！ - 基本的な図形&アニメーション ジェネラティブ・アート&Nodebox (まとめ） 13年9月15日日曜日
- 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. 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. 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. Noise 処理（Perlin Noise） パーリン・ノイズ ・疑似ランダムの一種 ・Ken Perlinが考案 ・CGをより自然に見せるためのテクスチャ作 成に使用される（雲や炎等） 特徴 ・大きな値と小さな値が混じってる ・スケールが同じ ・連続的な値 13年9月15日日曜日
- 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. 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. 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. 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. 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. 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. Noise 処理（Wave Clock） matt pearson, Wave Clock (2009) http://abandonedart.org/?p=276 13年9月15日日曜日
- 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. 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. 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. 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日日曜日
- 37. Noise 処理（まとめ） ● とりあえずノイズをかけてみよう ● 自然なノイズはPerlin Noiseで ●線の長さ、角度、色、etc...、色々と ノイズをかけると面白い！ ●色々な関数をノイズに使って、自分 だけのエフェクトを！ 13年9月15日日曜日
- 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. 群衆アルゴリズム（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日日曜日
- 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. 群衆アルゴリズム（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. 群衆アルゴリズム（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. 群衆アルゴリズム（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日日曜日
- 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. 群衆アルゴリズム（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日日曜日
- 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. 宣伝 • Catchball 21では開発者を募集中です！ • Python, Djangoに興味がある方 • CMSに興味がある方 • 開発プロセス改善に興味がある方 • http://www.cb21.co.jp/recruit/recruit- 13年9月15日日曜日