2017プログラミング講座10：Processingと動き

Processingを使った動きの表現を学んで行きましょう。

図形の水平移動
図形を水平移動させます。以下のコードを記述してみましょう。

float speed = 0.5;
float x = 0;

void setup(){
  size(400,200);
}

void draw(){
  background(0);
  x += speed;
  ellipse(x,100,40,40);
}

このコードで変数宣言に使ったデータ型である float 型は小数点を持つ数値を扱うことができるため細かな動きが表現できます。

画面から出ていった図形が反対から入ってくる
上のコードでは画面の右端から図形が出て行ったら、それっきり戻ってくることはありません。コードを改良して右端から出ていった図形が左端から入ってくるように変更してみましょう。

float speed = 0.5;
float x = 0;

void setup(){
  size(400,200);
}

void draw(){
  background(0);
  x += speed;
  if(x>400){
    x = 0;
  }
  ellipse(x,100,40,40);
}

このコードでは、先ほどのコードに加えてif文を使ってxの値が画面サイズの幅（この例では400）より大きくなった場合に、xの座標を0に戻すことで、右端から出ていった図形が左端から入ってくるように処理しています。

図形の跳ね返り１
次のコードでは図形が右端まで行ったら、まるで壁に当たって跳ね返ったかのように左に戻るというように変更してみましょう。

float speed = 0.5;
float x = 100;
int direction = 1;

void setup(){
  size(400,200);
}

void draw(){
  background(0);
  x += speed*direction;
  if((x>400-20)||(x<0+20)){
    direction = -direction;
  }
  ellipse(x,100,40,40);
}

上のコードでは　direction　という変数を使って、図形のx座標の位置が画面の幅より大きい場合と小さい場合に direction の符号を反転させて図形の進行方向を変えています。

図形の跳ね返り２
次のコードでは斜め方向に図形が移動し、壁に跳ね返って戻るという表現を実装してみましょう。

float xpos = 100;
float ypos = 100; 
float xspeed = 0.5;
float yspeed = 1;
int xdirection = 1;
int ydirection = 1;

void setup() 
{
  size(400, 400);
}

void draw() 
{
  background(0);
  xpos = xpos + ( xspeed * xdirection );
  ypos = ypos + ( yspeed * ydirection );
  if ((xpos > 400-20) || (xpos < 0+20)) {
　　xdirection *= -1; 
　} 
　if ((ypos > 400-20) || (ypos < 0+20)) {
　　ydirection *= -1;
  }
  ellipse(xpos, ypos, 40, 40);
} 

上のコードでは、先ほどのコードに加え、x座標、y座標それぞれの進行方向に対して壁に当たると符号が反転し逆方向に進行する表現を実装しています。