Processing 4をVScode上で実行する

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

## 1. Proccesingのバージョンに気を付けてインストール
2025/04現在の最新バージョンはVer.4.4.1なのですがインストールフォルダを見ると`processing-java.exe`がありません。[先駆者様の記事](https://qiita.com/shizuku86710/items/53e091db37e5cb54814a)によりますと`processing-java.exe`が存在する最新バージョンは`Processing 4.3.4`らしいので以下のURLからDLしましょう。

https://github.com/processing/processing4/releases/tag/processing-1297-4.3.4

## 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`のパスは各自のものをいれてください。
```json: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}"
            }
        }
    ]
}
```
このコードは[先駆者様](https://qiita.com/skm_bnn/items/4aecfe3f38f42cba6f22)のコードをもとに作成しましたが`options`とかを追加しています。
これで設定は完了です。

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

![スクリーンショット 2025-04-25 152643.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3862678/b333f6f2-6e49-4dea-8789-b5d87336e72c.png "タスクの実行を選択")
<div style="text-align: center;">
    タスクの実行を選択
</div>
            
![スクリーンショット 2025-04-25 153219.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3862678/82948c95-1e10-4003-a746-7fa4e47bf9b4.png "実行されて画像が生成されました")
<div style="text-align: center;">
    実行されて画像が生成されました
</div>

## 参考文献

https://qiita.com/shizuku86710/items/53e091db37e5cb54814a

https://qiita.com/skm_bnn/items/4aecfe3f38f42cba6f22

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

Windows用
```ps1: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ファイルを保存（UTF-8 with BOMで保存）
[System.IO.File]::WriteAllText("$folderName/$folderName.pde", $pdeContent, [System.Text.Encoding]::UTF8)

Write-Host "スケッチフォルダとファイルを作成しました: $folderName" 
```
Linux用
```sh:ck.sh
#!/bin/bash

# 現在の日付を取得してフォルダ名を生成
date_str=$(date +"%y%m%d")
base_name="sketch_${date_str}"
suffix="a"
folder_name="${base_name}${suffix}"

# 既存のフォルダを確認して適切な接尾辞を決定
while [ -d "$folder_name" ]; do
    # 文字を次の文字に進める（a→b→c...）
    suffix=$(printf "\\$(printf '%03o' "$(($(printf '%d' "'$suffix") + 1))")")
    folder_name="${base_name}${suffix}"
done

# フォルダを作成
mkdir "$folder_name"

# .pdeファイルの内容を作成
pde_content="// スケッチ $folder_name
// 作成日: $(date +"%Y/%m/%d")

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

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

# .pdeファイルを保存
echo "$pde_content" > "$folder_name/$folder_name.pde"

echo "スケッチフォルダとファイルを作成しました: $folder_name"
```