[Work/Class/Java with Processing/2_ProcessingBasic]

アート系学生のためのJAVA with Processing - その2-1 Processingの基礎

導入

本記事では，Processingの基礎について述べる．

Processingの基礎の基礎

Processingを起動し，以下のコードを入力する． 

size(640, 480);
//幅640，高さ480のキャンバスを開く

colorMode(RGB, 255); 
//色モードをRGBにする

fill(100, 200, 255); 
//これから描画する図形の中の色をRGBで，100, 200, 255にする

ellipse(100, 200, 50, 50);
//左から100，上から200の位置に，幅50，高さ50で，指定された色の円を描く

左上の実行ボタンを押すと，以下のようになる．

最初のコードの実行状態

行とコメントアウト

  1. 一行で一つの命令が実行される．
  2. 上から下へ順々に実行される．(下の行の描画で上の行の描画が上書きされる)
  3. 行の最後にはかならず「;」セミコロンを入れる．
  4. 行の中で「//」以降の部分は実行されない．
  5. 「/*」と「*/」で囲まれた部分は実行されない．

色々な図形の描画

  • ellipse(中心のx座標，中心のy座標，幅，高さ);
  • line(線を開始するx座標，線を開始するy座標，線が終わるx座標，線が終わるy座標);
  • rect(四角の左上のx座標，四角の左上のy座標，四角の幅，四角の高さ);
  • triangle(一つ目の点のx座標，一つ目の点のy座標，二つ目の点のx座標，二つ目の点のy座標，三つ目の点のx座標，三つ目の点のy座標);

変数

変数とは，自由に名前を付けられる値の格納庫である．

  • 使用する場合は，その変数の一番最初の登場時のみ，変数形をつけて「変数を使う宣言」を行う．
  • とりあえず，整数を表す整数形「int」を使う．
  • 「a = 0;」とは，「変数aに0を代入する」という意味．
int x = 100; //変数xを宣言して，100を代入
int y = 200; //変数yを宣言して，200を代入
int w = 20; //変数widthを宣言して，20を代入
ellipse(x, y, w); //与えられた変数に従って円を描く

変数はプログラムの中で格納されている値を変更することが出来る． 

int x = 50; //50が変数xの中に入る
int y = 40; //40が変数yの中に入る
int w = 20;
ellipse(x, y, w); //50, 40の位置に幅20の円を描く
x = 100; //xの中身を100に変更．宣言はしなくてもいい．
y = 200; //yの中身を200に変更
w = 40; //widthの中身を40に変更
ellipse(x, y ,w, w); //変更された値で円を描く

四則演算

int a = b + c; //足し算 b足すcをaに代入
int a = b – c; //引き算 b引くcをaに代入
int a = b * c; //掛け算 b掛けるcをaに代入
int a = b / c; //割り算 b割るcをaに代入

割り算の時に0で割るとエラーになる．

for文

for(int i=0; i<10; i++){
	//この中に書いてある処理を繰り返す
}

ここで，「int i=0;」はiという変数の宣言文である．
つまりfor文の中身は以下の内容で成り立っている．

  1. 変数iを宣言して0を代入し，
  2. 変数iが10以下の場合，
  3. i++(iを一つずつ増加させながら)，繰り返す

for文を実際の描画に使うと以下のようになる． 

size(640, 480);
colorMode(RGB, 255); 
fill(100, 200, 255); 
      
for(int i=0; i<10; i++){
   //中でiを使う事が出来る
   int x = i * 10; //xはiの10倍
   int y = i * 20; //yはiの20倍
   ellipse(x, y, 20, 20);
   //左に10, 下に20ずつずれながら10回円が描画される．
}

上のコードを実行すると，以下のような表示になる．

for文を使ったコードの実行状態