１．ウィンドウサイズの変数 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;
    }
}

https://www.youtube.com/embed/p7_6X1BxhIc?rel=0&controls=0&showinfo=0

やってみよう

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

４．左に動くボール

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