こんにちは、AMDlabの須田です。
今回は、Processing4.3の環境構築をVSCodeで、やっていこうと思います。
macの場合、実行するところで手詰まりする方が多いと感じました。そのような方に届ければと思います。

1. Processingをダウンロード

---

まずは、Processingをダウンロードしていきます。 

 

2. VSCodeをダウンロード

---

まだ、VSCodeを入れていない方はダウンロードしていきます。

 

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

---

1でダウンロードをしたProcessingを開きます。その後

1. ツールをクリック
2. “processing-java”をインストールをクリック

 

 

processing-javaがインストールされているか、確認してみましょう。 ターミナルを開き、’processing-java’を入力し、下記のように表示されていればインストール完了です。

 

4. VSCodeで環境構築をしていく

---

次は、VSCodeでProcessingを動かすための準備をしていきます。 流れとしては、以下のように進みます。

1. 拡張機能「Processing Language」と「Processing Formatter」を入れる
2. 新規フォルダを作成する
3. 新規フォルダで、VSCodeを開く
4. 新規フォルダとファイル名が同じものを作成する
5. tasks.jsonファイルを作成し、実行する

1. 拡張機能「Processing Language」と「Processing Formatter」を入れる

まずは、VSCodeでProcessingを快適に書くための拡張機能2つをインストールします。

• Processing Language
  • ProcessingのコードをVSCode内でサポートし、シンタックスハイライトやコード補完などの機能を提供してくれます
• Processing Formatter
  • Processingのコードを整形して読みやすくしてくれます

 

2. 新規フォルダを作成する

どこでも良いので、新規フォルダを作成してください。今回は「AMDProcessing（名称自由）」というフォルダを作成します。

3. 新規フォルダで、VSCodeを開く

4. フォルダとファイル名が同じものを作成する

フォルダを開いたあとは、Processingを記述するためのファイルを作成していきます。
この際「フォルダ名とファイル名は同じ名前」にしてください。（動いてくれません…）
今回は、下記のようにしていきます（フォルダとファイルの名称は自由です）

• 「AMDProcessing.pde」ファイルを作成

AMDProcessing.pdeファイルの中には、実行したあとの確認のためサンプルとして、幅480px、高さ120pxの半径20pxの円をファイル内に書いておきます。

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

ここまで、出来たらVSCodeでProcessingまで、あと少しです！

今から、tasks.jsonファイルを作成し、このコードを実行できるようにしていきます。
このファイルを作成しないと、せっかく書いたコードが表示されません。
やっていきましょう！
VScodeでコマンドパレットを開きます（ショートカットは「Cmd + Shift + P」） コマンドパレット内に「Processing: Create Task File」と入力し、Enterを押します。

Enterを押した際、フォルダを選択します。 今回の場合は、「AMDProcessing」フォルダ選択し、Enterを押します。

すると、AMDProcessingのフォルダ内に.vscodeファイルが作成されます。 中に、tasks.jsonファイルが作成されていると思います。

tasks.jsonファイルに下記のコードをそのままコピペをして貼り付けてください。

tasks.jsonファイルを上記のように変更したあとは、実行をしていきます。
AMDProcessing.pdeを選択した状態で、「Cmd + Shift + B」を入力します。
すると、下にターミナルが表示され、AMDProcessing.pdeで書いたコードが表示されます。 

最後に

---

以上で、「ProcessingをVSCodeで書く（mac編）」の内容は終わりです。 快適なProcessingライフをお互い過ごせるように頑張っていきましょう！