四角で遊ぶ - はじめの一歩

まずは基本の２次元図形の長方形を描いてみましょう。

rect(0, 0, 10, 10);

実行すると、左上に黒い枠がついた白い正方形が表示されます。 rect()は、長方形を描く関数です。 かっこの内側の数（引数:ひきすう）は、長方形のx座標、y座標、幅、高さをピクセル数で指定します。 上の例では、xy座標が(0,0)なので、左上原点に長方形が描かれます。 幅と高さは(10,10)ですので、幅も高さも10ピクセルの正方形になります。 rect()の引数をいろいろ変えて、いろいろな大きさの長方形を描いてみましょう。

四角で遊ぶ - 色をつける

つぎに長方形の色を変えてみます。

fill(0);
rect(0, 0, 10, 10);

実行すると正方形の色が黒に変わりました。 fill()は、塗りの色を指定する関数です。 引数は、グレーの明るさで、0から255までの値を指定します。

fill(255, 0, 0);
rect(0, 0, 10, 10);

fill()の引数を3つに増やすと、色をつけられます。 引数は光の三原色RGBの値を順に指定します。

四角で遊ぶ - 繰り返す

つぎに、グレーの明るさを変えながら長方形を並べてみましょう。

fill(0);
rect(0, 0, 100, 10);
fill(10);
rect(0, 10, 100, 10);
fill(20);
rect(0, 20, 100, 10);
fill(30);
rect(0, 30, 100, 10);
fill(40);
rect(0, 40, 100, 10);
fill(50);
rect(0, 50, 100, 10);
fill(60);
rect(0, 60, 100, 10);
fill(70);
rect(0, 70, 100, 10);
fill(80);
rect(0, 80, 100, 10);
fill(90);
rect(0, 90, 100, 10);

fill()とrect()の引数を変えながら10回繰り返して、長方形を描きました。 最後は白にしたかったのですが、うまくいきませんでした。 fill()の引数の最大値は255ですから、最後は255でなければ白になりません。 0から255を十等分するのは面倒ですね。 コードも20行と長くなってしまいました。

四角で遊ぶ - 変数をつかう

上の繰り返しをもっと簡単に記述するには、変数をつかうのが便利です。 変数とは値を入れておく入れ物のようなものです。 ここではint（整数）型の変数「i」を宣言して、for()で繰り返し、fill()とrect()の引数に利用しています。

int  i;

for (i = 0; i < 10; i++)
{
  fill(255 / 10 * i);
  rect(0, height / 10 * i, 100, 10);
}

for()は、繰り返し（ループ）の記述に使う構文です。 かっこの中には、最初に実行する文、繰り返しの条件、繰り返し終了時に実行する文を記述し、 そのあとの中かっこのなかに繰り返し実行する文を記述します。 ループは、何度も同じような文を繰り返すときに簡単に書くことができます。