みなさん，こんにちは．
おかしょです．
この記事では，Processingのプログラミングのやり方を解説していきます．
実際にプログラムを動かしながら確認していくので，参考にしてみてください．
この記事を読むと以下のようなことがわかる・できるようになります．
- Processingのプログラムの書き方
この記事を読む前に
ProcessingについてやProcessingのインストール方法を知りたい方は以下の記事を参考にしてください．
プログラム構成
まずはProcessingのプログラムがどのような構成で書かれるのかを説明します．
void setup()
{
}
void draw()
{
}上記のように，setupとdrawの二つで構成されます．
それぞれの特徴を簡単に説明すると
setupでは，描きたい図の準備を行い，drawではdraw内のプログラムを繰り返して，図を更新していきます．
具体的にどのようにすれば，図を描けるのかを解説していきます．
setup関数
setup関数では必ず表示するwindowの設定を行います．
最低でもwindowのサイズと背景を設定する必要があります．
void setup()
{
background(255);
size(500, 500);
}
このようなプログラムを実行すると，真っ白なwindowが表示されます．
プログラム中のbackgroundではwindowの背景の色を指定できます．
()内の数値を工夫することによって，様々な色に変更できます．また，透明度も設定できます．
上記のプログラムでは255としているので白色になります．この値を0に近づけるほど黒くなっていきます．
backgroundの下のsizeではwindowの大きさを指定することができます．
二つの引数は，それぞれwindowの横幅と縦を表しています．単位はpixel単位になります．
さらに引数を増やすことで，3次元に描画できるようにすることも可能です．
今回は(500, 500)としているので正方形のwindowが表示されます．
draw関数
draw関数の中身はどのような図を作りたいのかによって変わってくるのですが，今回は適当に線を引いてみます．
float a = 0.0;
void setup()
{
background(255);
size(500, 500);
}
void draw()
{
translate(250,250);
background(255);
a = a+PI/60;
rotate(a);
line(0, 0, 200, 0);
}このプログラムを実行すると，時計回りに黒い線が回転します．
setup関数内は先ほどのプログラムと同じなので，解説は割愛します．
draw関数内の最初にtranslateというコマンドを使用しています．
このコマンドは座標の原点を移動することができます．
今回は引数に(250,250)と入れているので，座標の原点をx軸方向に250，y軸方向に250移動するという意味になります．
次にbackground関数を使って，白色に塗りつぶしています．
これを入れることによって，描画されたものがリセットされるのでアニメーションのように動作させることができます．
一行飛ばして，rotateでは座標軸を回転させることができます．
引数に回転させる角度をradian単位で与えることで，任意の角度に回転させることができます．
このプログラムではaというfloat型の変数をプログラムの冒頭で定義し，draw関数内でπ/60ずつ増加させています．
そのため，座標軸が時間の経過とともに回転し続けます．
Processingではdraw関数が1秒間に60回動作するため，1秒で半回転，2秒で1回転するようになっています．
このdraw関数の動作周期はframeRateというコマンドを使うことで変更することができます．
最後にlineコマンドを使って線を引きます．
このコマンドでは線の始点と終点を指定しています．
今回は始点を(0,0)，終点を(200, 0)としています．
この座標はtranslateとrotateコマンドによって移動した後の座標になるので，引数の値は変わりませんが線は動き続けます．
その結果，時計回りに2秒で1回転する線が描画することができます．
まとめ
この記事では実際に動作するプログラムを例に，Processingのプログラムの書き方を解説しました．
Processingは学会の発表のアニメーション作成もできます．皆さんも自分の作りたいアニメーションを作ってみてください．
続けて読む
記事の作り方がわかったら，簡単なものを書いてみましょう．
以下の記事では矢印を描く方法を解説しています．
ここで，公開しているプログラムを参考にしてプログラミングの勉強に使用してください．
Twitterでは記事の更新情報や活動の進捗などをつぶやいているので気が向いたらフォローしてください．
最後まで読んでいただきありがとうございました．
コメント