本記事について

プログラミング言語Processing4をVSCode上で利用することを目指します。
Githubにファイルの内容を公開していますのでご参考になれば幸いです。

1. Processingのインストール

次のページでProcessingをダウンロードして，zipファイルを解凍します。processing-4.x > processing.exeを実行することで，Processingの利用ができます。

Download Processing / Processing.org

2. VSCodeのインストール

Processingのみでも開発をすることは可能ですが、作業効率を上げるためにVSCodeを利用します。次のページでVSCodeをインストールします。

Download Visual Studio Code

3. VSCodeのビルド設定

(1) ディレクトリの構成

次のようなディレクトリを構成してください。sketchフォルダとsketch.pdeは任意の名前で変更が可能ですが，「sketch」の箇所は同じである必要があります。

sketch
- sketch.pde
- .vscode
  - tasks.json

(2) tasks.jsonの編集

.vscodeファイルにあるtasks.jsonの内容は次の通りです。tasks > command の値は processing-java.exe のパスを示します。この実行ファイルは1節の processing.exe と同じディレクトリにあります(2023/10/07時点)。

tasks.json

{
  "version": "2.0.0",
  "presentation": {
    "reveal": "always",
    "panel": "new"
  },
  "tasks": [
    {
      "label": "Run",
      "command": "環境に応じて要変更\\processing-java.exe",
      "type": "process",
      "args": ["--force", "--sketch=${fileDirname}", "--run"],
      "problemMatcher": [],
      "group": {
        "kind": "build",
        "isDefault": true
      }
    }
  ]
}

4. VSCodeの拡張機能

作業効率を上げるために、VSCodeで次の拡張機能を導入します。

Processing Language
- コードの色覚的提示
- コード保管
- プログラムの実行 [Ctrl] + [Shift] + B
Processing Formatter
コードの整形

OS ショートカット

Windows Shift + Alt + F

Mac Shift + Option + F

Linux Ctrl + Shift + I

OS	ショートカット
Windows	Shift + Alt + F
Mac	Shift + Option + F
Linux	Ctrl + Shift + I

5. Processingスケッチの動作確認

sketch.pdeを作成して，実際にVSCode上で動作するかを確認します。サンプルコードを示します。[Ctrl] + [Shift] + Bを押すことで，スケッチが実行されます。実行に失敗する場合はコードのタイプミスや第3節の設定を再確認してください。

sketch.pde

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

void draw() {
  ellipse(100, 100, 50, 50);
}

実行に成功すると，次の画像のようなウィンドウが立ち上がります。

これで開発環境の構築は完了です。お疲れさまでした！

VSCodeにおけるProcessingの開発環境