図形を動かす：直線(1)

入力するコード

以下のコードを入力してください。
※Tabキーを押すと行頭に半角スペース2つが挿入されます。

int x = 0;

int y = 0;

  

void setup() {

  size(300, 300);

}

  

void draw() {

  background(255);

  line(x, y, 100 + x, 100 + y);

  x = x + 1;

  y = y + 1;

}

結果

以下のような画面が表示され、直線が画面左上から右下に移動したらOKです。

解説

まずはプログラムの原則として「一番上の行から順次処理される」ということを踏まえながらコードを読み解いていきましょう。

int x = 0;

int y = 0;
　

このプログラムで利用する変数を準備します。
変数については「変数について理解する」で詳しく解説します。
　

void setup() {

  size(300, 300);

}
　

「setup()」の後の{}の中には、プログラムが実行される前に１度だけ実行したい処理をまとめて書きます。ここでは「size(300, 300);」で画面の大きさを決めていますね。
　

void draw() {

  background(255);

  line(x, y, 100 + x, 100 + y);

  x = x + 1;

  y = y + 1;

}
　

「draw()」の後の{}の中には、何度も繰り返し実行したい処理をまとめて書きます。
　

  background(255);
　

これは文字通り背景の色を指定するものです。()の中身が0だと真っ黒、255だと真っ白になります。つまり、ここで一度背景を真っ白にしていることになります（なぜそんなことをしているかは後ほど）。
　

  line(x, y, 100 + x, 100 + y);
　

これは「基本の図形：直線」で学習した、直線を描くためのものです。
x, yはプログラム冒頭で準備した変数ですね。冒頭では「int x = 0;」「int y = 0;」とそれぞれしましたが、それによってx, yという変数はそれぞれ「0」になっています。
従って一番最初にこの処理が実行されるときには、
　

  line(0, 0, 100 + 0, 100 + 0);
　

と同じことになります。よってここで(0,0)から(100,100)に伸びる直線がここで描画されます。
　

  x = x + 1;

  y = y + 1;
　

ここで出てくる「=」は、数学の授業で用いる「=」とは用途が異なり、「右辺の計算結果を左辺に代入してね」という意味になります。
従って最初にこの処理が実行されるときには、
　

  x = 0 + 1;

  y = 0 + 1;
　

と同じことになり、x, yはそれぞれ「1」に代わります。
　
これで「draw()」の後の{}の中を１周しました。この中の処理は繰り返し実行されるので、次はまた{}内の先頭行に戻ることになります。
　

void draw() {

  background(255);

  line(x, y, 100 + x, 100 + y);

  x = x + 1;

  y = y + 1;

}

　
さて、２週目には具体的にはどのような処理がなされているか見ていきましょう。
　

  background(255);
　

ここでまた背景を真っ白に戻しています。１週目で描いた直線がここで消えます。
　

  line(x, y, 100 + x, 100 + y);
　

そしてまた直線を描きます。x, yは１週目を経てそれぞれ「1」になっているので、次は(1,1)から(101,101)に伸びる直線がここで描画されます。
　

  x = x + 1;

  y = y + 1;
　

最後に、またx, yに1ずつ加算します。
　
従って、draw()の{}内では
　
「画面を白にする」→「(0,0)～(100,100）の直線を描く」→「画面を白にする」→「(1,1)～(101,101）の直線を描く」→「画面を白にする」→「(2,2)～(102,102）の直線を描く」→「画面を白にする」→・・・
　
という処理が高速で（厳密には１周1/60秒で）繰り返されることになります。
　
こうして、パラパラマンガと同じ要領であたかも直線が動いているかのようにアニメーションを描くことができました。
基本的には、図形等を動かすにはこれと同じ要領でプログラムを書いていくことになります。