関連項目

Processing：関数

アニメーションするには？

アニメーションの原理は、図形や人物が少しづつ動いて描かれている静止画を高速に切り替えて見せる、パラパラ漫画のようなしくみです。

プログラムでアニメーションをするには、座標をすこしづつずらしながら図形を繰り返し描きます。

いままで習った円**ellipse()や四角rect()**をアニメーションするには、座標を少しづつ変えながら繰り返し描くことになります。

例えば下のプログラムを、円が横（X座標の向き）に動くようにするにはどうしたら良いでしょう？

size(600,400);
ellipse(300,200,10,10);

ellipse(300,200,10,10); を繰り返し実行することと、（）**の中のX座標 300 をすこしづつ増やす（あるいは減らす）と良さそうです。

１．変数を使って座標を増やしたり減らしたりする

ellipse(300,200,10,10);のX座標の 300 のような数字は定数（ていすう）といい、プログラムで書き換えることができません。

プログラムで座標を書き換えるには、定数の部分を変数（へんすう）というしくみに置き換えます。

変数は、本来は自分で好きな名前を付けて「これからこういう名前で使いますよ」という宣言文を書いてから使う必要がありますが、今回はすでにProcessingで用意されているマウスの座標が入っている変数を使うことにします。

Processingのマウス変数には、マウスのX座標が入っている **mouseX** （マウスエックス）と、Y座標がはいってる**mouseY**（マウスワイ）があります。Processingで用意されているので宣言文を書く必要はありませんし、マウスが動くたびに中身をプログラムで書き換えなくても勝手に更新されるとても便利な変数です。このようにすでにProcessingのようなシステムで用意されている変数のことを システム変数 などと言います。

※変数についてもっと知りたい人はここを見てみよう！