Processing 収縮拡大する円

やりたかったこと

動きがあるクラスを作って描画をする。

描画するもの

• 円

円クラスを使って、複数個の円に同じ動きをつける。

動き

• 広がる／縮む
• 移動する

インスタンス化した円が広がったり、移動したりする。

コード

Circle c1,c2,c3,c4,c5,c6;    //decalation
int clr_back = 255;          //color of background. 255 = white

void setup(){
  size(400,400);
  smooth();
  background(clr_back);
  frameRate(50);
  
  c1 = new Circle();        //making 6 instances
  c2 = new Circle();
  c3 = new Circle();
  c4 = new Circle();
  c5 = new Circle();
  c6 = new Circle();
}


void draw(){
 c1.updateMe(255,0,0);    //calling 6 the method of the instance
 c2.updateMe(0,255,0);
 c3.updateMe(0,0,255);  
 c4.updateMe(255,255,0);
 c5.updateMe(0,255,255);
 c6.updateMe(255,0,255);  
}


class Circle {
  float clr_r,clr_g,clr_b;    //for color
  float x, y;                 //for axis
  float radius;
  int rad;      
 
  Circle () {
    x = random(width);
    y = random(height); 
    rad = 10;
  }
  
  void updateMe(float clr_r,float clr_g,float clr_b){
    noStroke();
    fill(clr_back);                                //paint it white the ellipse before writing
    ellipse(x, y, radius * 1.05, radius * 1.05);
    radius = abs(sq(sin(radians(rad)))) * 200;    //caliculate next radius
    rad = rad + 1;                                //caliculate next radian
    if(rad == 170){                               //return the radian
      rad = 10;
      x = random(width);                          //remove
      y = random(height);
      background(clr_back);
    }
    fill(clr_r,clr_g,clr_b);
    ellipse(x, y, radius, radius);                //paint the ellipse       
  }
}

ソースの流れ

1. setup(ウィンドウやインスタンスの作成)
2. draw(インスタンスをアップデートし描画する)
3. その他(Circleクラスの作成)

個人的ポイント

• abs(sq(sin(radians(rad)))) * 半径

sinの2乗を円の半径にかけることで、円の収縮動作が弾むようになる。

[普及版]ジェネラティブ・アート―Processingによる実践ガイド