How to use Visual Studio Code with Processing 3

If you are looking for a more competent ide I would recommend eclipse, which is has a far smaller footprint and can handle all your processing needs.

https://processing.org/tutorials/eclipse/

just remember to include the PApplet in all your classes, or the processing code wont work.

1 Like

Thanx, I will try. I was just looking for a more competent IDE.

Yes, the original ide is great for small sketches, but clearly has a lot of limitations.

The goal of PDE is to be a simple, introductory learning environment – and it supports the Processing .pde language / Java dialect by default.

  1. If you want to use the Processing API in Java then you should check out Eclipse – this setup doesn’t use the PDE compiler.

  2. If you want to compile .pde files and run sketches in a full programming editor, there are several choices with various bundles / plugins to handle sketch launching – Visual Studio Code, Atom, Sublime, Textmate…

https://www.google.com/search?q=processing.org+visual+studio+code

1 Like

Reading your answers again I found them useful.

In VS Code I struggled a while before I found a good example of what to include in the classpath, and how to structure the public class App extends PApplet.

I use Java and not the PDE extension.

good you found the working environment you like.

you started out here:

the next user with the same question might end up here at this topic
but still not find the answer

until you are willing to share what you have learned.

Here’s how to at least run a basic “script”, possibly with OpenGL:

Create Java project in VS Code.
ctrl + shift + P then Java: Create ...

In the VS Code projects .classpath file visible in the project tree to the left, add all of this for basic functions and OpenGL, check the folders for your architecture and processing library path:

	<classpathentry kind="lib" path="C:\Prog\processing-3.5.3\core\library\core.jar"/>
	<classpathentry kind="lib" path="C:\Prog\processing-3.5.3\core\library\jogl-all.jar"/>
	<classpathentry kind="lib" path="C:\Prog\processing-3.5.3\core\library\jogl-all-natives-windows-i586.jar"/>
	<classpathentry kind="lib" path="C:\Prog\processing-3.5.3\core\library\gluegen-rt.jar"/>
	<classpathentry kind="lib" path="C:\Prog\processing-3.5.3\core\library\gluegen-rt-natives-windows-i586.jar"/>

In the main class add (almost the same code can be found on the Eclipse tutorial from Processing, but the one there gave me compilation errors):

import processing.core.*;

public class App extends PApplet {

	public void settings() {
		size(500, 500);
	}

	public void draw(){
		background(64);
		ellipse(mouseX, mouseY, 20, 20);
	}
  
	public static void main(String[] passedArgs) {
		App mySketch = new App();
		String[] processingArgs = {"App"};
		PApplet.runSketch(processingArgs, mySketch);
    }
}
2 Likes

Thank you so much for sharing your solution.

Thanks, I found this after installing VS Code. It greatly sped up the process of getting my sketch to run.

I installed the processing-vscode extension and it worked quite well (for VS Code on Mac):

  1. Open Processing, and click the Tools -> Install “processing-java” menu item.
  2. Install the processing-vscode extension
  3. Open your sketch folder in VS Code
  4. NOT just the .pde file, like you would do from the Processing IDE
  5. run Processing: Create Task File
  6. Cmd-P + > + Create Task File
  7. Run project: Cmd-Shift P

The above was from a Mac; on Windows there is a little more to be done to get JAVA onto the PATH - there are instructions on the extensions github page. Additionally, Cmd would be Ctrl

4 Likes

That’s a shame. I got stuck in the Create Task File, on my Mac.
After I proceeded to install “processing-java”, I installed the process-vscode extension, restarted vscode, created a *pde file with basic processing code, but got the message: “No build task to run found. Configure build task” when running Create Task File command. If I click on it, it will prompt me to create some json file from template, but none seems to be adequate.

what do you mean by not adequate? Can you share the json file and the error message/screenshot?

I am supposing the json file I would generate would be somewhat similar to the one found in github:

But I think I am going for the wrong way or I missed some step.

You are trying to create a task file from VSCode’s native option. Instead, you need to use “Command: Create Task File” provided by processing-vscode. I don’t have it installed now so I forgot how to open it, but according to the readme you should be able to find it by Ctrl(cmd?)+Shift+B then type “create task file”.

By the way it’s cool you took a screenshot with gif, but to be honest I had to downloaded and open with gimp to pause it to see it in detail, so next time it would be more helpful if you take several screenshots as static files :slight_smile:

Oh, which browser are you using to visualize the gif? I can see it playing right away in my browser without even having to click on it (in Chrome, and Safari).

By the way, in the GIF example I used the VSCode’s native option but none of those other options I had were useful. When I type Cmd+shift+B, that is what happen in my screen. First, a “No build task to run found” message… And then, as you see, nothing leads to the so called “Create task file” as I see on the Read me. I tend to think the processing-java path might be a little weirder on a m1 Mac? But couldn’t find a way to set up it manually either.

What about cmd+shift+p? Does it give you a search bar to type in the command?

For gif it’s the opposite, I wanted to pause it because I needed to see the details.

Ok, some progress. By writing the command " Create Task File " on the search bar, it gives me an error telling me to create a pde file the same name as the workspace. Something I know it happens in processing but somehow I was completely not aware that would be the case on vscode too. After fixing the workspace/filename it looks like the json file is now correct. Yet, a message comes warning me to setup processing path… But, I can finally run shift+cmd+B “Run Build File” and the pde is running. Thank you!

Glad that you figured it out! The file name is perhaps the limitation of processing (I guess the command line version also looks for the pde with same name) and has nothing to do with vscode. The task file is to simply generate CLI command to launch processing compiler within vscode.

If you are stuck at step 1 because you do not see the Tools -> Install “processing-java” menu item, this video is what did it for me:

Essentially, I had to manually add processing to the PATH environment variable (the part from 3:27 to 4:56 in the video above)

In a nutshell

  1. Look up where processing is installed and copy the path
  2. Open the system settings and search for “advanced system settings”
  3. Click on “Environment Variables…”
  4. In “user variables for {yourName}” double click the line that says “Path”
  5. Click on “New” and paste the path where Processing is located. It should look something like the screenshot below

  1. Follow the rest of the steps in @michaelPaulukonis’ post above and you should have a working setup
2 Likes

That’s right. The Processing compiler (whether the IDE command line) concatenates the sketch tabs into one file. The folder name is the sketch name, and the corresponding tab name (which must match) is the first tab concatenated is the first file concatonated – the entrypoint, like “main()”.

You can test this by creating a named sketch Test, leaving the first tab Test.pde entirely empty, and creating a second tab Tab.pde with code: println("hello world");

The sketch compiles and runs – it requires that same-named pde file, but doesn’t require anything in it. The same applies to draw(), setup(), et cetera – you may put them all in Tab.pde, so long as the required same-named pde file exists.