draw関数をうまく使うと絵が動くプログラムを作成することができる。 まず、少しずつ位置を変えて表示するプログラムは次のようになる。

  void setup() 
  {
    size(200, 300);
    background(255);
  }

  int y;

  void draw()
  {
    line(0, y, 200, y);
    
    y = y + 2;
  }

上記のプログラムではｙ方向の位置に変数を使用している。 drawが呼び出される度にyに2を加えて表示位置を変えている。 この場合変数yはdraw関数の外側で宣言する。 draw関数の外側で宣言するとdraw関数内で代入された値をずっと保持することができる。
このdraw関数に背景色の設定を追加すると絵が動いて見えるようになる。

  void draw()
  {
    background(255);

    line(0, y, 200, y);
    
    y = y + 2;
  }

絵の動きのスピードはsetup関数でframeRate()関数を使って変更する。

変数
変数は、数字（や文字列）を入れる名前の付いた箱である。 processingではプログラム内で初めて変数を使用する場所で変数の型と名前を宣言する必要がある。 使用する変数の数に制限はない。

        int    y;

ここでintが型、yは変数名である。 変数を2つ以上使う場合は続けて次の行に型、変数名を書けばよい。 変数名には英数字を使う。 変数の型には

• int
• float
• string
• boolean

がある。この授業ではint型をもっとも使用する。

代入文
変数には数値などの値が格納される。格納される値はその時々で変わることができる。 変数を使うと相対的な表現ができプログラムが幅の広いものになる。 変数に値を格納するには、代入文を使う。代入文は
変数名　=　式 ;
の形式を取る。例えば、次のように使う。

i = 10;
j = 20;
j = i + 5;
i = j;

代入文を使って変数に値が代入されると、それ以降、その変数は格納された値と同じものとして評価される。

条件文を使ったプログラム

上のプログラムではyの値が増え続けるだけなので、画面の外に出たらもう一度表示するように変更する。
ある条件に合致した場合にのみ処理を行うようにする構文を条件文という。

  void setup() 
  {
    size(200, 300);
  }

  int y;

  void draw()
  {
    background(255);
    line(0, y, 200, y);

    y = y + 2;

    if (300 < y) 
    {
        y = 0;
    }
  }

このプログラムでは条件文（if文）で、yの値が300より大きくなると0に戻るようになっている。
条件文は次のように書く

if  (条件式)  {
    文；
　　　 :
}

構文がifで始まるので、if文とも言う。 ifに続く()内に条件式を書き込む。条件式が真（合ってる）であれば、{}で括られた部分の文を実行する。 条件式が偽（正しくない）であれば、{}の部分は実行せずに次にいく。

条件式は2つの変数の大小を比較するときに使い、比較演算子（>、<、==など）を使う。 条件式は結果が正しければ真（１）を返し、正しくなければ偽（１以外）を返す。 よく使う条件式は、次のものがある。