四角いフレームを回す

様々な色の四角いフレームを回転させると、かっこいいアニメーションが出来ます。

１．前提知識

前提として、下記の知識が必要となります。

• オブジェクト指向プログラミング（クラス）
• 繰り返し
• マウスイベント
• translate(), rotate()
• ArrayList

2. クラスを作成する

今回のプログラムでは、回転する四角いフレームを沢山生成するため、 Rect クラスを作成します。

class Rect{
  // sizeは四角形の大きさ、growUpSpeedは大きくなるスピード
  float size,growUpSpeed;

  // 四角いフレームの色
  color c;

  // agnleは角度、rotationSpeedは回転するスピード
  float angle,rotationSpeed;

  // コンストラクタ
  Rect(){
    size = 0;
    grouUpSpeed = random(3);
    c = color(random(255),random(255),random(255));
    angle = 0;
    rotationSpeed = random(-3,3);
  }

  // 四角いフレームを描画
  void display(){
    stroke(c);
    pushMatrix();
    rotate(radians(angle));
    rect(0,0,size,size);
    popMatrix();
  }

  // 四角いフレームの大きさ、角度を更新
  void update(){
    size += growUpSpeed;
    angle += rotationSpeed;
  }

}

3.

4. プログラム全体

ArrayList<Rect> rects = new ArrayList();

int loop = 1;

void setup(){
  size(400,400);
  rectMode(CENTER);
  noFill();

}

void draw(){
  background(0);
  // 20フレームごとに四角形が増えるのです
  if(frameCount%20 == 0){
    Rect r = new Rect();
    rects.add(r);
  }

  // 原点をウィンドウの中心にして四角形を描画
  translate(width/2,height/2);
  for(int i = 0, l = rects.size();i<l ;){
    Rect r = rects.get(i);
    r.display();
    r.update();
    if(r.s > width){
      rects.remove(r);
      l = rects.size();
    }else i++;
  }
}

void mouseClicked(){
  if(loop == 1) noLoop();
  else loop();

  loop = 1 - loop;
}

class Rect{
  float s,ss;   // sはsizeのs, ssはsizeが大きくなるspeedってことでssなのだと思う
  color c;
  float r,rs;    // rはrotation(回転)の角度、rsはrotationするspeedなのでしょう

  Rect(){
    s = 0;
    ss = random(3);
    c = color(random(255),random(255),random(255));
    r = 0;
    rs = random(-3,3);
  }

  void display(){
    stroke(c);
    pushMatrix();
    rotate(radians(r));       // 回転だあああああああああああ
    rect(0,0,s,s);
    popMatrix();
  }

  void update(){
    r += rs;
    s += ss;
  }

}