Processing Tutorial - 前回の記事の補足
Processing Tutorial - supplement to the previous blog post

前回のブログ投稿でボールオブジェクトを、KeyPressedとSwitch-Caseを使ってインタラクティブに動かす説明が抜けていたました。

In a previous blog post, I missed the explanation of using keyPressed and switch-case statement to interactively change the ball object.

なので、簡単に説明して終わりたいと思います。 下に全体のコードを示します。前回との変更点は後で説明します。

So, I would like to explain briefly and finish. The entire code is shown below. Changes from the previous one will be described later.

Ball[] balls;

int count;

float r;
float x;
float y;
float xacc;
float yacc;
color c;

void setup(){
  size(640, 360);

  count = 100;
  balls = new Ball[count];
  for (int i = 0; i < count; i++) {
    r = random(10,30);
    x = random(width);
    y = random(height);
    xacc = random(2);
    yacc = random(4);
    c = color(random(255),random(255),random(255));
    balls[i] = new Ball(r, x, y, xacc, yacc, c);
  }
  
}

void draw(){
  background(255);
  for (Ball ball : balls) {
    if (keyPressed){
      switch(key){
        case 'a':
          ballXYUpdate(ball);
          break;
        case 'd':
          ballColorUpdate(ball);
          break;
        case 'g':
          ballRadiusUpdate(ball);
          break;
      }
    }
    ball.update();
    ball.display();
  }
}

class Ball{
  float radius;
  float ballX;
  float ballY;
  float xAcc;
  float yAcc;
  color ballColor;
  
  Ball(float r, float x, float y, float xa, float ya, color c){
    radius = r;
    ballX = x;
    ballY = y;
    xAcc = xa;
    yAcc = ya;
    ballColor = c;
  }

  void update(){
    if((ballX > width) || (ballX < 0)){
      xAcc = xAcc * -1;
    }
    if((ballY > height) || (ballY < 0)){
      yAcc = yAcc * -1;
    }
    ballX = ballX + xAcc;
    ballY = ballY + yAcc;
  }
  
  void display(){
    noStroke();
    fill(ballColor);
    ellipse(ballX, ballY, radius, radius);
  }
}

void ballXYUpdate(Ball ball){
  ball.ballX = ball.ballX + cos(random(TWO_PI)) * ball.radius * 0.3;
  ball.ballY = ball.ballY + sin(random(TWO_PI)) * ball.radius * 0.3;
}

void ballColorUpdate(Ball ball){
  ball.ballColor = color(random(255),random(255),random(255));
}

void ballRadiusUpdate(Ball ball){
  ball.radius = random(30,90);
}

今回はkeyPressed変数を利用します。 この変数にはキーボードのキーが押された時にTrueが入ります。 これとKey変数を利用して、それぞれKeyに対応する関数をSwitch文で処理します。

This time, I use the keyPressed variable. This variable is set to True when a keyboard key is pressed. This and the key variable are used to process the function corresponding to key in the switch statement.

for (Ball ball : balls) {
  if (keyPressed){
    switch(key){
      case 'a':
        ballXYUpdate(ball);
        break;
      case 'd':
        ballColorUpdate(ball);
        break;
      case 'g':
        ballRadiusUpdate(ball);
        break;
    }
  }
  ball.update();
  ball.display();
}

このFor文で使われている、 (Ball ball : balls)ですが、これは今まで、インデックス番号を1ずつ増やしていくことによって、ボールオブジェクトを順番通り操作していましたが、 このように書くことによって、直接ボールオブジェクトを一つずつ操作できます。

Instead of incrementing the index number, the (Ball ball : balls) in the For statement can directly manipulate the ball object one by one.

インデックス番号を使ったFor文のやり方で説明すると以下のようなコードになります。

Using the For statement with index numbers, the code looks like this.

for (int i = 0; i < balls.length; i++) {
  Ball ball = balls[i];

  ball.update();
  ball.display();
}

そして、KeyPressedがTrueなら、つまりキーが押されたなら、 Switch文でKeyの値ごとに処理を分岐させます。

And if keyPressed is true, that is, the key is pressed, The switch statement causes the process to branch for each key value.

if (keyPressed){
  switch(key){
    case 'a':
      ballXYUpdate(ball);
      break;
    case 'd':
      ballColorUpdate(ball);
      break;
    case 'g':
      ballRadiusUpdate(ball);
      break;
  }
}

そして、このそれぞれのキーに対応する関数３つは、ボールオブジェクトを引数として受け取り、そのオブジェクトのプロパティの値を直接書き換えます。

The three functions that correspond to each key take a ball object as an argument and directly rewrite the value of that object's properties.

void ballXYUpdate(Ball ball){
  ball.ballX = ball.ballX + cos(random(TWO_PI)) * ball.radius * 0.3;
  ball.ballY = ball.ballY + sin(random(TWO_PI)) * ball.radius * 0.3;
}

void ballColorUpdate(Ball ball){
  ball.ballColor = color(random(255),random(255),random(255));
}

void ballRadiusUpdate(Ball ball){
  ball.radius = random(30,90);
}

ballXYUpdate関数はCosとSinを使用して、各ボールオブジェクトに横と縦に振動する動きを与えます。

The ballXYUpdate function uses Sine and Cosine to cause each ball object to vibrate horizontally and vertically.

残りの２つの関数は単純にランダムな数値を、ボールオブジェクトの半径と色に入れ直すだけのものです。

The other two functions are simple. It simply replaces the radius and color of the ball object with random numbers.

以上で補足記事は終わりですが、KeyPressedの代わりにMousePressedを利用したり、もっとスマートな切り替え方法だったり、複雑で美しくなるような関数を作ってみてくだちぃ。

That's the end of the blog post, but you can use mousePressed instead of keyPressed. Also try creating functions that produce more complex and more beautiful movements.