2018プログラミング講座１１：動き

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 型は小数点を持つ数値を扱うことができるため細かな動きが表現できます。

フレーム
Processingはdraw()関数内に記述されたコードを毎秒６０回実行しています。Processingのコードを実行すると表示されるウィンドウの画面は毎秒６０回、更新されているということになります。この更新される画面の１枚（１コマ）をフレームと呼びます。
また１秒間に何回フレームを更新するかはフレームレートで表します。標準（デフォルト）のフレームレートが毎秒６０回となります。

それでは、以下のコードでフレームレートを変更してみましょう。

float speed = 0.5;
float x = 0;

void setup(){
  size(400,200);
  frameRate(30);//フレームレート関数
}

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

上記のコードのframeRate()関数の数値を色々と変更してみましょう。

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

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座標それぞれの進行方向に対して壁に当たると符号が反転し逆方向に進行する表現を実装しています。

練習課題11：
図形の跳ね返り２のコードをもとに以下の変更を加えて作品を完成させましょう。
・移動するオブジェのスピードや角度を変更する。
・移動するオブジェを円から画像に変更する。