How to use Visual Studio Code with Processing 3

[emedan]

I can’t find instructions how to use, for instance, Visual Studio Code as a replacement for the Java IDE.

I came to Processing after using P5.js,

The default IDE feels very out of date, and why spend resources on something that is not really part of Processing functionality?
Calling it “PDE” and not IDE seems like top of the iceberg of non-standard implementation.
Does not have intellisense, but an opt-in crude “code completion” that does nothing of the kind, method-completion at the most and even then does not seem to present the help information on mouse over?
Does not have dark mode by default (is it even selectable)?

[kll]

possibly you use google and find:
https://marketplace.visualstudio.com/items?itemName=Tobiah.language-pde ,
https://github.com/TobiahZ/processing-vscode ,

please remember that with questions about using other IDE or editors
it might be difficult to find someone here who can respond.

also when you have coding questions
please post code ( as a MCVE )
only in a version what runs ( copy / paste ) in the Processing IDE 3.5.3
( or when required add files supplied as zip )

using external tools you might miss reference, examples, library help …
you might come back to PDE, ( even if just for learning )

anyhow have fun coding…

[paulgoux]

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.

[emedan]

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

[paulgoux]

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

[jeremydouglass]

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

[emedan]

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.

[kll]

good you found the working environment you like.

you started out here:

@emedan

I can’t find instructions how to use, for instance, Visual Studio Code as a replacement for the Java IDE

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.

[emedan]

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);
    }
}

[jeremydouglass]

Thank you so much for sharing your solution.

[TomB]

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

[michaelPaulukonis]

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

[bontempos]

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.

[micuat]

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

[bontempos]

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

TobiahZ/processing-vscode/blob/main/ProcessingTasks.json

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

[micuat]

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

[bontempos]

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.

[micuat]

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.

[bontempos]

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!

[micuat]

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.