I tried migrating Processing to VS Code

Recently, I started studying Processing. At first I was running it on PDE, but I like VS Code for what I saw, and an external editor is cool! ?? For various reasons, I tried to migrate to VS Code.

In this article, I'll spell out some of the things I stumbled upon and things to keep in mind when I actually made the transition. In addition, since the author has never written an article, I would like you to make a point of failure and improvement. Please curse me in the comments ()

Click here for the articles that I referred to when migrating I want to run Processing with Visual Studio Code Run Processing with Visual Studio Code

My MacOS / software version

• MacOS：Mojave 10.14.4
• VSCode：1.38.0
• Processing：3.5.3

• In this article, we will proceed on the assumption that the download and installation of VS Code and Processing have been completed (I will catch other articles in that area).

1. Install processing-java

It looks like you need to install this file. I forgot to install this at the beginning and said, "I can't do this, let's do this."

With Processing open Tools → Install" processing-java " You can install it with.

2. Create and run folders and files

It gets a little confusing around here (at least I had a lot of trouble).

It can be anywhere (maybe), so create a folder. In my case I created it in the user directory with the name Processing_test. Then open it in VS Code. Welcome will come out as usual. Next, create a folder and pde file as appropriate and execute it. One thing to keep in mind here is that ** make the filename of the pde file the same as its folder name **. The Processing file can only be executed if the folder name and file name are the same (probably). I'm not sure why it's such a specification. I will try to do exactly that without saying anything.

I created a test folder in Processing_test and created a test.pde in it. Then write the program appropriately.

test.pde

size(500, 500);
background(255);

I wrote a program to display a 500x500 white window. Do this. It is convenient to use command + Shift + B to do this.

Then, it will be displayed like this. What is written No build task to run found. Configure Build Task… Translated into Japanese There are no build tasks to run. Configure a task ... It means that · · · Well, to put it simply, it's like "I can't do it as it is, brothers".

3. Set the json file

Since it cannot be executed as it is, create a file so that it can be executed.

Displayed earlier No build task to run found. Configure Build Task… (There is no build task to run. Configure the task…) From Create tasks.json file from template (create tasks.json from template) further ʻOthers Example to run an arbitary external command (Others example to run an arbitrary external command) ` I will proceed.

At this point, a file called tasks.json will be created automatically. I will edit this file, but this differs from person to person (explained below), so I will post my tasks.json for reference.

tasks.json

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Run",
      "command": "/usr/local/bin/processing-java",
      "type": "process",
      "args": [
        "--force",
        "--sketch=${fileDirname}",
        "--run"
      ],
      "group": {
        "kind": "build",
        "isDefault": true
      },
      "presentation": {
        "reveal": "always",
        "panel": "new"
      }
    }
  ]
}

Note the command and--sketch = $ {}parts when editing this file. First, the command part must specify the path where the originally installed processing-java.exe resides. My processing-java.exe was in / usr / local / bin / processing-java. It seems that this may change from person to person, so please do your best to find it.

Then, at --sketch = $ {}, you can change the options by playing around with {}. There are various options, so I will omit them here. This part also needs to be changed depending on the person, so [this article](http://mslabo.sakura.ne.jp/WordPress/make/processing%E3%80%80%E9%80%86%E5%BC % 95% E3% 81% 8D% E3% 83% AA% E3% 83% 95% E3% 82% A1% E3% 83% AC% E3% 83% B3% E3% 82% B9 / visual-studio-code Please refer to% E3% 81% A7processing% E3% 82% 92% E6% A5% BD% E3% 81% 97% E3% 82% 80% E3% 81% AB% E3% 81% AF /).

4. Execute

Save tasks.json and run test.pde. Then I was able to display the window safely.

I did the same, but it didn't work

I will review the points to note for those who are in such a situation.

1. Is processing-java.exe installed?
2. Is the content of the command in tasks.json correct?
3. Is the inside of --sketch = $ {} {} in tasks.json appropriate?

Please review these three points again. Trial and error is also fun.

See you somewhere again.