８．端で跳ね返るボール　

１．ウィンドウサイズの変数 widthとheight

size()で画面の大きさを決めると、 width（ウィズス） と height（ハイト） という変数に自動的に画面の横幅と縦幅が入ります。 この変数を図形を描く位置に使うと、あとから画面のサイズを変更してもプログラムを変更しないで済むので便利です。

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

void draw(){
    ellipse(width/2,height/2,width,height);
}

width/2 と height/2 は、横幅の半分と縦幅の半分なので、 (width/2, height/2) は真ん中の座標です。

２．右に動くボール

ボールのX座標を 変数x に入れて、変数xが毎回5ずつ増えるようにします。

ボールはウィンドウのちょうど真ん中の高さにしたいので、Y座標はウィンドウの高さ height を2で割った値とします。

float x = 0;
void setup(){
    size(600,400);
}

void draw(){
    background(0);
    ellipse(x,height/2,50,50);
    x += 5;
}

３．右に動くボール（はみ出したら戻る）

xがウィンドウの幅 width を超えると右にはみ出してしまうので、xが width よりも大きくなったらxを0にして左側に戻します。

float x = 0;
void setup(){
    size(600,400);
}

void draw(){
    background(0);
    ellipse(x,height/2,50,50);

    x += 5;
    if (x > width){
        x = 0;
    }
}

やってみよう

下に動くボールを作ってみましょう。ボールが下に着いたらまた上から落ちてくるようにしてください。

４．左に動くボール

ボールを右に進ませるときは、X座標を5ずつ増やしていました。これを左にすすめるときは、逆に5ずつ減らすようにします。また初期値を width に変えて右端から左端に動くようにします。 このままだと、左にはみ出してしまうので、xが0よりも小さくなったらxを witdh にして右側に戻します。

float x = width;
void setup(){
    size(600,400);
}

void draw(){
    background(0);
    ellipse(x,height/2,50,50);

    x -= 5;
    if (x < 0){
        x = width;
    }
}

５．端で跳ね返るボール

今後は端に来た時に跳ね返るようにします。進み方を speed（スピード） という変数に入れて、これを端に来た時に増減を変えるようにしています。

float x = 0;
float speed = 5;
void setup(){
    size(600,400);
}

void draw(){
    background(0);
    ellipse(x,height/2,50,50);

    x += speed;
    if (x > width) {
        speed = -5;
    }
    if (x < 0) {
        speed = 5;
    }
}

if文の部分

ここでは、xがwidthよりも大きくなった時（＝右端に来た時）、speedを-5にして左に進むようにし、xが0よりも小さくなった時（＝左端に来た時）、speedを5にして右に進むようにしています。

// if文の部分
    if(x > width){
        speed = -5;
    }
    if(x < 0){
        speed = 5;
    }

やってみよう

変数speedはｘ方向のスピードでした。ｘ方向だけではなく、y方向のスピード（例えば、変数speed_y）も追加して、ボールが斜めに動き回るようにしてください。そして、ボールは左右の端だけでなく、上下の端でも跳ね返るようにしてください。