VSCodeでProcessing.py

Visual Studio Code(以下VSCode)でProcessing.py(ProcessingのPython Mode)を実行する方法についてまとめておきます。
筆者の環境はWindows10 (64bit)です。ファイルパスなどはこの環境であるものとして記述します。適宜読み替えてください。

# トリック

先に実装の原理を種明かしします。

Processing.pyはJython(PythonのJava実装)で動いています。そのため、Processing.pyを実行する`.jar`ファイル(Javaコードのコンパイル後のファイル)を取得し、それを使うことでProcessingのIDEを使わずにスケッチを動かせます。

# 注意

この方法で使用できるProcessingのバージョンは少し古いようです。そのため、例えば`clear`関数が使えなかったりします。
実行にも時間がかかります。かなり茨の道なので、IDEの方が快適かもしれません。

# 手順

ざっくりまとめるとこんな感じです。

1. VSCode、JDK(Java Development Kit)をインストールする
1. VSCodeにCode Runner拡張機能を追加する
1. 実行用の`.jar`ファイルを入手する
1. スケッチのディレクトリを作る

# 1. VSCode、JDKをインストールする

長くなりそうなので、どちらも他のサイトに丸投げします。

VSCodeのインストール方法:

* Windows - https://qiita.com/psychoroid/items/7d85ae6bade4a67aedb1
* Mac - https://qiita.com/watamura/items/51c70fbb848e5f956fd6
* Linux - https://qiita.com/yoshiyasu1111/items/e21a77ed68b52cb5f7c8

JDKのインストール方法:

* Windows - https://techacademy.jp/magazine/8998
* Mac - https://docs.oracle.com/javase/jp/12/install/installation-jdk-macos.html#GUID-2FE451B0-9572-4E38-A1A5-568B77B146DE
* Linux - https://techacademy.jp/magazine/24220

Javaのインストールに関しては、コマンドラインで`java -version`を実行して次のような結果が得られれば成功です。

```
$ java -version
java version "14.0.2" 2020-07-14
Java(TM) SE Runtime Environment (build 14.0.2+12-46)
Java HotSpot(TM) 64-Bit Server VM (build 14.0.2+12-46, mixed mode, sharing)
```

具体的な数字は少しずれていても大丈夫です。

# 2. VSCodeにCode Runner拡張機能を追加する

![code-runner.JPEG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/497362/76c113a7-af70-1862-986d-ded2c05b411f.jpeg)

VSCodeを開き、左側にある「田」みたいなボタンを開き、拡張機能の管理メニューを開きます。検索ボックスで「code runner」と検索し、上の写真のものをインストールします。

# 3. 実行用の`.jar`ファイルを入手する

厳密に言うと、「`.jar`ファイルが入ったフォルダを圧縮したファイル」をダウンロードします。

https://py.processing.org/tutorials/command-line/
こちらのページの「Requirements」節の途中に、件のファイルがあります。引用しておきます。

> 
> [Mac OS X](http://py.processing.org/processing.py-macosx.tgz)
> Windows: [64-bit](http://py.processing.org/processing.py-windows64.zip), [32-bit](http://py.processing.org/processing.py-windows32.zip)
> Linux: [64-bit](http://py.processing.org/processing.py-linux64.tgz), [32-bit](http://py.processing.org/processing.py-linux32.tgz)
> 

`.tgz`または`.zip`がダウンロードされます。解凍し、好きなところに置いてください。解凍したフォルダの中に`processing-py.jar`というファイルがあると思います。そのファイルが実行時に使う`.jar`ファイルになります。

# 4. スケッチのディレクトリを作る

`pyprocessing`というフォルダを作成し、このフォルダ内にスケッチなどを置いていくものとします。

まずは、前節でダウンロードしたフォルダ内にある`processing-py.jar`を置きます。

次に、VSCodeの設定をいじります。ワークスペース内の`Python > Linting: Enabled`を`false`にします。これはpythonの拡張機能がすでにインストールされている場合のみになります。

![pylint-setting.JPEG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/497362/b86c8e4b-2dbb-f927-fba4-595966ca7db1.jpeg)


写真にも示したように、ワークスペース内の設定を変更していることに注意してください。こうしないと他のプロジェクトに影響が出ます。

次に、`sketch.py`(スケッチファイル)を置きます。`sketch.py`に以下の内容を記述します。

```python
def setup():
    size(400,400)

def draw():
    background(255)
    fill(0)
    ellipse(mouseX, mouseY, 50, 50)

```

`sketch.py`を開くと、pythonの拡張機能をインストールしないかという通知が(まだ入ってない場合は)画面右下に出てきます。インストールしてもしなくても支障はありません。インストールした場合は上述の設定変更を行う必要があります。

次に、設定を変更します。ワークスペース内の`Code Runner: Custom Command`を`java -jar processing-py.jar sketch.py`に変更します。下の写真の通りです。

![code-runner-setting.JPEG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/497362/2e7b486e-3c2c-981e-e5ba-9ac1012a5bb6.jpeg)


ディレクトリ構成は以下のようになります。

```
pyprocessing
    |- .vscode
    |   |- settings.json
    |- processing-py.jar
    |- sketch.py
```

`settings.json`には先ほど変更した設定が記録されています。念のため確認しておきます。

```json:settings.json
{
    "code-runner.customCommand": "java -jar processing-py.jar sketch.py",
    "python.linting.enabled": false
}
```

これで準備完了です。Ctrl+alt+Kを押すと、しばらくしてからスケッチが動作します。スケッチウィンドウ内にマウスを置いて黒い円がついてきたら成功です。

# おまけ: サードパーティ製のライブラリを使う

https://py.processing.org/tutorials/command-line/
詳しい情報はこちらの「Processing Libraries」節にあります。ライブラリのリストは[Libraries | Processing.org](https://processing.org/reference/libraries/)にあります。ここからの話はWindowsであるものとします。他のOSを使っている方は適宜読み替えてください。

大前提として、[JRE 8u202](https://www.oracle.com/technetwork/java/javase/downloads/java-archive-javase8-2177648.html)が必要です(最新のJREは14です)。※JRE: Java Runtime Environment

今JRE8u202をダウンロードしようと思った場合、Oracleにサインインする必要があります。Oracleアカウントを作る際、かなり多くの個人情報を提供しなければなりません。正直言って敷居は高いですが、一応紹介しておきます。

また、[ProcessingのIDE](https://processing.org/reference/environment/)もインストールする必要があります。

まずは上のリンクから、JREをダウンロードし、インストールしてください。PATHは後で通します。

次に、バッチファイル`runner.bat`(他OSではシェルスクリプト`runner.sh`)を作成します。以下の内容を記述します。

```bat:runner.bat
@echo off
cd /d %~dp0
set PATH=C:\Program Files\Java\jre1.8.0_202\bin;
java -version
java -jar processing-py.jar sketch.py
echo Finished.
exit 0
```

このファイルは以下に示した流れを実行します。

1. `@echo off`: デフォルトでは実行するコマンドが出力されるので、それをオフにします。
1. `cd /d %~dp0`: 現在のディレクトリ(`pyprocessing`)をカレントディレクトリにします。
1. `set PATH...`: `java`コマンドの参照先を`8u202`のものに変更します。
1. `java -version`: 確認のために`java`のバージョンを出力します。
1. `java -jar processing-py.jar sketch.py`: `sketch.py`を実行します。
1. `echo Finished.`: `Finished.`と出力します。スケッチの終了を確認するためです。
1. `exit 0`: バッチファイルを終了します。なくてもいいらしいのですが念のため。

他OSについてはよく分からないので、参考になりそうなサイトを載せておきます。

* シェルスクリプトの基本 - https://qiita.com/zayarwinttun/items/0dae4cb66d8f4bd2a337
* LinuxでのJavaバージョンの切り替え方 - https://qiita.com/nkojima/items/e3de6052554ee1d77144
* MacでのJavaバージョンの切り替え方 - https://qiita.com/ponsuke0531/items/795cd00d93b71c14d07b

次に`pyprocessing`(スケッチのあるディレクトリ)内に`libraries`フォルダを作成します。ここにライブラリをいろいろと追加していきます。

例として[PixelFlow](https://github.com/diwi/PixelFlow)のインストールを紹介します。
まずはProcessing IDEの「モードの追加...」を開きます。

![add-mode.JPEG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/497362/6d8984e2-9750-6aef-0544-0e4af0832da0.jpeg)
画面の右上です。

Contribution Managerが開くので、「Libraries」タブでPixelFlowを検索し、選択して右下のInstallを押します。

![pixelflow.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/497362/5a4d706d-9a7b-7fb4-6493-5128c30117c1.jpeg)

インストールが完了するまで待ちましょう。インストールが終わったら`Documents\Processing\libraries`をエクスプローラで開きます。`PixelFlow`というフォルダがあるはずです。このフォルダを`pyprocessing\libraries`内に移動させます。
※Processing IDEでインストールしたライブラリがどこにあるかは[こちら](https://github.com/processing/processing/wiki/How-to-Install-a-Contributed-Library)の「Manual Install」節にあります。OSに関係なく`Documents/Processing/libraries`内に置かれるようです。

これで準備完了です。試しに何か書いてみます。※コードは[@ryotako](https://twitter.com/ryotakob)さんが書いた[note](https://note.com/ryotako/n/n6f32d3906a6d)を参考にさせて頂きました。

```python:sketch.py
add_library("PixelFlow")

def setup():
   size(400, 400, P2D) # GLSL利用なのでP2D指定は必須

   # 流体シミュをするオブジェクト(DwFluid2D)と、
   # 結果の描画に使うPGraphicsを作る
   global F,G
   F=DwFluid2D(DwPixelFlow(this), width, height, 1) # 最後の引数は解像度。値を大きくすると粗いシミュになる
   G=createGraphics(width, height, P2D)

def draw():
   # PGraphicsを初期化。
   # これをしないと以前の結果に重ね描きされていく
   with G.beginDraw():
       G.background(255)
   
   # 流体シミュの条件を指定
   # ProcessingとGLSLでY座標の上下が逆なので注意
   F.addTemperature(mouseX, height-mouseY, 40, 1)
   
   # 流体シミュを１ステップ進める
   F.update()
   
   # 流体シミュの結果の描画
   # 最後の引数は 0:濃度、1:温度、2:圧力、3:速度、4:障害物の有無
   F.renderFluidTextures(G, 1)
   image(G,0,0)

```

これで準備完了です。ターミナルで先ほどのバッチファイル/シェルスクリプトを実行します。バッチファイルだと`.\runner.bat`、シェルスクリプトは`sh runner.sh`です。なんかすごい流体のアニメーションが出てきたら成功なのですが、筆者の場合は何故か上手く行きませんでした。[Processingコミュニティに質問した](https://discourse.processing.org/t/cant-load-library/23466)ので、参考になれば幸いです。

試しに`Sound`というライブラリを使った場合はうまくいきました。現状としては、使えるライブラリが限られるといった感じです。

Code Runner拡張機能の`custom command`の設定を`.\runner.bat`もしくは`sh runner.sh`に変更するとスケッチの実行が少し楽になります。

# 参考

https://py.processing.org/tutorials/command-line/
https://discourse.processing.org/t/tutorial-running-python-mode-in-vscode/7716
https://github.com/processing/processing/wiki/How-to-Install-a-Contributed-Library#manual-install

※**追記**
https://github.com/jdf/processing-py-site
筆者はまだ読めてませんが、こちらにより詳細な方法があるかもしれません。