[Processing×Java]   変数の使いかた

この記事はプログラムの構造をProcessingを通じて理解していくための記事です。
今回は変数について書いていきます。

![スクリーンショット 2020-06-30 15.13.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654004/12290a28-83d8-f8af-fdc8-5efed0ce3083.png)

目次
0.変数とは何か
1.変数の種類
2.変数を使ったプログラムの例

#0.変数とは何か

変数は**データをいれる箱**のようなもの。

```variable00.java
//変数aに5を代入する。
int a = 5;
//変数bに10を代入する。
int b = 10;

//a + b　の結果を表示する。
println(a + b);
```
```
15
```
**注意**:
Javaで変数を使うときは、その変数が**どんな種類なのか**を指定する必要がある。
NG　:　`a = 5`
OK　:　`int　a = 5`

種類には整数を表すint,浮動小数点数を表すfloat,文字列を表すString、色を表すcolorなどがある。
参考記事:
[図で理解するJavaの参照](https://qiita.com/hysdsk/items/2e94c8722dc8f950e77c)

**Point**:
プログラムでは、イコール記号(=)は、**代入**を示す。
**左向きの矢印**だと考えるとわかりやすい(かも)。

`int　a ⬅︎ 5`



#1.変数の種類

変数には　**Built-in variables** 　と　**User-defined variables** 　がある。



```variable01.java
size(600,400);
rect(0,0,width-100,height-100);

```
![ex01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654004/760940bb-e536-0fb1-48b6-93fbee80780f.png)


**Point**　:　**Built-in variables**
あらかじめ用意されている変数。
width(=画面の横幅),height(=画面の縦幅),mouseX(=マウスのX座標),mouseY(=マウスのY座標)...など。

この場合、
`width = 600`
`height = 400`
を自分で定義しなくても使える。ラッキー！


**Point**　:　**User-defined variables**
自分で定義して使う変数。
使用方法:①**宣言**→②**初期設定**→③**使用**

使用方法(例)
①**宣言**(こんな変数使おうと思ってます！)
`int a;`
②**初期設定**(この変数はこんな値にしときます！)
`a = 10;`
③**使用**(それじゃあ使います...！)
`println(a);`


※宣言と初期設定は同時にできる
(例)
`int a = 5;`




#2.変数を使ったプログラムの例

#####◯mouseX,mouseYを使ったプログラム

```variable02.java
//プログラムが始まった時に1回だけ実行される。
void setup(){
//画面の大きさを決める
  size(600,400);
}

//無限ループ
void draw(){
//マウスの場所によって、四角形の面積が変わる。
  rect(0,0,mouseX,mouseY);
}
```

![スクリーンショット 2020-06-30 15.16.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654004/c30393e0-d86e-e999-10f8-828900c98609.png)



**Point**　:　
setup() は{}の中の処理を1回のみ繰り返す。(初期設定みたいなもの)
draw() は{}の中の処理を無限に繰り返す。(無限ループ)

rect(四角形の左上端のX座標、四角形の左上端のY座標、横の辺の長さ、縦の辺の長さ);


#####◯mouseX,mouseYを使ったプログラム②


```variable03.java
//最初に1回だけ繰り返す
void setup(){
//画面の大きさを決める
  size(510,510);
}
//無限ループ
void draw(){
  //淵を描かない
  noStroke();
  //図形の中を何色で塗るか決める→(R,G,B)
  fill(mouseX/2,mouseY/2,255);
  //円の中心の座標と横幅、縦幅をきめる。
  ellipse(mouseX,mouseY,30,30);
}
```
![スクリーンショット 2020-06-30 15.13.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654004/12290a28-83d8-f8af-fdc8-5efed0ce3083.png)


#####◯自分で変数を定義して、円を横に移動させるプログラム

```variable04.java
//float型の変数xposを定義する。
//xのポジションを表す変数。
float xpos = 0;

void setup(){
  size(510,200);
  background(0);
}

void draw(){
  //円の中は塗りつぶさない。
  noFill();
  stroke(100,230,random(180,255));
  //円のx座標はxposによって決まる。
  //円の大きさはランダムにする。
  ellipse(xpos,height/2,random(100),random(100));
  //xposを10ずつ増やしていく。
  xpos += 10;

}

```
![スクリーンショット 2020-07-02 9.20.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654004/af140317-fb32-9b4c-afbc-2d901f1df1e3.png)


#####◯自分で変数を定義して、円を横に移動させるプログラム②

```variable04.java
//float型の変数xposを定義する。
//xのポジションを表す変数。
float xpos = 0;

void setup(){
  size(510,200);
}

void draw(){
  //ループの度に、背景を塗り直してみる。
  background(0);
  //円の中は塗りつぶさない。
  noFill();
  stroke(100,230,random(180,255));
  //円のx座標はxposによって決まる。
  //円の大きさはランダムにする。
  ellipse(xpos,height/2,random(100),random(100));
  //xposを10ずつ増やしていく。
  xpos += 10;

  //円が画面から飛び出したらまた左から出てくるようにする。
  if(xpos > width){
    xpos = 0;
  }
}
```
![ezgif.com-gif-maker (1).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654004/a49b77aa-c8dc-eec6-a077-13d47aa147df.gif)



#最後に

読んでいただきありがとうございました。
より良い記事にしていくために御意見、ご指摘のほどよろしくお願いいたします。