Using VS Code for Processing Sketches

Hey Fellas! I can see your obsession and love towards Processing 😃 . And why not, Processing is an amazing programming language to explore. This is the language that made me fall in love with programming. This was my first ever programming language. Okay, enough of the free promotion 😂.

For those of you who don’t know what Processing is ( just in case ).

Processing is a free graphical library and integrated development environment built for the electronic arts, new media art, and visual design communities with the purpose of teaching non-programmers the fundamentals of computer programming in a visual context.

Okay, let's get back to work!

For setting up a local development environment, you will need 2 things.
- Syntax Highlighting and code suggestion ( VS Code Extension )
- Installing the compiler ( processing-java )

Setting up VS Code for Processing

You will have to download an extension in the VS Code ( extensions make life easier ). More specifically Processing Language extension. This will enable syntax highlighting and code suggestion for the Processing codes that is .pde files.

You can install the extension by going to visual studio code, then to the extensions tab, then searching processing language and probably the first one will be this one.

Okay now that the syntax highlighting and code suggestion is done we need the compiler.

Installing the Compiler

First, we need to download the Processing IDE, we can download that from the official website — https://processing.org/download

Then open the IDE, and then go to tools and click on install processing java

After that, the CLI tool processing-java will be installed on the machine and we can use that to compile pde files.

We can check whether the CLI is installed or not by opening a terminal/command-prompt tab and then we can enter

processing-java

It will output some texts for using the CLI ( confirms the installation )

now you can write your sketches in your terminal by using this command

processing-java --sketch=<path-of-sketch-folder> --run

Note :
The Project structure should be

the folder name and sketch name should match otherwise it won't work and in the path, you have to give the path of the folder and not the sketch

processing-java -- sketch=/Users/.../sketch1 --run

This will open up the output window

That's all we need to do for starting our development. But the catch is, we obviously don’t want to run the command again and again after changing something to see the changes right?

I have a solution for that mess as well check out my next article on this sequence to know how to do it.

Until then see ya!

Cheers!