Prcoessingの環境構築・VsCodeでも使えるようにする・サンプルプログラムについて

1. Processingって何？

ProcessingはJavaで作られましたが、デジタルアートを表現することに特化したプログラミング言語です。ProcessingはJavaベースで開発されており、Javaのコードを直接書くこともできますが、Processing自体はよりシンプルに書くことができます。

Processingはスケッチブックと呼ばれるフォルダの中でフォルダ名と同一のファイルで実行する必要があります。例えば以下のような感じです。fiveというスケッチのなかのfive.pdeが実行するファイルとなります。Processingは.pdeというファイルに書かれます。

2. 環境構築

インストール方法は簡単です。公式サイトからインストーラーをダウンロードして、zipを解凍してprocessing.exeを実行するだけです。

2.1. サンプルを動かしてみよう！

Prcocessingのサンプルを使用するには「ファイル」をクリックして「サンプル」をクリックしてください。

はるか

ContinuousLinesを動かしてみる。

▶をクリックするとプログラムが実行されます。

ふゅか

マウスがクリックされている間に線が描画されるようですね。

3. Vscodeで環境構築

標準のエディタを使って開発することもできますがVscodeを使って開発することもできます。

1. 特定のフォルダーでVscodeを開いてください。
2. Ctrl+ Shift + pを同時に押してください。
3. テキストボックスが表示されると思うので、Taskと入力してください。
4. コマンドパレットで、「Tasks: Configure Task」または「タスクの構成」を検索して実行します。
5. 「テンプレートからタスクを生成」を選択してください
6. 「Others」を選択してください。
7. tasksの部分に以下の内容をコピペしてください。tasksの部分だけ変更してください。

{
    "tasks": [
        {
            "label": "Run",
            "command": "C:\\processing\\processing-java.exe",
            "type": "process",
        "args": [
          "--force",
          "--sketch=${workspaceFolder}\\${relativeFileDirname}",
          "--run"
        ],
        "group": {
          "kind": "build",
          "isDefault": true
        },
        "presentation": {
          "reveal": "always",
          "panel": "new"
        }
        }
    ]
}

"command": "C:\\processing\\processing-java.exe"の部分はprocessing-java.exeが存在するパスを指定したら動くはずです。

ふゅか

変更はtasksだけだよ。他は消さないで。

3.1. 実際に動くか試す

以下のようにフォルダとファイルを作ってください。絶対にフォルダとファイル名は同じにしてください。

hello.pdeに次のようなコードを書いてみましょう。

void setup(){
    println("Hello World!!!");
}

Ctrl + Shift + Bで次のように表示されるはずです。

ふゅか

フォルダと実行するファイル名は一緒にしないとだめよ

はるか

理解した。