processingでArrayListを使う利点

私は、大学の研究室でインタラクティブアート制作を行なっています。
制作を行なう上でArrayListの利便性に気づき、まとめてみました。

# 配列を使用したアニメーション

複数のボールがバウンドするアニメーションを作成します。
このプログラムは、画面をクリックするとボールを生成し、画面内でボールがバウンドします。ボールは15個生成します。

![ball.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/464319/7a9d098f-26b6-59a9-4019-42f4465a97ce.gif)


```java:
int n=15;
int ball_count=0;

Ball[] ball = new Ball[n];

void setup(){
  size(400, 400);    
  frameRate(60);      
  fill(0,255,255,190); 
}


void draw(){
  background(0); 
  
  for(int i=0;i<ball_count;i++){
      ball[i].move();
      ball[i].display();
  }
}
void mousePressed() {
  
  if(ball_count<n){ 
    ball[ball_count]=new Ball(mouseX,mouseY,2,1.3,30);
    ball_count +=1;
  }
  
}


class Ball{
  float pose_x, pose_y, speed_x,　speed_y,　r;
  
   Ball(float pose_x,float pose_y,float speed_x,float speed_y,float r){
     this.pose_x=pose_x;
     this.pose_y=pose_y;
     this.speed_x=speed_x;
     this.speed_y=speed_y;
     this.r=r;
  }
  
  
  void move(){
     pose_x += speed_x;
     pose_y += speed_y;

    if(pose_x< 0+r/2 || pose_x > width-r/2){
        speed_x = speed_x  * -1;
      }
  
    if(pose_y< 0+r/2 || pose_y> height-r/2){
        speed_y = speed_y * -1;
      }
    
  }
  
  
  void display(){
    ellipse(pose_x,pose_y,r,r);
  }
}
```

# 配列のデメリット
###1.要素数以上の図形は、生成できない。
&emsp;配列は宣言した後、要素数を変えることが出来ません。
&emsp;そのため要素数以上のボールを作成することは不可能です。

###2.図形を消すことが出来ない。

&emsp;例えば「１０回バウンドしたらボールを消す」などを実装することが出来ません。
&emsp;理由は、ボール配列の要素数を減らすことも出来ないからです。


これらのデメリットを解決するために、ArrayListを用います。

#ArrayListとは？
ArrayListとは、可変配列と呼ばれています。つまり追加や削除をすることが出来ます。
ArrayListを使うために、以下のような宣言を記述する必要があります。

```
ArrayList<型> リスト変数 = new ArrayList<型>();
```
型には「動かす図形のクラス名」を入力します。



#ArrayListによる追加や削除
###・図形の追加

```
リスト変数.add(インデックス);
```

###・図形の削除

```
リスト変数.remove(インデックス)；
```

###・メソッドの呼び出し

```
リスト変数.get(インデックス).メソッド名();
```


#ArrayList使用したアニメーション

ArrayListを用いて,バウンドボールを実装します。
これで、無限にボールを生成することが出来ます。

```java:
ArrayList<Ball> ball;

void setup(){
  size(400, 400);    
  frameRate(60); 
  fill(0,255,255,190);
  ball= new ArrayList<Ball>();
 }


void draw(){
  background(0); 
  
  for(int i=0;i<ball.size();i++){
      ball.get(i).move();
      ball.get(i).display();
  }
}

void mousePressed() {
  ball.add(new Ball(mouseX,mouseY,2,1.3,30));
}


class Ball{
  float pose_x, pose_y, speed_x,speed_y,r;
  
  
  Ball(float pose_x,float pose_y,float speed_x,float speed_y,float r){
    this.pose_x=pose_x;
    this.pose_y=pose_y;
    this.speed_x=speed_x;
    this.speed_y=speed_y;
    this.r=r;
  }
  
  void move(){
    pose_x += speed_x;
    pose_y += speed_y; 
    
    if(pose_x< 0+r/2 || pose_x > width-r/2){
      speed_x = speed_x * -1;
    }
    
    
    if(pose_y< 0+r/2 || pose_y> height-r/2){
      speed_y = speed_y * -1;
    }
  }
  
  
  void display(){
    ellipse(pose_x,pose_y,r,r);
  }  
}
```

#１０回バウンドしてボールが消える動作を実装

ballクラスに、バウンドを数える変数bound_count、
その変数を戻り値として返すboundCountメソッドを追加します。


```java:
ArrayList<Ball> ball;

void setup(){
  size(400, 400);    
  frameRate(60);      
  fill(0,255,255,190);
  ball= new ArrayList<Ball>();
 }


void draw(){
  background(0); 
  
  for(int i=0;i<ball.size();i++){
      if(ball.get(i).boundCount()>10)ball.remove(i);
      if(ball.size()==0)break;
      ball.get(i).move();
      ball.get(i).display();
  }
}

void mousePressed() {
  ball.add(new Ball(mouseX,mouseY,2,1.3,30));
}


class Ball{
  float pose_x, pose_y, speed_x,speed_y,r;
  int bound_count;
  
  
  Ball(float pose_x,float pose_y,float speed_x,float speed_y,float r){
    this.pose_x=pose_x;
    this.pose_y=pose_y;
    this.speed_x=speed_x;
    this.speed_y=speed_y;
    this.r=r;
    bound_count=0;
  }
  
  void move(){
    pose_x += speed_x;
    pose_y += speed_y; 
    
    if(pose_x< 0+r/2 || pose_x > width-r/2){
      speed_x = speed_x * -1;
      bound_count+=1;
    }
    
    
    if(pose_y< 0+r/2 || pose_y> height-r/2){
      speed_y = speed_y * -1;
      bound_count+=1;
    }
  }
  
  
  void display(){
    ellipse(pose_x,pose_y,r,r);
  }
  
  int boundCount(){
    return bound_count;
  }
}
```

#まとめ
今回は、processingでArrayListを使う利点について述べました。
インタラクティブアートでは、要素数以上の図形を生成することや、ある条件下で図形を消すアニメーションを実装することがあります。そういった場面では、配列ではなくArrayListがおすすめです。