Processing4でandroid11 実機デバッグ検証

# はじめに
Processing.orgが新しくなっていた。
以前はProcessing3を利用していたが、android11 実機デバッグの動作検証する。

# 結論
簡単に動く
![00.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2654345/85abd54b-5a9f-a70c-df9a-e534b5d3a1a2.jpeg)

# 環境
Windows 10
processing4.0b8
Xperia 10 III(android 11)
![1.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2654345/1c50f4fb-aecf-817a-0f38-82b7f2068269.jpeg)

# 手順
## (1)processing4の導入
https://processing.org/downloadから「Windows〔Intel 64-bit〕」を選択。
processing-4.0b8-windows-x64.zipがダウンロードされるので解凍する。
解凍後のprocessing-4.0b8-windows-x64/processing.exeを開く。
![0.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2654345/00127e52-a541-e943-8b35-7d9bfc0a9e70.jpeg)

![22.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2654345/72470d33-020d-bea1-eb29-f10c29078bf2.jpeg)
processing.exeを起動すると次のようになる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2654345/d73f9444-2efe-2b40-7721-4cab73bf11cc.png)

## (2)プログラム実行
サンプルを実行することができた。
日本語は文字化けするので、「ファイル>設定>エディタとコンソールのフォント>MSゴシック」に設定した。

プログラム
---
### Processing
```java:SampleProgram.pde
/*================================*
 *システム：パンプキンをスケッチ
 *ファイル：SampleProgram.pde
 *
 *-------------------------------
 *〔変更履歴〕
 *2022/05/04 Usatodo 新規作成
 *================================*/

size(640, 480);
background(255);//背景を白


//====================
//パンプキンをスケッチ
//====================

//====体パーツ====
noStroke();//輪郭線を無効に
fill(205,102,0);//ダークオレンジ3色に塗り潰す
ellipse(270,240,180,200);//円の作成
ellipse(370,240,180,200);//円の作成

fill(255,165,0);//オレンジ色に塗り潰す
ellipse(290,240,140,200);//円の作成
ellipse(350,240,140,200);//円の作成

fill(0,255,0);//緑に塗りつぶす
triangle(320,160,320+12,115,320-12,115);

fill(255,127,0);//ダークオレンジ1色に塗り潰す
ellipse(320,240,80,200);//円の作成

//====顔パーツ====
fill(0);//黒に塗りつぶす
//鼻
triangle(320,230,320+15,260,320-15,260);
//左目
triangle(260,205,260+22,260-15,260-22,260-15);
//右目
triangle(380,205,380+22,260-15,380-22,260-15);
//口
arc(320,280,160,80,0,radians(180));

//前歯
fill(255,127,0);//ダークオレンジ1色に塗り潰す
stroke(255,127,0);//線をダークオレンジ色
strokeWeight(8);//線の太さを変更
strokeJoin(ROUND);//丸い角
rect(320+12,280,10,10);
rect(320-22,280,10,10);

//奥歯
fill(255,165,0);//オレンジ色に塗り潰す
stroke(255,165,0);//線をオレンジ色
strokeWeight(8);//線の太さを変更
strokeJoin(BEVEL);//斜めの角
rect(320+50,280-5,10,10);
rect(320+30,280+30,10,10);
rect(320-60,280-5,10,10);
rect(320-40,280+30,10,10);
```
![2.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2654345/cd56ce9a-0826-dff9-0127-8590088a9f8e.jpeg)

![3.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2654345/db23b23e-254b-2ec5-f5da-750973551dda.jpeg)

## (3)Androidモードを追加
「Java▼」を押すと、「Manage Modes..」があるので選択する。
選択後、「Contribution Manager」が開く。
検索欄に「android」を入力し、「Android Mode for Processing 4 | This mode lets you us...」
を選択し、「↓Install」を押す。インストール完了すると、「Android」が追加される。
![4.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2654345/91670c00-9e25-d56c-7886-e6f33ccc2e35.jpeg)
![5.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2654345/be019cc2-201c-0292-d113-3071116391e1.jpeg)
![6.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2654345/4efde830-1a69-768a-fb3e-b19c81d25b9f.jpeg)

## (4)Android側の準備
「設定>デバイス情報>ビルド番号」を何度もタップし、開発向けオプションを有効にする。
「設定>システム>開発向けオプション>デバッグ>USBデバッグ」をONにする。
AndroidをPCに接続する。「USBデバッグを許可しますか?」と出るので、
「□このパソコンからのUSBデバッグを常に許可する」にチェックを入れ、「OK」を選択する。
Processingを開いて画面上部の「Android>Devices>docomo SO-52B...」にチェックが入っていることを確認する。
![Screenshot_20220504-171215.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2654345/ef5252b1-93c2-fd32-d1cd-97206a5474f6.png)
![Screenshot_20220504-171153.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2654345/2a293ce8-1b9d-e395-8ce1-64f5a09455bf.png)
![画像1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2654345/81cfcb03-8d21-2df2-3302-2c10f1c186e4.png)

## (5)Androidの実機デバッグ
スケッチを書き、デバックを実行する。
「BUILD SUCCESSFUL」とでれば成功。
Android側の画面にプログラムが実行していることが分かる。

プログラム
---
### Processing
```SimpleTimerForAndroid.pde
/*================================*
 *システム：シンプルタイマーforAndroid
 *ファイル：SimpleTimerForAndroid.pde
 *
 *-------------------------------
 *〔変更履歴〕
 *2022/05/03 usatodo 新規作成
 *2022/05/04 usatodo 縦横比保持追加
 *================================*/
//Androidで画面をONにする
import android.os.PowerManager;
import android.os.PowerManager.WakeLock;
import android.content.Context; 

int screenState = 2;//画面の遷移状態【0:Start 1:Title 2:Main 3:Config 4:Demo】

WakeLock lock;
Context context ; 
@Override
public void onResume(){
    super.onResume();
    PowerManager pm = (PowerManager) getActivity().getSystemService(Context.POWER_SERVICE); 
    lock = pm.newWakeLock(PowerManager.PARTIAL_WAKE_LOCK,"My tag");
    lock.acquire();
}

@Override
public void onPause(){
    super.onPause();
    lock.release();
}
void setup() {
  setupMedia();//BGMや画像の読込み処理
}
void draw() {
  background(0,100,100);//背景を水色に塗る
  switch(screenState){
    case 0: startActivity(); break;
    case 1: titleActivity(); break;
    case 2: mainActivity(); break;
    case 3: configActivity(); break;
    case 4: demoActivity(); break;
    default : ;/*エラー処理を記述*/break;
  }
}
//スタート画面の処理
void startActivity(){
  background(0,100,100);//背景を水色に塗る
}
//タイトル画面の処理
void titleActivity(){ 
}
//デモ画面の処理
void demoActivity(){
}
```
![7.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2654345/bb9fa309-31e8-6718-ac71-affc02477f21.jpeg)
![Screenshot_20220504-162829.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2654345/c6a48c97-7d76-6dbe-f7ea-5c9b8dfc9542.png)
![Screenshot_20220504-162747.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2654345/6dbcdc33-a4ec-4296-2682-9d1232413435.png)

![8.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2654345/d4167758-d160-946a-133d-be5d2e775b15.jpeg)
ちなみに、今回のプログラムでは、「VIBRATE」と「WAKE_LOCK」のPermissionsにチェックを入れた。

今回チェックを入れる理由は2つある。
　・「VIBRATE」は設定時刻になると振動する際に必要。
　・「WAKE_LOCK」は、端末がスリープしても動き続けるバックグラウンド処理に必要。
なので、特に使用する理由がなければ、チェックを入れなくても問題ないと思う。

# おわりに
Processingは導入コストが低く、アイデアを素早く形にできるのでとても使いやすいです。
今回、Android実機デバッグが、スムーズに実行できたので驚きました。
本記事について、最後まで読んでいただきましてありがとうございます。