変数について
変数とは、ある値をコンピュータのメモリに保存しておき、プログラムのなかで再利用できるようにするための仕組みです。
変数の作成
変数を作成するには、データ型、変数の名前、変数の値を考えて設定します。
変数を使う前には必ず変数の宣言をします。宣言とは、コンピュータのメモリにデータの値を格納する領域を確保することです。
変数の宣言をするためには格納する値にあったデータ型を定義し、名前を決めて値を設定します。
変数の宣言は以下のように記述します。
データ型 変数の名前 = 値;
例)
int x = 10;
上の例は以下のように記述することができます。
int x;
x = 10;
ある変数に格納できる値や種類はデータ型で指定します。データ型には以下のようなものがあります。
・整数(小数点以下のない数値を扱うデータ型 マイナスの値をとることができる) int など
・浮動小数点(小数点を扱えるデータ型) float など
・文字 char
・単語 String
・画像 PImage
・フォント PFont
など
変数には任意の名前を付けて設定をします。データの内容がわかりやすい名前を選んで設定しましょう。
変数を使った描画
それでは、変数を使って基本図形を描画してみましょう。
int d = 100; //変数の宣言
size(400,400);
ellipse(100,200,d,d);
ellipse(200,200,d,d);
ellipse(300,200,d,d);
上の例では1行目の int d = 100; にて変数の宣言が行われています。
int で整数のデータ型を定義し、変数の名前を d とし、変数 d に 100 という整数の値を代入しています。
変数を使うことで3つの円が同じ値を受け取ることができます。
練習課題08-01:変数を2つ作成し、x座標とy座標に変数を使用した4つの方形を描いてみましょう。
コンソールへの表示
Processingではプログラミングによる各種の値をコンソールに表示できます。コンソールとはスケッチを記述しているエディタの下の部分です。
コンソールへの値の表示には以下の関数を使用して記述します。
println(値);
例1)
int x = 1;
println(x);
コンソールにはxの値である1が表示されます。
それでは、コンソールを活用したスケッチを描いてみましょう。
int x = 0;//変数の宣言
int y = 0;//変数の宣言
void setup(){
size(400,400);
}
void draw(){
x=mouseX;
y=mouseY;
println(x);//コンソールへの値の表示
println(y);//コンソールへの値の表示
}
上のプログラミングでは2種類の変化する値がコンソールに表示されますが、何の値かわかりにくいので、少し改良してみましょう。
以下のように記述することで何の値を表示するのかを明示することができます。
println(“値の説明” + 値);
例)
println(“x:” + x);
それでは、先ほどのスケッチを改良してみましょう。座標の変化がわかりやすいようにラインの表示も加えてみましょう。
int x = 0;//変数の宣言
int y = 0;//変数の宣言
void setup(){
size(400,400);
}
void draw(){
background(255);
x=mouseX;
y=mouseY;
println("x:"+x);//コンソールへの値の表示
println("y:"+y);//コンソールへの値の表示
line(x,0,x,height);
line(0,y,width,y);
}
上のスケッチではwidthとheightというシステム変数を使用しています。システム変数とはProcessingによってあらかじめ設定されている変数です。
width size関数で設定されたウィンドウの幅
height size関数で設定されたウィンドウの高さ
練習課題08-02:変数を2つ作成し、マウスのx座標とy座標を中心にした円が描画されるスケッチを描く。 その際、円は画面に同時に1個だけ表示されていること。またx座標とy座標の値をコンソールに出力すること。
演算子
演算子とは各種の演算を表わす記号のことです。以下のような演算子があります。
= 代入する 例)x = 0;
+ 足す 例)x = x + 1;
– 引く 例)x = x – 1;
* かける 例)x = x * 2;
/ 割る 例)x = x / 2;
また演算子を組み合わせた記述もよく使われます。
+= 例)x += 1; x=x+1と同じ計算結果となる
-= 例)x -= 1; x=x-1と同じ計算結果となる
++ 例)x++; x+=1あるいは、x=x+1と同じ計算結果となる
— 例)x–; x-=1あるいは、x=x-1と同じ計算結果となる
それでは、これまで学んだことを組み合わせたスケッチを描いてみましょう。
int x = 0;//変数の宣言
int y = 0;//変数の宣言
int d = 40;//変数の宣言
void setup(){
size(128,128);
}
void draw(){
background(0);
x=mouseX;
y=mouseY;
println("x:"+x);
println("y:"+y);
noStroke(); // 線を消す
fill(x+y,0,0);//塗りの色
ellipse(width/4,height/4,d,d);
fill(0,x+y,0);
ellipse(width/2,height/2,d,d);
fill(0,0,x+y);
ellipse(width*0.75,height*0.75,d,d);
}
上の例ではカラーモードがRGBの場合、各色が256色であるのを利用してウィンドウサイズを256の半分の128ピクセルとし、マウスのx座標とy座標の値の変化が円の色の変化に反映されるようにしています。
練習課題08-03:変数を使い、x座標とy座標の変化を利用したグラフィックス表現をスケッチで描く。