Processingを使う

# はじめに
Processingの使い方を記載します。
Processingはプログラミングの学習を行うための言語、および開発環境です。
図形の描画が簡単に行えるため、目に見える形で実行結果を確認しながら
プログラミングの学習をすすめることができます。

# 基本形
setup関数で初期設定をします。スケッチの最初に1回だけ実行されます。
draw関数はフレーム更新毎に実行されます。
frameRate関数でフレームレート(1秒間に何回フレーム更新するか)を指定します。
なお、静止した画面のみの場合はdrawは不要です。

```java
void setup() {
  size(640, 480); /* width, height */
  frameRate(30);  /* fps */
}

void draw() {
}
```

# 座標系
ウィンドウの左上を原点とする座標系になります。
サイズはsize(width, height)で設定します。
幅、高さはそれぞれwidth,height変数で参照できます。

![image](https://qiita-image-store.s3.amazonaws.com/0/84205/dc2f34be-50ba-e1a9-cdbf-482f2bcf9778.png)

# 色
色はRGBで指定します。R,G,Bそれぞれ0~255の範囲で指定します。
background関数で背景色を指定します。

```java
void setup() {
  size(640, 480);        /* width, height */
  background(0, 0, 0);   /* RGB = 0, 0, 0 = black */
}
```

色空間を変更できます。HSB色空間にすることもできます。
サーモグラフィーのような表示をするときに便利です。

colorMode関数の第2～第4引数はH,S,Bそれぞれの値の最大値を指定します。
最大値に100を指定すると色の値の範囲が0~100になります。

```java
void setup()
{
  PImage img1 = createImage(100, 1, RGB);  
  PImage img2 = createImage(100, 1, RGB);  
  size(600, 120);
  colorMode(HSB, 100, 100, 100);
  for (int i=0; i<100; i++) {
    img1.pixels[i] = color(i, 100, 100);
    img2.pixels[i] = color(i*0.68, 100, 100);
  }
  img1.updatePixels();
  img2.updatePixels();
  image(img1, 0, 0, width, height/2);  
  image(img2, 0, height/2, width, height/2);  
}
```

![1.JPG](https://qiita-image-store.s3.amazonaws.com/0/84205/79431b47-4af0-cec0-15b2-a2bae1df11ba.jpeg)

上側はHueのみを0~100の範囲で変化させています。
下側はHueのみを0~68の範囲で変化させています。

# 図形描画
## 直線
line(sx, sy, ex, ey)関数で直線を描画します。始点のx,y座標と終点のx,y座標を指定します。
線の幅はstrokeWeight関数で指定します。線の色はstroke関数で指定します。

```java
void setup() {
  size(640, 480);        /* width, height */
  background(0, 0, 0);   /* RGB = 0, 0, 0       = black */
  stroke(255, 255, 255); /* RGB = 255, 255, 255 = white */
  strokeWeight(1);
  line(width/4, height/4, width*3/4, height/4);
  strokeWeight(5);
  line(width/4, height/3, width*3/4, height/3);
  strokeWeight(10);
  line(width/4, height/2, width*3/4, height/2);
}
```
![1.JPG](https://qiita-image-store.s3.amazonaws.com/0/84205/271b80be-e08b-45e2-2d0c-e70829a1bd48.jpeg)

## 円
ellipse(x, y, width, height)関数で円を描画します。
中心のx,y座標と円の幅width、高さheightを指定します。
width!=heightのときは楕円になります。

円のように内側と外側がある図形は

- 内部
- 境界線

をどのように扱うかが指定できます。

内部を塗りつぶす場合はfill(R,G,B,A)関数で指定します。Aはアルファチャネルです。
Aで背景とのブレンド割合を指定します。 (色) = (内部)*A/255 + (背景)*(1-A/255)
A=255で内部のみ、A=0で背景のみになります。
noFill関数で内部塗りつぶしなし(=背景)になります。

noStroke関数で境界の描画を無効にします。

```java
void setup() {
  size(640, 480);            /* width, height */
  background(255, 255, 255); /* RGB = white */
  fill(255, 255, 0, 255);    /* RGB = yellow, A = noblend */
  //noFill();
  stroke(255, 0, 0);         /* RGB = red */
  strokeWeight(2);
  //noStroke();
  ellipse(width/2, height/2, height/3, height/3);
}
```
![q.JPG](https://qiita-image-store.s3.amazonaws.com/0/84205/817596e5-c581-8d5f-4c34-8e1e6411ba85.jpeg)

# 入力
## マウス
マウスの座標はmouseX, mouseYで参照できます。
マウスボタンが押下されるとmousePressedがtrueになります。

```java
void setup() {
  size(640, 480);  /* width, height */
}

void draw() {
  background(255, 255, 255); /* white */
  if (mousePressed) {
    ellipse(mouseX, mouseY, height/3, height/3);
  }
}
```
![1.JPG](https://qiita-image-store.s3.amazonaws.com/0/84205/ce984dc2-bed1-6200-c355-22ca43ef77fb.jpeg)

# コンソール出力
printでコンソール出力できます。printlnは改行付きになります。
nfsで整数部、小数部の長さを指定して文字列に変換できます。

```java
print("Hello w/o new line");
print("\n");
println("Hello w/ new line");

float p =  12.34;
float n = -56.789;
println("p=" + p);
println("p=" + nfs(p, 3, 1));
println("n=" + nfs(n, 3, 1));

出力結果
-------------------
Hello w/o new line
Hello w/ new line
p=12.34
p= 012.3
n=-056.8
```

# 動画の作成
次のstepで動画を作成します。

1. saveFrameでprocessingのFrameデータを静止画として保存します。
2. 外部ツール(e.g. ffmpeg)で静止画を動画に変換します。

saveFrameでprocessingのデータを静止画として保存します。

```java
int x = 0;
void setup() {
  frameRate(30);
}
void draw() {
  background(204);
  if (x < 100) {
    line(x, 0, x, 100);
    x = x + 1;
  } else {
    noLoop();
  }
  // Saves each frame as line-000001.png, line-000002.png, etc.
  saveFrame("line-######.png");
}
```
静止画の保存先はCtl-kで開くことができます。

次にffmpegで静止画を動画に変換します。

準備

 - ffmpegをインストールします。
 - ffmpeg.exeがあるフォルダのパスを環境変数に設定します。
 - コマンドプロンプトを開いて、静止画が保存されたフォルダに移動します。

静止画をgif animationに変換します。
-iで入力ファイル名を、-rでフレームレートfpsを指定できます。出力ファイル名は一番最後の文字列out.gifです。

```
ffmpeg -i line-%06d.png -r 30 out.gif
```

静止画をmp4に変換します。

```
ffmpeg -i line-%06d.png -r 30 out.mp4
```

YouTubeのリンクを先頭画像を表示して埋め込みます。
リンクのURLが次の場合

```
https://youtu.be/HIOwBN07ZaY
```

HIOwBN07ZaYの部分を使って以下のように記載します。

```
[![IMAGE ALT TEXT HERE](http://img.youtube.com/vi/HIOwBN07ZaY/0.jpg)](http://www.youtube.com/watch?v=HIOwBN07ZaY)
```

実際に記載すると次のように表示されます。
[![IMAGE ALT TEXT HERE](http://img.youtube.com/vi/HIOwBN07ZaY/0.jpg)](http://www.youtube.com/watch?v=HIOwBN07ZaY)


```java
```