Pongを作る(8)　色で遊ぶ(2)

今回は、スムースに背景色が変わるようにしてみるよ。

前回までのコードを以下のように修正していきます。

int r, g, b;
↓　修正
int r, g, b rs, gs, bs;

＜setup()内＞
r = 0;
g = 0;
b = 0;
↓　修正
r = int(random(256));
g = int(random(256));
b = int(random(256));
rs = 1;
gs = 1;
bs = 1;

＜draw()内＞
//　以下の個所を削除（2箇所あります）
r = int(random(256));
g = int(random(256));
b = int(random(256));

//　以下を新たに追加
if(r==255 || r==0)  rs *= -1;
r += rs;
if(g==255 || g==0)  gs *= -1;
g += gs;
if(b==255 || b==0)  bs *= -1;
b += bs;

新たに、rs，gs，bs という変数を作りました。”s” は「符号」を意味するSignからとっています。rs，gs，bs は＋1 または－1 の値をとります。この3つの変数は setup() 内で 1 に設定してあります。

setup() 内で、ランダムにr，g，b の値を決めます。その後、フレームごとに r を rs の分、g を gs の分、b を bs の分だけ増加させます（ r += rs; ）。その際、r，g，b が255（上限）になったら、rs，gs，bs に－1 をかけて、今度はその値から 1 ずつ減るようにします。式は r += rs; のままですが、rs がマイナスになっているので、同じ式でも引き算になります。r，g，b が 0 になったら、rs，gs，bs に再び－1 をかけて、それぞれの値が増えるようにしています。

前回は点数が変わった時にパッと背景色が変わるようになっていましたが、この方法だと少しずつ色が変わっていきます。スコアの変化は色の変化と関係ありません。

今回のコードです。

float ballX, ballY;
float racketY;
int xDir, yDir;
float xSpeed, ySpeed;
float enemyY;
float easing;
int myScore = 0;
int enemyScore = 0;
int mySet = 0;
int enemySet = 0;
int r, g, b, rs, gs, bs;

void setup() {
  size (480,320);
  ballX = width/2;
  ballY = height/2;
  racketY = height/2;
  easing = 0.1;
  xDir = 1;
  yDir = 1;
  xSpeed = 1;
  ySpeed = 1;
  r = int(random(256));
  g = int(random(256));
  b = int(random(256));
  rs = 1;
  gs = 1;
  bs = 1;
}

void draw() {
  background(r, g, b);
  strokeWeight (1);
  stroke(255);
  for ( int i = 0; i < height; i += 10 ){ 　
　　line(width/2, i, width/2, i+5); 　
　} 　
　
　//my racket 
　float targetY = mouseY; 
　racketY += (targetY - racketY) * easing; 
　rect(440, racketY-25, 8, 50); 

　//enemy racket 
　enemyY += (ballY - enemyY) * easing; 
　rect(40, enemyY-25, 8, 50); 
　ellipse(ballX, ballY, 6, 6); 
　if((ballY+3>height) || (ballY-3<0)) yDir *= -1; 
　if ((ballX+3 >= 440) && (ballX+3 <= 448) && (ballY > racketY-25) && (ballY < racketY+30))
    xDir *= -1;
  if ((ballX-3 <= 48) && (ballX-3 >= 40) && (ballY > enemyY-25) && (ballY < enemyY+25)) 
　　xDir *= -1; 
　if (ballX+3 > width) {
    enemyScore ++;
    ballX = width/2;
    ballY = height/2;
    xSpeed = random(1, 4);
    ySpeed = random(1, 4);
  }
  else if(ballX-3 < 0) { 
　　myScore ++; 
　　ballX = width/2; 
　　ballY = height/2; 
　　xSpeed = random(1, 4); 
　　ySpeed = random(1, 4); 
　} 

　ballX += xSpeed * xDir; 
　ballY += ySpeed * yDir; 

　textAlign(CENTER, CENTER); 
　textSize(30); 
　text(enemySet, 80, 20); 
　text(enemyScore, 160, 20); 
　text(mySet, 320, 20); 
　text(myScore, 400, 20); 

　if (myScore > 2) {
    mySet++;
    myScore = 0;
  }
  if (enemyScore > 2) {
    enemySet++;
    enemyScore = 0;
  }
  
  xSpeed += 0.01;
  ySpeed += 0.01;
  
  textSize(80);
  if (enemySet >= 3){
    text("You LOSE!", width/2, 130);
    textSize(40);
    text("Click to restart", width/2, 200);
  }
  else if (mySet >= 3){
    text("You WIN!", width/2, height/2-30);
    textSize(40);
    text("Click to restart", width/2, height/2+30);
  }
  
  if(mousePressed){
    ballX = width/2;
    ballY = height/2;
    mySet = 0;
    myScore = 0;
    enemySet = 0;
    enemyScore = 0;
    xSpeed = 1;
    ySpeed = 1;
  }
  
  if(r==255 || r==0)  rs *= -1;
  r += rs;
  if(g==255 || g==0)  gs *= -1;
  g += gs;
  if(b==255 || b==0)  bs *= -1;
  b += bs;
}