processingで日本語

# processingで日本語

# プログラム中の日本語を読めるようにする

processingの設定preferencesから、日本語入力機能にチェックを入れる。必要なら、processingの再起動。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/510257/9a0e22a8-23d0-098d-2b6d-262a4f0c4313.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/510257/4e968918-81e0-166d-8d92-2b2da2d8ee1d.png)

# 使用可能なフォントを調べる（方法１）
ツール＞フォント作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/510257/20e7a86d-6d9c-c5d7-c579-2fdaf091dd61.png)
このリストが、そのPCで使えるフォント一覧で、このアルファベットの名前を使って、プログラム中で指定することが可能である。

# 使用可能なフォントを調べる（方法２）
```java
printArray(PFont.list());
```
上記を実行すると、下部に一覧が表示される。
が、一覧が多すぎる（５００以上）と表示しきれない。
そんなとき（ファイルに書き出す以外では）下記のように書けば、部分表示ができる。

```java
for(int i=400; i<500; i++){
  print(i);
  println(PFont.list()[i]);
}
```

# 表示フォントを指定する（方法１）
「使用可能なフォントを調べる（方法１）」で調べた、英語名で指定する。
```java
size(800,800);
PFont font=createFont("YuMin-Demibold",200);

textFont(font);
background(255,255,0);
fill(0,0,0);
text("リゲイン", 0, height/2);
scale(0.3);
text("バブル時代の古のドリンク", 0, 2000);
```

# 表示フォントを指定する（方法2）
「使用可能なフォントを調べる（方法１）」で調べた、番号で指定する。
（番号はPC環境によって変わる）

```java
size(800,800);
PFont font=createFont(PFont.list()[1015],200);// <-----変更

textFont(font);
background(255,255,0);
fill(0,0,0);
text("リゲイン", 0, height/2);
scale(0.3);
text("バブル時代の古のドリンク", 0, 2000);
```

# 表示フォントを指定する（方法3）
フォントが使える環境で、フォントを画像として保存し、
他のフォントがない環境でも同様に再現できるようにする方法。

①プログラムを一度、保存する。
②ツール＞フォント作成、から希望するフォントサイズ（ここでは32）を指定して、「文字」を押す。
このままでは、日本語が含まれない。
サイズや、以下のオプションによって、生成時間が変わる。フリーズするので、要注意。
日本語に関連する物を選ぶには、以下のチェックを入れるのが良さそうだが、不要なものは外す。
https://blanche-toile.com/web/processing-font
・Basic Latin 半⾓英数
・CJK Symbols and Punctuation 句読点、全⾓括弧
・Hiragana ひらがな
・Katakana カタカナ
・CJK Unified Ideographs 統合漢字
・Halfwidth and Fullwidth Forms 全⾓英数、全⾓記号、半⾓カナ

vlwファイルを作成する。
vlwファイルはプログラムフォルダの中のdataフォルダに保存される。
例：YuMin-Demibold-32.vlwが作成される。上記条件で２１MBもある。

③vlwファイルをプログラムから読み込んで使用する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/510257/c4b8a850-1dcc-6a84-4b9b-748c73fbf0da.png)

```java
size(800,800);
PFont font=loadFont("YuMin-Demibold-32.vlw");

textFont(font);
textSize(200);
background(255,255,0);
fill(0,0,0);
text("リゲイン", 0, height/2);
scale(0.3);
text("バブル時代の古のドリンク", 0, 2000);
```

# ひらがなの個別表示
文字も、画像のように移動＆回転することができる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/510257/d36f0658-8d07-3ae7-86e5-785514f116bd.png)

```java
void setup() {
  size(800, 800);
  PFont font=createFont("YuMin-Demibold",200);
  textFont(font);
}

void draw() {
  background(255, 255, 0);
  fill(0, 0, 0);
  translate(400,400);//移動
  rotate(mouseX);//回転
  text("あ", -100, 100);//文字の左下が回転中心なので、回転中心をずらす
}
```

複数を個別に移動回転させる場合は、以下のように、pushとpopで挟み込んで使用すると良い。
移動や回転の状態は、通常の使用では、効果が積み重なる。
効果が積みかさらないようにするためには、移動と回転の状態（＝行列）をセーブ(push)しておいて、ロードしたいときにpopする。
まとめると、描画命令の前後で、pushとpopで挟む使い方として、理解すると楽。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/510257/a63e38aa-724b-42a1-21d1-e4a87e5cccb6.png)

```java
void setup() {
  size(800, 800);
  PFont font=createFont("YuMin-Demibold",200);
  textFont(font);
}

void draw() {
  background(255, 255, 0);
  fill(0, 0, 0);
  float w;

push();
  translate(200,400);
  rotate(mouseX);
  w = textWidth("あ")/2.0;
  text("あ", -w, w);
pop();

push();
  translate(400,400);
  rotate(mouseX*0.1);
  w = textWidth("い")/2.0;
  text("い", -100, 100);
pop();

push();
  translate(600,400);
  rotate(mouseX*0.2);
  w = textWidth("う")/2.0;
  text("う", -100, 100);
pop();
}
```