Processing入門web3-4

このページの内容

整数型データ（int型データ）の確認
実数型データ（float型のデータ）
データの切り捨てについて
暗黙的なデータ型の指定
String型（文字列型）
text()
textSize()
ランダムな値
データ型の変換（型キャスト）
色々な色のクマさん

整数型データ（int型データ）の確認

整数とは、0に１を足したり引いたりすることで得られる数値です。簡単にいえば、少数を含まない数値です。具体的には-1、-2、1、0、1、2、3といった数値のことです。
下記は、二行目がエラーになります。

int x;
x = 1.5;  //int型の変数は実数を扱えないのでエラーになる。
println(x);

実数型データ（float型のデータ）

floatは実数を扱うためのデータ型です。実数とは整数に少数を加えた数値のことです。具体的には、-0.5、-0.1、0、1.1、2.3、3.5、4.2、といった数値のことです。
上記例でエラーになった1.5のような数値を扱うには、下記のようにデータ型をfloat型で宣言します。

float x;
x = 1.5;
println(x);

この例はエラーになりません。確かめてみましょう。

データの切り捨てについて

下記を実行するとどうなるでしょうか？　答えは「１」になります。３を２で割った答えは１．５ですが、変数xは整数型で宣言されていて少数を扱えないため、小数点以下が切り捨てられてしまうのです。

int x;
x = 3/2;
println(x);

では下記のようにするとどうでしょうか？

float x;
x = 3.0/2.0;
println(x);

変数xは実数型なので、小数点以下の数値を扱うことができます。そのため１．５という正しい答えを得ることができます。

暗黙的なデータ型の指定

下記のようにした場合、答えはどうなるでしょうか？　１．５となるはずですが、そうはならないのです。

float x;
x = 3/2;
println(x);

上記プログラムの答えは、１．０となります。これは整数型で計算して答えを得てから、その答えを実数型の変数xに入れているからです。つまり、「3/2」という計算が整数で行われるため、その答えは小数点以下が切り捨てられて「１」になり、その「１」という数値が実数型の変数xに代入されてしまうのです。
上記プログラムは、下記と同じ意味になります。

int x;
x = 3/2;	//整数型で計算
float y;
y=x;	//整数型で計算し、答えを実数型の変数に代入
println(y);

上記二つのプログラムの問題点は、「x = 3/2」の部分です。なぜなら「3」と「2」が整数型の数値とみなされてしまい、「3/2」の答えも整数型で求められ、答えが1.5ではなく1になってしまうからです。この場合、正しくは「x = 3.0/2.0」と書かねばなりません。こう書けば、「3.0」と「2.0」は実数型の数値とみなされ、その答えも実数値で正確に求めることができます。
こういったミスが起きないよう実数を扱う際には、1.0、2.0、3.0というように少数点を省かずに書きましょう。

String型（文字列型）

String型では文字列を使用できます。下記は、コンソールに文字列を表示するプログラムです。

String s;
s = "language";
println(s);

String型を用いれば、日本語を表示することもできますが、その方法はあとで説明します。

text()

文字列を画面に表示する際には、text()という命令を使います。パラメーターには表示する文字を格納した変数や表示位置を指定します。４つ目と５つ目のパラメーターは省略することができます。

text(文字列変数 , 表示する位置の左端のx座標 , 表示する位置の下端のy座標);

text(文字列変数 , 表示する位置の左端のx座標 , 表示する位置の下端のy座標 , 文字列を表示するx軸上の範囲 , 文字列を表示するy軸上の範囲);

下記がそのプログラム例です。

size(200,200);
String s;
s = "language";
text(s,100,100);

結果は下記のようになります。

textSize()

text()で表示するテキストのサイズはtextSize()という命令で指定することができます。またfill()を使って色をつける事もできます。その例を下記にあげます。

size(400,200);
String s;
s = "language";
textSize(50);
fill(0,0,0);
text(s,100,100);

結果は下記になります。

ランダムな値

ランダムな数値、というのはとても便利です。これを利用すると、プログラムを起動するたびに出力するクマさんの毛皮の色をランダムに変えたり、クマさんが動く方向を変えるといった処理を変えることができます。

ランダムな数値を得るにはrandom()という命令を使います。

random(ランダムな値の下限値 , ランダムな値の上限値);

random(ランダムな値の上限値);

例を下記にあげます。

float a;
for (int i=0; i<10; i++) {
  a = random(100);
  println(a);
}

実行してみましょう。０から１００の範囲でランダムな数値が十回出力されるはずです。
ランダムな値の応用例は、次の次の項で説明します。

データ型の変換（型キャスト）

random()という命令によって得られる値は実数型です。実数型では都合の悪いときがあります。例えば色をランダムで指定したい時など、０から２５５の範囲の整数値が欲しいでしょう。そういうときには、データ型の変換を行います。
下記がその例です。３行目にある(int)が、データ型を変換する処理です（「型キャスト」と呼ばれることもあります）。これにより、実数型の値を整数型に変更することができます。

int a;
for (int i=0; i<10; i++) {
  a = (int)random(100);
  println(a);
}

上記を実行してみましょう。ひとつ前の結果とは異なり、ランダムな整数値が得られるはずです。

色々な色のクマさん

ではランダム値を利用して、色々な色のクマさんを作ってみましょう。
下記プログラムでは、5匹のクマさんを出力します。それに対応して、下記の配列も要素を5とします。クマさんのx座標を格納する配列x、クマさんのy座標を格納する配列y、クマさんの色の赤みを格納する配列r、クマさんの色の緑の強さを格納する配列g、クマさんの色の青みを格納する配列bがそれです。
x[0]、y[0]、r[0]、g[0]、b[0]には１つ目のクマさんのx座標、y座標、毛皮の赤み、毛皮の緑の強さ、毛皮の青みを格納し、x[1]、y[1]、r[1]、g[1]、b[1]には２つ目のクマさんのx座標、y座標、毛皮の赤み、毛皮の緑の強さ、毛皮の青みを格納し、、、（省略）、、、x[4]、y[4]、r[4]、g[4]、b[4]には５つ目のクマさんのx座標、y座標、毛皮の赤み、毛皮の緑の強さ、毛皮の青みを格納します。

int[] x;//クマさんのx座標
int[] y;//クマさんのy座標
int[] r;//クマさんの毛皮の赤み
int[] g;//クマさんの毛皮の緑の強さ
int[] b;//クマさんの毛皮の青み

void setup() {
  size(800, 600);
  x = new int[5];
  y = new int[5];
  r = new int[5];
  g = new int[5];
  b = new int[5];
  
  for (int i=0; i<5; i++) {
    x[i] = 0;
    r[i] = (int)random(255);
    g[i] = (int)random(255);
    b[i] = (int)random(255);
  }
  y[0]=100;
  y[1]=200;
  y[2]=300;
  y[3]=400;
  y[4]=500;
}
void draw() {
  background(200, 200, 200);  

  x[0]++;
  x[1]+=2;
  x[2]+=3;
  x[3]+=4;
  x[4]+=5;

for(int i=0;i<5;i++){
  kumasan(x[i], y[i], r[i], g[i], b[i]);
  
}


}

/*
 クマさんを出力する関数
 centerX:顔の中心のx座標
 centerY:顔の中心のy座標
 red:毛皮の色の赤み
 green:毛皮の色の緑の強さ
 blue:毛皮の色の青み
 */
void kumasan(int centerX, int centerY, int red, int green, int blue) {
  fill(red, green, blue);  //毛皮の色
  ellipse(centerX- 50, centerY -60, 60, 60);  //左耳
  ellipse(centerX+ 50, centerY -60, 60, 60);  //右耳
  fill(250, 111, 96);  //ピンク
  ellipse(centerX- 50, centerY -60, 30, 30);  //左耳の内側
  ellipse(centerX+ 50, centerY -60, 30, 30);  //右耳の内側
  fill(red, green, blue);  //毛皮の色
  ellipse(centerX, centerY, 150, 150);  //顔
  fill(0, 0, 0);  //黒
  ellipse(centerX- 20, centerY -20, 20, 40);  //左目
  ellipse(centerX+ 20, centerY -20, 20, 40);  //右目
  line(centerX- 20, centerY + 30, centerX+ 20, centerY + 30);  //口
}

上記の実行結果は下記になります。画面を長押ししてリロードするたび、クマさんの色が変わります。
（画面の長押しによるリロードや、クリックやタップによる停止はweb上での説明用に実装したものです。上記のコードにはそれらの機能は含まれません）

3-4データ型とランダム