2009

08-13

Flash版 Processing なライブラリ Frocessing を使ってみる

かっこいいアートっぽい描画ができるプログラム環境Processingを、それっぽくFlashのAS3で使えるようにしたライブラリが、Frocessingです。
gihyo.jpの記事（特集：FrocessingではじめるActionScriptドローイング｜gihyo.jp … 技術評論社）のサンプルコードを改造しつつ、試しにいろいろ作ってみました。（ライブラリは ver 0.5.7 を使用してます）

サンプル1

白いくねくねした草がランダムに発生してのびていきます。画面クリックで描画をリセットします。


Flash Study 白い草

PLAIN TEXT
Actionscript:
  1. package 
  2. {
  3.     import flash.geom.Point;
  4.     import frocessing.display.*;
  5.    
  6.     /**
  7.      * Frocessingのサンプル1
  8.      * くねくね線とランダムな円
  9.      * マウスクリックでリセット
  10.      */
  11.     public class FrocessingSample01 extends F5MovieClip2DBmp
  12.     {
  13.         //描画サイズ
  14.         private var m_stage_width:Number  = 500;
  15.         private var m_stage_height:Number = 500;
  16.        
  17.         //図形描画の座標
  18.         private var m_points/*Point*/:Array;  //座標を入れる
  19.        
  20.         private var m_point_current_index:int = 0;  //何番目の座標まで描画するか
  21.            
  22.         public function FrocessingSample01(){
  23.             super();
  24.         }
  25.        
  26.         //初期化 Stage が呼び込まれたときに自動的に呼ばれる
  27.         public function setup():void {
  28.            
  29.             //描画範囲指定
  30.             size( m_stage_width, m_stage_height );
  31.            
  32.             //背景色指定（引数の数によって色の指定方法が変わる）
  33.             background(0, 1);  // color, alpha
  34.            
  35.             //座標セット
  36.             setPoints();
  37.         }
  38.        
  39.        
  40.         //図形描画の座標をセット
  41.         private function setPoints():void {
  42.            
  43.             m_points = new Array();
  44.    
  45.             var len:int = m_stage_width - random(m_stage_height / 2);
  46.             var point_num:int = len / 10;
  47.            
  48.             var step:int = len / point_num + random(5, 1);
  49.             var start_x:Number = Math.random() * m_stage_width; //ｙ軸スタート位置はランダム
  50.            
  51.             var yure:Number = random(6, 2);  //くねくねサイズ
  52.            
  53.             var pt:Point;
  54.            
  55.             for (var i:int = 0; i <point_num ; i++) {
  56.                 pt = new Point(start_x + random(yure, -yure), -step * i );
  57.                 m_points.push(pt);
  58.             }
  59.            
  60.             //始点と終点は同じ値を2つ入れる（始点と終点はコントロールポイントになってるっぽいので）
  61.             pt = m_points[0].clone();
  62.             m_points.unshift(pt);
  63.            
  64.             pt = m_points[m_points.length - 1].clone();
  65.             m_points.push(pt);
  66.         }
  67.        
  68.        
  69.         //描画（フレーム毎に繰り返し）
  70.         public function draw():void {
  71.            
  72.             //マウスが押された場合
  73.             if ( isMousePressed ) {
  74.                 //背景を塗りなおす（描画のリセット）
  75.                 background(0, 1);
  76.             }
  77.            
  78.             //原点の移動
  79.             translate( 0, m_stage_height);
  80.            
  81.             //-----くねくね線-----
  82.            
  83.             //塗りをなしに
  84.             noFill();
  85.            
  86.             //線色の指定（引数の数によって色の指定方法が変わる）
  87.             stroke(255, 255, 255, 0.5);  //R, G, B, alpha
  88.            
  89.             //線幅指定
  90.             strokeWeight(0.1);
  91.            
  92.             var pt:Point;
  93.            
  94.             //頂点を複数持つ図形の描画
  95.             beginShape();
  96.             for (var i:int = 0; i <m_point_current_index ; i++) {
  97.                 pt = m_points[i];
  98.                 curveVertex(pt.x, pt.y);
  99.             }
  100.             endShape();
  101.            
  102.            
  103.             //-----ランダムな円-----
  104.            
  105.             //線をなしに
  106.             //noStroke();
  107.            
  108.             strokeWeight(1);
  109.            
  110.             //塗り設定
  111.             fill(255, 255, 255, 0.5);
  112.            
  113.             if(m_point_current_index> 0){
  114.                 pt = m_points[m_point_current_index - 1];
  115.             }
  116.             else {
  117.                 pt = m_points[0];
  118.             }
  119.             //円の描画
  120.             var maru_size:Number = random(15, 1);
  121.             ellipse(pt.x + random(15, -15), pt.y + random(10, -10), maru_size, maru_size);
  122.            
  123.             //描画する座標進める
  124.             m_point_current_index++;
  125.            
  126.             //最後の座標まで行ったら座標再設定
  127.             if (m_point_current_index> m_points.length) {
  128.                 m_point_current_index = 0;
  129.                 setPoints();
  130.             }
  131.         }
  132.     }
  133. }

サンプル2

画面クリック位置に種をおいて、カラフルなくねくねした草が伸びていきます。右上の□四角をクリックすると、描画をリセットします。


Flash Study 色の種草

PLAIN TEXT
Actionscript:
  1. package 
  2. {
  3.     import flash.geom.Point;
  4.     import frocessing.display.*;
  5.    
  6.     /**
  7.      * Frocessingのサンプル2
  8.      * くねくね線と直線の枝と枝先にランダムな円
  9.      * マウスクリック位置で生える
  10.      * 背景は透過にしてみた
  11.      */
  12.     public class FrocessingSample02 extends F5MovieClip2DBmp
  13.     {
  14.         //描画サイズ
  15.         private var m_stage_width:Number  = 500;
  16.         private var m_stage_height:Number = 500;
  17.        
  18.         //図形描画の座標
  19.         private var m_points/*Point*/:Array;  //座標を入れる
  20.        
  21.         private var m_point_current_index:int = 0;  //何番目の座標まで描画するか
  22.        
  23.         //線と塗りの色
  24.         private var m_color:uint;
  25.            
  26.         public function FrocessingSample02(){
  27.             super();
  28.         }
  29.        
  30.         //初期化 Stage が呼び込まれたときに自動的に呼ばれる
  31.         public function setup():void {
  32.            
  33.             //描画範囲指定
  34.             size( m_stage_width, m_stage_height );
  35.            
  36.             //背景色指定（引数の数によって色の指定方法が変わる）
  37.             background(0, 0);  // color, alpha
  38.         }
  39.        
  40.        
  41.         //図形描画の座標をセット
  42.         private function setPoints(base_x:Number, base_y:Number):void {
  43.            
  44.             m_point_current_index = 0;
  45.             m_points = new Array();
  46.            
  47.             var len:int = m_stage_width - random(m_stage_height / 1.5);
  48.             var point_num:int = len / 10;
  49.            
  50.             var step:int = len / point_num + random(5, 1);
  51.            
  52.             var yure:Number = random(5, 1);  //くねくねサイズ
  53.            
  54.             var pt:Point;
  55.            
  56.             for (var i:int = 0; i <point_num ; i++) {
  57.                 pt = new Point(random(yure, -yure) + base_x, -step * i + base_y);
  58.                 m_points.push(pt);
  59.             }
  60.            
  61.             //始点と終点は同じ値を2つ入れる（始点と終点はコントロールポイントになってるっぽいので）
  62.             pt = m_points[0].clone();
  63.             m_points.unshift(pt);
  64.            
  65.             pt = m_points[m_points.length - 1].clone();
  66.             m_points.push(pt);
  67.         }
  68.        
  69.         //ランダムな色を設定
  70.         private function setRandomColor():void {
  71.            
  72.             var r:uint = random(200, 50);
  73.             var g:uint = random(200, 50);
  74.             var b:uint = random(200, 50);
  75.            
  76.             m_color = this.color(r, g, b);
  77.         }
  78.        
  79.        
  80.         //描画（フレーム毎に繰り返し）
  81.         public function draw():void {
  82.            
  83.             //マウスが押された場合
  84.             if ( isMousePressed ){
  85.                 //色再設定
  86.                 setRandomColor();
  87.                
  88.                 //座標再設定
  89.                 setPoints(mouseX, mouseY - m_stage_height);
  90.             }
  91.            
  92.             if (m_points != null) {
  93.                
  94.                 var i:int = 0;  //汎用カウンタ
  95.                 var maru_size:Number = 0;  //円サイズ
  96.                
  97.                 //原点の移動
  98.                 translate( 0, m_stage_height);
  99.                
  100.                 //-----くねくね線-----
  101.                
  102.                 //塗りをなしに
  103.                 noFill();
  104.                
  105.                 //線色の指定（引数の数によって色の指定方法が変わる）
  106.                 stroke(m_color, 0.5);  //color, alpha
  107.                
  108.                 //線幅指定
  109.                 strokeWeight(0.1);
  110.                
  111.                 var pt:Point;
  112.                
  113.                 //頂点を複数持つ図形の描画
  114.                 beginShape();
  115.                 for (i = 0; i <m_point_current_index ; i++) {
  116.                     pt = m_points[i];
  117.                     curveVertex(pt.x, pt.y);
  118.                 }
  119.                 endShape();
  120.                
  121.                 //枝
  122.                 if(m_point_current_index> 0 && m_point_current_index <m_points.length - 1){
  123.                    
  124.                     //枝の先の座標設定
  125.                     if(m_point_current_index> 0){
  126.                         pt = m_points[m_point_current_index - 1];
  127.                     }
  128.                     else {
  129.                         pt = m_points[0];
  130.                     }
  131.                     var eda_inc_x:Number = random(30, 0);
  132.                     if (random(1)> 0.5) {
  133.                         eda_inc_x *= -1;
  134.                     }
  135.                     var eda_inc_y:Number = random( -10, -30);
  136.                    
  137.                     var eda_x:Number = eda_inc_x + pt.x;
  138.                     var eda_y:Number = eda_inc_y + pt.y;
  139.                    
  140.                     //直線
  141.                     line(pt.x, pt.y, eda_x, eda_y);
  142.                    
  143.                     //枝の先のランダムな円いくつか
  144.                     noStroke();
  145.                     fill(m_color, 0.5);
  146.                    
  147.                     for (i = 0; i <5;i++){
  148.                         maru_size = random(10, 1);
  149.                         ellipse(eda_x + random(10, -10), eda_y + random(10, -10), maru_size, maru_size);
  150.                     }
  151.                 }
  152.                
  153.                 //伸び始め位置に円を書く
  154.                 if (m_point_current_index == 0) {
  155.                    
  156.                     noStroke();
  157.                     fill(m_color, 0.5);
  158.                    
  159.                     maru_size = 0;
  160.                     for (i = 1; i <5; i++){
  161.                         maru_size += i * random(5, 2);
  162.                         ellipse(m_points[1].x, m_points[1].y, maru_size, maru_size);
  163.                     }
  164.                 }
  165.  
  166.                 //描画する座標進める
  167.                 m_point_current_index++;
  168.                
  169.                 //最後の座標まで行ったら、次の座標が設定されるまで描画止める
  170.                 if (m_point_current_index> m_points.length) {
  171.                     m_point_current_index = 0;
  172.                     m_points = null;
  173.                 }
  174.            
  175.             }
  176.         }
  177.        
  178.         //描画をリセットする
  179.         public function reset():void {
  180.            
  181.             background(0, 0);
  182.         }
  183.     }
  184. }

サンプル3

白い花がランダムに咲きます。咲いた後は、フィルターをかけてぼかしています。画面クリックで描画をリセットします。


Flash Study 白い花

PLAIN TEXT
Actionscript:
  1. package 
  2. {
  3.     import flash.geom.Point;
  4.     import flash.filters.BlurFilter;
  5.    
  6.     import frocessing.display.*;
  7.    
  8.     /**
  9.      * Frocessingのサンプル3
  10.      * ランダムな白い線の花にBlurフィルターをかける
  11.      */
  12.     public class FrocessingSample03 extends F5MovieClip2DBmp
  13.     {
  14.         //描画サイズ
  15.         private var m_stage_width:Number  = 500;
  16.         private var m_stage_height:Number = 500;
  17.        
  18.         //花描画開始位置
  19.         private var m_flower_base:Point;
  20.        
  21.         //花サイズ
  22.         private var m_flower_size:Number;
  23.        
  24.         //花サイズ増分値
  25.         private var m_flower_step:Number;
  26.        
  27.         //花の現在サイズ
  28.         private var m_flower_current_size:Number;
  29.        
  30.         //花弁の数
  31.         private var m_kaben_num:int;       
  32.            
  33.         public function FrocessingSample03(){
  34.             super();
  35.         }
  36.        
  37.        
  38.         //初期化 Stage が呼び込まれたときに自動的に呼ばれる
  39.         public function setup():void {
  40.            
  41.             //描画範囲指定
  42.             size( m_stage_width, m_stage_height );
  43.            
  44.             //背景色指定（引数の数によって色の指定方法が変わる）
  45.             background(0, 1);  // color, alpha
  46.            
  47.             setFlower();
  48.         }
  49.        
  50.        
  51.         //描画する花の設定
  52.         public function setFlower():void {
  53.            
  54.             m_flower_base = new Point(random(m_stage_width), random(m_stage_height));
  55.             m_flower_size = random(200, 20);
  56.             m_flower_step = m_flower_size / 10; 
  57.             m_flower_current_size = m_flower_step;
  58.            
  59.             m_kaben_num = random(8, 3);
  60.         }
  61.        
  62.        
  63.         //描画（フレーム毎に繰り返し）
  64.         public function draw():void {
  65.  
  66.             translate( 0, 0);
  67.  
  68.             //塗りをなしに
  69.             noFill();
  70.            
  71.             //線色の指定（引数の数によって色の指定方法が変わる）
  72.             stroke(0xDDDDDD, 0.5);  //color, alpha
  73.            
  74.             //花を描く
  75.            
  76.             var kaben_num:int = m_kaben_num;
  77.             var kaben_angle:Number = radians(360 / kaben_num);
  78.             var kaben_len:int = m_flower_current_size / 2;
  79.            
  80.             var base_x:Number = m_flower_base.x;
  81.             var base_y:Number = m_flower_base.y;
  82.            
  83.             beginShape();
  84.             curveVertex(base_x, base_y);
  85.             for (var i:int = 0; i <kaben_num ; i++) {
  86.                 var x1:Number = cos(kaben_angle * i - kaben_angle / 3) * kaben_len / 2 + base_x;
  87.                 var y1:Number = sin(kaben_angle * i - kaben_angle / 3) * kaben_len / 2 + base_y;               
  88.                 var x2:Number = cos(kaben_angle * i) * kaben_len + base_x;
  89.                 var y2:Number = sin(kaben_angle * i) * kaben_len + base_y;
  90.                 var x3:Number = cos(kaben_angle * i + kaben_angle / 3) * kaben_len / 2 + base_x;
  91.                 var y3:Number = sin(kaben_angle * i + kaben_angle / 3) * kaben_len / 2 + base_y;                       
  92.                 curveVertex(base_x, base_y);
  93.                 curveVertex(x1, y1);
  94.                 curveVertex(x2, y2);
  95.                 curveVertex(x3, y3);
  96.                 curveVertex(base_x, base_y);
  97.             }
  98.             curveVertex(base_x, base_y);
  99.             endShape();
  100.            
  101.             //花のサイズ大きくする
  102.             m_flower_current_size += m_flower_step;
  103.            
  104.             if (m_flower_current_size> m_flower_size) {
  105.                 setFlower();
  106.                
  107.                 //フィルタかける
  108.                 bitmapData.applyFilter(bitmapData, bitmapData.rect, new Point(0, 0), new BlurFilter(2, 2));
  109.             }
  110.         }
  111.        
  112.         //描画のリセット
  113.         public function reset():void {
  114.            
  115.             background(0, 1);
  116.         }
  117.     }
  118. }

サンプル4

白い花の上にカラフルな草が伸びていきます。サンプル3の上にサンプル2 を重ねてるだけです。右上の□四角をクリックすると、描画をリセットします。


Flash Study 白い花と色の種草

PLAIN TEXT
Actionscript:
  1. var smp3:FrocessingSample03 = new FrocessingSample03;
  2. this.addChild(smp3);
  3.  
  4. var smp2:FrocessingSample02 = new FrocessingSample02;
  5. this.addChild(smp2);
  6.  
  7. var button:Sprite = new Sprite;
  8. button.graphics.beginFill(0xFFFFFF, 1);
  9. button.graphics.drawRect(5, 5, 20, 20);
  10. button.graphics.endFill();
  11.  
  12. button.alpha = 0.5;
  13. button.buttonMode = true;
  14.  
  15. button.addEventListener(MouseEvent.ROLL_OVER,
  16.                         function(e:Event):void {
  17.                             button.alpha = 1;
  18.                         });
  19.  
  20. button.addEventListener(MouseEvent.ROLL_OUT,
  21.                         function(e:Event):void {
  22.                             button.alpha = 0.7;
  23.                         }); 
  24.                        
  25. button.addEventListener(MouseEvent.MOUSE_UP,
  26.                         function(e:Event):void {
  27.                             smp2.reset();
  28.                             smp3.reset();
  29.                         });
  30.  
  31. this.addChild(button);

使い方の流れ

※F5MovieClipBitmapクラスしか使ってないので、他のクラスを継承した場合の作り方はわかりません…。

  1. F5MovieClipBitmapを継承したクラス作成。
  2. コンストラクタで親のコンストラクタ呼び出す。（明示的に呼び出さないといけないみたいです）
  3. setupメソッドを作って、その中に初期化処理を書く。
  4. drawメソッドを作って、その中に繰り返しの処理を書く。

描画関連のメソッドがAS3と全然違うので、ちょっと戸惑いました。（Processing使ったことないもので）
AS3の描画方法（graphicsクラスのメソッド）は忘れて使った方が混乱しなくていいかなと思います。

ちょこっとコードを書くだけで、結構かっこよさげな描画ができちゃいます。
特に曲線の描画がすごく楽です。
他のクラスも使っていろいろやってみたいです。

コメント・トラックバック

  1. Video | Enjolt.com | Innovate for Success 2009-08-14 06:17:24 （ピンバック）

    [...] then study the principles of memory management in ActionScript. Remember, values are not socks! Flash? Processing ?????? Frocessing ?????? - hokori.net 08/12/2009 [...]

コメントを送る
※は入力必須です。コメントは管理者の承認後に表示されます。

前のページへ

このページのTopへ