変数 というのは、値を格納しておくことが出来る箱のようなもので、型と名前を順番に書くことで宣言（作成）する事が出来ます。
変数を使えると何が嬉しいのかというと、命令によって描いたオブジェクト（図形）を、時間経過やイベントに応じて移動させたり変化させたりということが比較的簡単に出来きます。（嬉しい）
最近では変数を使わない（すべて定数にしてしまう）プログラミング手法が注目されていますが、とりあえず入門の間はそのことは考えずに進めていきたいと思います。
processingには様々なデータ型が存在します。
int（整数の値を入れておける箱）
float(小数点の付いている値を入れておける箱)
String（文字列を入れておける箱）
などです。
int型に小数点付きの数値を入れようとするとエラーが起こります。これは、箱の型と実際に入れようとしている値の型が合っていないからです。
つまり、型は変数にだけあるのではなく、値にもあるということです。
が、ちょっとややこしいのでまだ考えなくても良いでしょう。
例を見てみよう
int x = 0;
これを、void setup(){}の前に書く。そして、400をxに置き換える。
int x = 0;
void setup(){
size(800,800);
}
void draw(){
ellipse(x,400,100,100);
}
これだけだと、円が半分ちょん切れたような状態で表示されるだけだと思います。
では、ellipseの前に、
x = x+1;
という一行を挟んでみてください。
processingにおいて = とは、「同じ」という意味ではなく、右辺を左辺に「代入」するという意味になります。
今回の場合、最初に宣言した変数 x は 自分自身 x の値に + 1 した数を、自分の中に代入せよ、という意味になります。
つまり
最初宣言された時点ではxの中には0が入っている。
x = x + 1;
上の行は、0であるxに、1を足した数を代入します。
1周めのdrawの命令が全て実行された時に、xの中は1になっています。
次に
x = x+1;
が、実行される時には、xの中身は既に１になっているので、
1 + 1がxに入れられて、xの中身は2になります。
これが秒間に60回行われた結果、円が少しずつ右に移動していく、という事が起きます。
しかし、このままでは円は何かを引きずったような跡が残ってしまっています。
これは、前のフレーム（drawの中が１回実行されて画面が更新される事を、フレームと呼びます）に描写された円が消されずに残ってしまっているからです。
そこで、
x = x + 1;
の前にこの一文をいれてあげましょう。
background(0);
background(0)は、()の中の数字の明るさで全ての画面を塗りつぶす、というメソッドです。０だと真っ黒、255だと真っ白です。その中間は灰色になります。
これによって、毎フレーム真っ黒に上書きされ続けるため、円は円だけで真っ黒な空間を移動していく、というわけです。
練習問題
問題 １
２つの同じ大きさの円が、右端と左端から出現し、真ん中で交差して端に消えていく、というプログラムを書きなさい。
問題 ２
ウインドウの４隅から円が出現し、ウインドウの真ん中で重なって、端に消えていくプログラムを書きなさい。
問題 ３
ウインドウが徐々に黒から白になっていくプログラムを書きなさい。