Processing IDEがあるのに、わざわざスケッチを開発・実行をVS Codeで行うメリットがあり、特にコード管理、デバッグ、効率化、Githubとの連携 といった面で大きなメリットです。

すぐに試してみたい方へ。Processingのフォルダ構成のキットを下記Patreonからダウンロードできるようにしました。登録はメールアドレスだけで登録無料です。
>> Patreon barbe_generative_diary

VS Code で Processing を使うメリット

  • 強力なコード補完（IntelliSense）
    Processing IDEよりもコード補完が優秀で、関数や変数の補完がスムーズにできる。
    クラス名やライブラリのメソッドも予測してくれるので、ミスが減る。
  • 統合された Git 管理
    バージョン管理が簡単にできるので、コードの変更履歴を管理しやすい。
    GitHub にアップロードするときも、VS Code の UI で簡単に操作できる。
  • 拡張機能が豊富
    Bracket Pair ColorizerやLive Shareなど、コーディングを快適にする拡張機能が使える。
    Processing Languageの拡張を入れれば、シンタックスハイライトやコードの折りたたみもできる。
  • 複数のプログラミング言語を統一した環境で使える
    Processing IDEだと Processing しか書けないが、VS Code ならPython や JavaScript なども同じ環境で扱える。
    音声解析（FFT など）や Web Audio API との連携もスムーズにできる。
  • ターミナルから直接実行できる
    processing-javaコマンドを使えば、ターミナルでスクリプト実行が可能。
    シェルスクリプトやバッチファイルと組み合わせれば、自動化や大量のスケッチ処理も可能になる。

VS Code で Processing を使うデメリット

  • セットアップが少し面倒
    Processing IDEならそのまま使えるが、VS Code ではprocessing-javaのパスを設定・tasks.json の作成などの初期設定が必要。（下記にて説明）
  • 実行にワンクッション必要
    Processing IDEならボタンひとつで実行できるが、VS Code では Ctrl + Shift + B 押すか、ターミナルでprocessing-javaコマンドを使う必要がある。
    デバッグ機能も IDE の方が手軽（エラー時の表示が見やすい）。
  • ライブラリの管理が少し面倒
    Processing IDEなら GUI でライブラリをインストール できるが、VS Code では手動でフォルダを指定しないといけないことがある。
    Librariesフォルダの管理がProcessing IDE の方が楽。

使い分けとして

  • ライブラリの追加・管理は Processing IDE
  • コード編集は VS Code
  • 試作やプロトタイプ → Processing IDE
  • 本格的な開発や拡張機能の利用 → VS Code

Index

  1. ProcessingとVisual Studio Codeをダウンロード
  2. processing-javaをインストール
  3. VSCodeでProcessing Languageをインストール
  4. サンプルファイル作成
  5. tasks.jsonファイルを作成
  6. Run 実行
  7. Other

環境／macOS Ventura, Processing, VSCode

1. ProcessingとVisual Studio Codeをダウンロード

Processing VSCodeそれぞれない場合は下記通りインストールを行います。

Processing Website

Visual Studio Code Website

2. processing-javaをインストール

Processingを起動したのち、上記のtoolsより Install “processing-java” を選択し、インストールします。PCのパスワードを要求されるのでパスワードを入力します。

正しくインストールされたか確認のため、ターミナルにて、processing-javaと打ち込み下記通りエラーが出てなければ完了。

3. VSCodeでProcessing Languageをインストール

次にVSCodeの拡張機能としてProcessing Languageをインストール。
（EXTENSIONSよりProcessing Languageを検索）

インストール後、VSCodeを再起動します。

4. テストサンプルファイル作成

VSCodeでProcessingフォルダと同じ名前の.pdeファイルを作成する。

下記のようなサンプルコードを作成し保存します。
（テストコード：画面中央に円を描くサンプルコード）


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

void draw() {
   ellipse(width/2, height/2, 100, 100); 
}

5. tasks.jsonファイルを作成

VSCodeにてtasks.jsonファイルを作成します。

・上記のViewよりCommand paletteを選択し（Shift + ⌘ + P）開きます。
・Tasls: Configure Task を選択し、 .vscode（不可視ファイル） 、 tasks.json ファイル制作します。
（不可視ファイルは、⌘ + Shift + . で表示、確認できます。）

.vscode の中にtasks.jsonが作成されます。

tasks.jsonファイルの”tasks”に下記を加えます。　すでに java がある場合はその項の最後 }後の , （カンマ）を忘れずに。

{
 "label": "Run Processing",
 "type": "shell",
 "command": "processing-java",
 "args": [
   "--sketch=${fileDirname}",
   "--run"
   ],
 "group": {
   "kind": "build",
   "isDefault": true
 }
}

5. Run 実行

ファイルから、Shift + ⌘ + B にて実行します。
（左手デバイスなど持っていれば登録するもの良いです。）

注意点／pdeのファイル名とそれを格納しているフォルダ名は必ず同じ名前でないと実行できないので注意が必要です。

補足

一度task.jsonを作成してしまえば、全てのスケッチを利用することができます。VSCodeでさまざまなスケッチが保存されているフォルダを開きその階層に.vscodeとtask.jsonを作成します。

Processing/
  ├── sketch1/
  │     ├── sketch1.pde
  ├── sketch2/
  │     ├── sketch2.pde
  ├── .vscode/
  │     ├── tasks.json ← here!

barbe_generative_library

Processing 参考書籍
[Book] 数学から創るジェネラティブアート – Processingで学ぶかたちのデザイン

mathmade-processing_gizyu-image

初版／ 2019.4.17
ページ数／304ページ
出版社／技術評論社
言語／日本語

【Amazon.co.jp で購入】

ーーーーー
”Books”では、”barbe_generative_Library”として、
barbe_generative_diary の創作において実際に購入し、読んだ本を紹介します。

ーーーーー