19 コピー

Transcription

1 fladdict.net fladdict.net Sample URL Archive wormpainting.zip ActionScript 2.0 Flash Player 8 Flash

2 発案 デザインコードで絵画を作る 向に 好き勝手な色で動き回ります そして 最終的には 1 枚の美しいパターンができあがる そんなことをイメージしながらコードを組みました " 基本のロジック ( 第 1 のコード ) は プログラムによって制御されたパターンジェネレータです 無数のパーティクル( 粒子 ) が 画面内を縦横無尽に動きながら 有機的な模様を描くプログラムです これは もともと Processing というソフトウェアを用いて作ったものでした それを Flash 8 が発表されたおりに 8 の新機能であるビットマップ操作まわりの勉強として Flash へと移植しました Processing による ちょうどこれを作成した頃 僕はlevitated.net( の Jared Tarbellに大きく影響を受けて コードで絵画を作ることに夢中になっていた時期でした 僕自身 デザインを志してはいたものの もともと感性よりもロジックを重んじるタイプであったため 自分の手でビジュアルを作ることに苦手意識を持っていました コードによって絵を描くという考え方は 自分の考えた法則や世界観がそのまま絵となるため 僕にとってはまさにうってつけの手法でした パーティクルが有機的な模様を描いていく 今回のコードは 大きく 2 つのパートに分かれます 1 つはプログラム全体を制御し 更新や描画を定期的に行うコード これは fla ファイルの 1 フレーム目に記述しています もう 1 つは ステージ上を動き回る粒子 ( パーティクル ) を表現したクラスです こちらは 個々のインスタンスが位置や速度 方向などの情報を持ち ステージ上のスクリプトから呼び出されて 毎フレームその状態を更新していきます まず 移動する点を表現するクラスとして 次のようなコードを外部ファイル Particle.as に定義します 外部ファイル Particle.as // 外部ファイル Particle.as class Particle{ var x:number; //X 座標 var y:number; //Y 座標 var ox:number; // 1 フレーム前の X 座標 var oy:number; // 1 フレーム前の Y 座標 var v:number; // 移動速度 var r:number; // 進行方向の角度 public function Particle(x, y, r){ this.x = x; this.y = y; this.ox = x; this.oy = y; this.r = r; this.v = Math.random()+1; // ここが毎フレーム実行される public function update(){ saveposition(); // 座標を保存 updateposition(); // 座標の更新 constraintposition(); // 画面外対策の処理 " サンプルのコンセプト 最終的な名前は Worm( 長虫 )Painting としましたが このコードのモチーフは植物の蔦でした ちょうど植物の枝のように 個々の要素が好き勝手に動きながら全体としてまとまっている そんな雰囲気の模様を生み出そうと思いました スタート地点こそ一緒なものの 放出された瞬間から個々の点 ( パーティクル ) はそれぞれが好き勝手な方 // 位置の更新 x += vx; y += vy; // 前フレームの位置を保存 public function saveposition(){

3 ox = x; oy = y; // 位置を画面内に収める public function constraintposition(){ x = (x<0)? Stage.width : (x>stage.width)? 0 : x; y = (y<0)? Stage.height : (y>stage.height)? 0 : y; // 粒子の描画 function render(prt){ screen.setpixel( prt.x, prt.y, 0x000000); fla ファイルと as ファイルを同じフォルダに入れて実行をすると ランダムな位置から点が放射状に現れ 画面を横断します 画面外に出た点は画面の反対側から出てきます これが一番最初に行った実験で Worm Painting の 放出された粒子が絵を描く というコンセプト部分を純粋に記述したものです また ステージの 1 フレーム目に 以下のようなコードを記述しました クラス Particle の実行結果 ( 左 : 開始時 右 : 一定時間経過後 ) 1 フレーム目のコード var screen:bitmapdata; // 表示用ビットマップ var particlenum = 15; // パーティクルの数 var particles:array; // パーティクルを格納する配列 var particleclass = Particle; // パーティクルとなるクラス var renderfunc = render; // レンダリングに使われる関数 var startx = Math.random()*Stage.width; // スタート X 座標 var starty = Math.random()*Stage.height; // スタート Y 座標 init(); // 初期化 start(); // 開始 // 一番最初だけ初期化 function init(){ particles = new Array(); for(var i=0; i<particlenum; i++){ var r = Math.random()*360; var prt = new particleclass (startx, starty, r); particles.push(prt); コード 1 の説明まずはこの最小コード ( コード 1) の説明をしましょう 大きく2つのパートに分かれます 1 つは Particle クラス このクラスは各粒子の位置や速度といった情報を持ち またその情報をアップデート ( 移動 ) する部分を担当します 一方のフレーム 1 の処理は 粒子の作成 粒子の更新の呼び出し 描画という プログラム全体の流れを担当します まずは 基盤となるステージのコードを見ていきましょう フレーム 1 のスクリプトフレームスクリプトの処理の流れ // 開始 function start(){ screen = new BitmapData(Stage.width, Stage.height); _root.attachbitmap(screen, 1); // 画面に配置 // ビットマップ作成 フレームスクリプトの処理は 初期化 (init) 開始処理 (start) 毎フレームの処理 (update) 以後ループ init onenterframe = update; //onenterframe を定義 となっています start // これが毎フレーム実行される function update(){ for(var i=0; i<particlenum; i++){ var prt = particles[i]; prt.update(); // 粒子の移動 renderfunc (prt); // 粒子の描画 関数 init() では 初期化として 15 個の粒子が Particle クラスから作成され配列に格納されます 粒子には初期値としてスタートの x 座標 y 座標 そして進行方向の角度がランダムで与えられます これによって粒子は四方八方に放出されるわけです onenterframe

4 paticleclass の呼び出し var prt = new particleclass (startx, starty, r); new で作成するときに Particle クラスを使用するはずなのに paticleclass というものを呼び出しています Easy Impressionist のサンプルを思い出してください これはコードの先頭で Particle クラスを一度 変数 particleclass に格納しているからです 変数 particleclass に Particle クラスを格納 var particleclass = Particle; 関数 Particle() の処理は大きく 2 つに分かれます 初期化 と 位置の更新 です まず 初期化の処理は Particle インスタンスが new によって生成されるタイミングで行われます ここは 単に使用する変数の初期値を決定してあげるだけです もう 1 つの処理である 更新 (update) は 前ページの図のように 厳密には 現在位置の保存 (saveposition) 移動 (updateposition) 位置補正(constraintPosition) の 3 つのプロセスに分かれています 関数 saveposition 単純に現在の粒子の座標を保存するだけです 過去の座標を保存しておくのはいろいろと便利で たとえば過去の位置と現在の位置から 進行方向の角度 などが計算できます 関数 init() 内に直接 Particleクラスの名前を書き込まないことにより 文頭のparticleClassに代入するクラスを入れ替えるだけで 粒子として作成するクラスを入れ替えることができるわけです 次に呼び出される関数 start() の中では 2 つの処理が行われています 1 つはビットマップ screen を作成しステージにアタッチすること もう 1 つは onenterframe に関数 update() を定義して 毎フレーム関数 update() が実行されるようにしていることです フレームごとに onenterframeとして実行される関数 update() が何を行っているのかというと for ループで配列 particlesに格納したすべての粒子の位置をparticleインスタンス.updateで更新し 関数 render() で粒子の描画を行っているわけです 関数 render() もここでは直接呼び出さずに 文頭で変数 renderfunc に一度代入を行い 後で取り替えられるようにしています 描画部分となる関数 render() では 粒子の X 座標と Y 座標を取得し ビットマップ画像の対応する座標に黒い点を描いています ここまでが この の処理の骨格となります Easy Impressionist のサンプルと同様に Worm Painting でも 粒子の動きを制御するクラス Particle と描画を行う関数 render() をいろいろと差し替えて実験を行っていきます クラス Particle のスクリプトさて 次にクラス Particle の処理の流れを見てみましょう 関数 updateposition 更新のメインであり 粒子の移動を行います 具体的には粒子の速度 v と進行方向 r から X 方向の移動量 vx と Y 方向の移動量 vy を計算し 粒子の X Y 座標を更新しています ここでは 以下のような三角関数と呼ばれる式を用いて 速度 (v) と 進行方向(r) から X 方向の移動量 (vx) と Y 方向の移動量 (vy) を求めています 三角関数を使えば 角度と距離から XY 方向の長さを求めることができる 三角関数を一から説明するにはページがちょっと足りませんので ここでは上の式を使うとそういうことが できる というような丸暗記でもよいと思います 実際 この式は丸暗記するだけでも さまざまな局面で使用できます 関数 constraintposition 最後のこの関数の処理はうってかわって単純です ここでは 移動後の X Y 座標をチェックし それがステージの表示領域内かどうかをチェックし 画面外の場合は反対側に移動させています ステージの領域外に出た場合 反対側に移動する Particle の処理の流れ update SavePosition if(x<0){ x = Stage.width; else if(x>stage.width){ x=0; これで基本の骨格ができました あとは このコードを拡張して実験を行っていきます updateposition constraintposition

5 スクリプト実験 フィニッシュ たった数行書き換えるだけで 描画は驚くほどに変化をしました ただ ランダムに方向を変更してしまうと ちょっと画面がグチャグチャになってしまうようです " 第 3 のコード " 第 2 のコード 先ほどは粒子が単に直進するだけだったので 今度はランダムな動きを加えてみます 以下は クラス Particleを拡張した Particle2 のコードです 移動を行う関数 updateposition() を拡張し ランダムな方向に移動するようにしました //Particle2.as class Particle2 extends Particle{ function Particle2(x, y, r){ Particle2 のコード r = Math.random()*360 // 回転をランダムに変更 x += vx; y += vy; もう1つParticle を改良し ある程度直進してから方向転換 というアプローチを実験してみることにしました 毎回乱数を生成し 乱数が 0.05 以下の値をとる場合だけ角度を変更します 0 1 の値をとるときに 0.05 ですから ちょうど 5% の確率ですね 20 フレームに 1 回ぐらいの割合で方向転換するわけです //Particle3.as class Particle3 extends Particle{ function Particle3(x, y, r){ Particle3 のコード if( Math.random()<0.05){ r = Math.random()*360; x += vx; y += vy; 新しいクラスを作成したら ファイルを fla ファイルや Particle.as と同じフォルダに配置し ステージの 1 フレームのスクリプトの先頭行を書き換え 使用するクラスを切り替えます Particle3 による描画 ( 左 : 開始時 右 : 一定時間経過後 ) 使用するクラスを切り替える var particleclass = Particle2 Particle2 による描画 ( 左 : 開始時 右 : 一定時間経過後 ) まだまだ植物的とはいえませんが だんだんとそれっぽい自然な広がりになってきましたね これはこれで 将来何かのときに使えそうです

6 " 第 4 のコード さて 先ほどの Particle3 はきれいな広がりを持つものの なんとなく動きが人工的でした そこで これからは よりゆるやかな柔らかい動きを模索していくことにします Particle を再び拡張し 新しく Particle4.as を作成してみました //Particle4.as class Particle4 extends Particle{ function Particle4(x, y, r){ Particle4 のコード r = r+(math.random()*10-5); x += vx; y += vy; Particle3でカクカクと曲がってしまう最大の原因は 方向転換の進路をランダムに 360 度から選択していたためでした 今回は その部分を現在の角度 ± 5 度でランダムに変更する というように変更しました すると なかなか自然な揺らぎが生まれてきました Particle4 による描画 ( 左 : 開始時 右 : 一定時間経過後 ) 現在の回転方向を一定時間維持する 方向転換をするときは 急カーブではなくゆるやかに変更する という 2 つが必要となりそうです そのようなことを考えて Particle クラスを拡張して Particle5 を作成しました //Particle5.as class Particle5 extends Particle{ var rv:number; // 角速度 var rvdeccel:number; // 角減速係数 var rarange:number; // 回転レンジ Particle5 のコード function Particle5(x, y, r){ rv = 0; rarange = 4; rvdeccel = 0.98; rv = rv*rvdeccel + (Math.random()*raRange*2-raRange); r +=rv; x += vx; y += vy; ただし 方向転換のレンジが狭いうえにランダムで決定されるため 小刻みな蛇行となってしまっています 方向転換の角度を小さくすることで自然さは出ますが 一方 まるっきりランダムな進路変更はどうやら自然とはいえないようです " 第 5 のコード 自然な蛇行をするには 急な方向転換をなくし少しずつ回転させることが必要なのはわかりました しかし それだけではただの蛇行です 蔓植物のようなクルクルとした動きを出すには どうやら 今回のクラスは新しい概念がいろいろと出てくるため ちょっと詳しく説明します このクラスの目的は 今までの角度の急変換を止め ゆるやかな回転を作り出すことです そこで 今回から新しく角度に回転速度を設けることにしました 回転速度というとむずかしそうですが 実際にはそれほど難しいものではありません 今までのコードでは 角度は乱数などによって直接 急激に変更されていました 今回は イメージとしては車のハンドルを回転させるように 時間をかけて少しずつ同じ方向に回転する感じです 車のハンドルのように少しずつ同じ方向に回転 今までは急に角度を変えていた ハンドルを回すように少しずつ回転させる 具体的には 角度を回転させるための速度を定義し ( たとえば 右毎フレーム 1 度 など ) それにしたが って方向転換を行います また 逆方向に回転する場合には 回転速度を徐々に落として一度 0 にし それから逆方向へと回転するわけです

7 今回から新たに 3 つの変数が加わりました Particle5 による描画 ( 左 : 開始時 右 : 一定時間経過後 ) 追加した変数 変数概要値 rv rvdeccel rarange 回転する速度 回転速度を減少させる係数 1 フレームで回転速度を変化させる幅 number number number それぞれ 回転する速度 (rv) 回転速度を減少させる係数(rvDeccel) 1 フレームで回転速度を変化させる幅 (rarange) の 3 つです これらを用いて進行する角度 r を変更するわけです この 3 つの値は new による作成時にそれぞれ適宜 初期値が設定されます 実際にどう使用されるかは 移動を更新する関数 updateposition() の初めの 2 行を見てみましょう 3 つの変数で角度 r を変更する rv = rv*rvdeccel + (Math.random()*raRange*2-raRange); r +=rv; これは 以下のような意味を持っています 回転速度 =( 回転速度 * 減衰係数 )± 回転範囲角度 = 角度 + 回転速度 " 色と形を付ける これで動きをつかさどる Particle クラスはほぼ完成です ここからは この動きを生かした描画方法を模索してみます 描画をつかさどる関数 render() を他のさまざまな描画に置き換えて実験をしてみます ドットを配置してみる 1 フレーム目先頭のレンダリング用の関数をスイッチして 以下のような新しい関数 render1() を作成します レンダリング用の関数を切り替える var renderfunc = render1 まず 速度は毎フレーム rvdeccel( 値は 0.98) をかけることで 0 へと近づいていきます これは 回転速度がつきすぎないようにするためのブレーキのような役割を持っています 次に Math.random() * rarange * 2 によって 0 rarange * 2 の乱数が作られ そこから rarange が引かれるので 最終的に rarange + rarange までの連数が回転速度に追加されます これによって ハンドルを切る速度がランダムに変更されるわけです このように求められた回転速度は 進行方向の角度に加えられます 今まではランダムに 進行方向 が変化していましたが 今回はランダムに 進行方向 を決めるための ハンドルを回転させる速度 を変化させているわけです これを実行してみると かなり自然な動きで伸びる線が生まれました パラメータを入れ替えていけば 望む動きが生み出せそうです render1() のコード // 円を用いた描画 円のサイズは回転速度 function render1(prt){ var mat = new Matrix(); mat.translate(-50,0); mat.scale(1*prt.rv*0.02, 1*prt.rv*0.02); mat.translate(prt.x, prt.y); screen.draw( element1, mat); render 1() と Particle5 による描画 この関数は MC をスタンプのように利用して描画するので ステージ上に "element1" と名付けた 大きさ 16 ピクセルの円系の MC をステージの画面外に配置します 使用する粒子のクラスは先ほどの Particle5.as です

8 前述のように この render1() では 画面外に置いた MC をスタンプのように使ってビットマップ screen に対して画像を描き込んでいます このとき MC のサイズを粒子の回転速度と連動させています このため 急カーブで曲がるときほど円が大きくなり 直線で進むほど円が小さく配置されます 結果的に 墨汁を垂らしながら描いたような おもしろい表現になりました 度 ( ラジアン ) を計算する関数です 関数の引数は Math.atan2(dy,dx) というように 第 1 引数が y となることに注意してください フレームごとの進行方向に直線を描く仕組み 直線で描画してみる (1) ステージ上に長さ 100 ピクセルの直線の MC を描いて "element2" と命名し 以下のコードで描画してみます render2() のコード function render2(prt){ var dx = prt.x - prt.ox; var dy = prt.y - prt.oy; var rad = Math.atan2(dy, dx); そのフレームごとの進行方向に直線を描く atan2 を用いることで dx,dy から角度を求められる var mat = new Matrix(); mat.rotate(rad); mat.scale(0.1, 0.1); mat.translate(prt.x, prt.y); screen.draw( element2, mat); 直線で描画してみる (2) render3() は 次の一行を除けば さきほどのコードとまったく同じです 直線の設置角度に 1/2 π(90 度 Math.PI/2) を加えることで直線を進行方向に対し垂直な方向に描画しています この例では 前フレームの位置と現在の位置をもとにして進行方向を計算し 進行方向にそって直線を配置しています プランクトンの鞭毛のようなおもしろい表現ができました render3() の変更部分 var rad = Math.atan2(dy, dx) + Math.PI / 2; render2() と Particle5 による描画 render3() と Particle5 による描画 直線にうねりを付ける 進行方向の計算には Math.atan2() という関数を用います atan2() は X 方向の距離と Y 方向の距離から角 render3() は何となく結果が平坦でつまらないため クラス Particle5 を拡張して動きにメリハリを付けてみようと思います

9 Particle6 のコード render4() と Particle6 による描画 //Particle6.as class Particle6 extends Particle5{ var osc:number; var oscv:number; function Particle6(x, y, r){ osc = 0; oscv = 0.02; super.updateposition(); osc += oscv; if (osc > Math.PI * 2) osc -= Math.PI*2; " フィニッシュアップ 変数 osc には毎フレーム oscv が加算され 0 π(0 度 360 度 ) の値をとるような処理を追加しました この値自体は粒子の動きには一切影響を与えませんが これから作成する render4() でこの値を使用することとなります function render4(prt){ var dx = prt.x - prt.ox; var dy = prt.y - prt.oy; var rad = Math.atan2(dy, dx) + Math.PI / 2; render4() のコード var scale = Math.sin(prt.osc)*0.07; var mat = new Matrix(); mat.rotate(rad); mat.scale(scale, scale); mat.translate(prt.x, prt.y); screen.draw( element3, mat); また これで使用する新しいエレメントとして 直線の代わりに長方形を用いた "element3" をステージ上に作成します 関数 render4() は render3() をベースにしながら長方形の拡大率を先ほどの粒子の変数 osc をベースに変化させています 0 2 πの間で変化する osc を利用して三角関数で波を作り それを長方形の拡大率としているわけです これにより 各粒子が描く長方形の長さが時間に沿って伸びたり縮んだりするわけです さて これで最初に想定していたような植物の蔦のような表現ができてきました あとは色を付けるだけです コードのテーマは粒子の動きがメインだったので 色についてはあまり深入りしていません ここでは僕がよく使う数式を用いています Particle6 を拡張した Particle7 では 各粒子に RGB の値を持たせて色を定義しています 変数 colr colg colb はそれぞれ の RGB 値を格納した変数です //Particle7.as class Particle7 extends Particle6{ var colr:number; var colg:number; var colb:number; function Particle7(x, y, r){ rarange = 2; Particle7 のコード colr = Math.floor(Math.random()*255); colg = Math.floor(Math.random()*(colR*0.5) + colr*0.5); colb = Math.floor(Math.random()*(colG*0.5) + colg*0.5); クラス Particle7 では まず赤 (colr) をランダムに で設定します 次に ちょっと複雑ですが緑を 0 赤の値の半分 + 赤の値の半分 とします つまり 緑は赤の % の値になります そして 同様に青は 緑の % という値をとります このような式を使うことで それぞれの粒子は色が異なるものの赤みが強く青みがない色というふうに統一されます このようにして プログラムによって色のコンポジションを決めるわけです 218 2

10 これに合わせて 最後に使っていた色を対応させます ビットマップ画像に draw を行うときに 第 3 引数で色をわたします 実際に使用する色は新しい関数 getcolor() の中で計算します function render4(prt){ var dx = prt.x - prt.ox; var dy = prt.y - prt.oy; var rad = Math.atan2(dy, dx) + Math.PI / 2; 関数 getcolor() で色を計算する var mat = new Matrix(); mat.rotate(rad); mat.scale(scale, scale); mat.translate(prt.x, prt.y); var colt = getcolor(prt); screen.draw( element3, mat, colt); 以上が のコア部分の製作プロセスです 実際に自分のサイトで公開しているバージョンは リサイズで画面の描画をリセットしたり マウスで開始点を変更したり 色のアルゴリズムを工夫したりと細かいカスタマイズをいろいろと行っていますが 基本的には 同じロジックがベースとなっています このような模索にはこれが正解といったものがないので たとえば 次の図のような render2() と Particle7 の組み合わせといったように さまざまなバリエーションが考えられます みなさん独自に工夫を重ねてみてください render2 に色を付けるようにしたもの function getcolor(prt){ var r = prt.colr + Math.cos( prt.osc*4)*40; var g = prt.colg + Math.cos( prt.osc*4)*40; var b = prt.colb + Math.cos( prt.osc*4)*40; return new ColorTransform(0,0,0,1, r, g, b,0); 関数 getcolor() は パーティクルの colr colg colb を取得しています しかし これはそのまま使用はしません 線幅が波に従って変化するのに合わせて 色も変化させるようにしたいからです そこで 線幅のときと同様に var g = prt.colg + Math.cos( prt.osc * 4) * 40 といった具合に 三角関数を用いて色を ± 40 の幅で変化させています これによって 使用される色に適度な揺らぎが生まれ 美しいグラデーションができます 色やルーチンのバリエーション 色を三角関数で揺らがせることによって波を作る