Processing 4をVScode上で実行する

はじめに

Processingを触る機会があったのですが普段VScodeやCursorを使っている人間にとってはアプリのエディタが使いづら過ぎたのでVScode上で実行する方法を探すことに、先駆者様の記事は幾つかあるものの、その通りやっても上手くいかねぇことが多かったので自分の導入方法をネットの海に垂れ流しときます。

1. Proccesingのバージョンに気を付けてインストール

2025/04現在の最新バージョンはVer.4.4.1なのですがインストールフォルダを見るとprocessing-java.exeがありません。先駆者様の記事によりますとprocessing-java.exeが存在する最新バージョンはProcessing 4.3.4らしいので以下のURLからDLしましょう。

2. VSCodeのビルド設定

2.1 フォルダ構成

以下に.pdeファイルを保存するフォルダをProcessingとして最終的なフォルダ構成を以下に示します。

Processing/
├── .vscode/
│   └── tasks.json          # VSCode/Cursor用のタスク設定
│
└── sketch_YYMMDD[a-z]/     # 日付ベースのスケッチフォルダ（代表例）
    └── sketch_YYMMDD[a-z].pde  # スケッチファイル

ありがとうChatGPT
Processingのデフォルト構成のままなので変更の必要はありませんが、スケッチファイルとそのフォルダの名前は一緒にしておいてください。

2.2 ビルド設定

task.jsonに以下のようなコードを記述してください。
processing-java.exeのパスは各自のものをいれてください。

task.json

{
    "version": "2.0.0",
    "presentation": {
      "reveal": "always",
      "panel": "new"
    },
    "tasks": [
        {
            "label": "Run Processing Sketch",
            "command": "ここにprocessing-java.exeのパスをいれる",
            "type": "process",
            "args": [
                "--force",
                "--sketch=${fileDirname}",
                "--run"
            ],
            "problemMatcher": [],
            "group": {
                "kind": "build",
                "isDefault": true
            },
            "options": {
                "cwd": "${fileDirname}"
            }
        }
    ]
}

このコードは先駆者様のコードをもとに作成しましたがoptionsとかを追加しています。
これで設定は完了です。

3. 実行してみる

実行したい任意のファイルまで移動しctrl + shift + pを押してコマンドパレットを開きましょう。
次にTasks: Run Taskを選択した後、Run Processing Sketchタスクを選択することでProcessingが実行できます。

タスクの実行を選択

実行されて画像が生成されました

参考文献

おまけ

VScode上でもスケッチフォルダをつくる為のスクリプト

ck.ps1

# 現在の日付を取得してフォルダ名を生成
$date = Get-Date -Format "yyMMdd"
$baseName = "sketch_$date"
$suffix = "a"
$folderName = "$baseName$suffix"

# 既存のフォルダを確認して適切な接尾辞を決定
while (Test-Path $folderName) {
    $suffix = [char](([int][char]$suffix) + 1)
    $folderName = "$baseName$suffix"
}

# フォルダを作成
New-Item -ItemType Directory -Path $folderName

# .pdeファイルを作成
$pdeContent = @"
// スケッチ $folderName
// 作成日: $(Get-Date -Format "yyyy/MM/dd")

void setup() {
  size(800, 600);
}

void draw() {
  background(255);
}
"@

# .pdeファイルを保存
$pdeContent | Out-File -FilePath "$folderName/$folderName.pde" -Encoding UTF8

Write-Host "スケッチフォルダとファイルを作成しました: $folderName"