Integrate Processing with any Text Editor

If you are like me, you want to write processing sketches from your favourite text editor. But it can be quite a pain, at least it was for me. I have googled all the way reading here and there about a solution. I found a little help in one forum, but it did not helped me as I wanted. Here is a solution to that problem.

Steps you need to follow

  1. Open the text editor of your choice.

  2. Open up your project directory. This is the directory in which you will make a sketch project. For example, if you want to make a bouncing ball, you will create a sketch folder named bouncing_ball and inside that you will have bouncing_ball.pde file.

NOTE:

You can have more .pde files in that folder if one is dependent on another( in case you have to call one class from the bouncing_ball.pde). But keep in mind that processing only runs bouncing_ball.pde which in turn calls other files in the same folder if required.

  1. Install an extension which has support for Processing. Type “processing” in search bar and you will find one. Keep in mind it does not run processing by its own like other language extensions. It utilizes the command line argument “processing-java” to make a link to processing and produces output.

From here things are little different in different text editors but the underlying concept is same.

I am going to demonstrate it for VS Code.

Remember I said it uses command line to run Processing code. We can go to any terminal and do that, or we can automate that using a JSON file. We will run the JSON file and it will run the command line argument. Looks like a lot of stuff, isn’t it, but it is really simple. Just follow me.

  1. Now you need to have the project directory opened. This directory can have only related files as I said before. For example if my directory opened is named xyz, then it has to have one file xyz.pde. You can also place other files onto it. xyz.pde will make calls to those files.

  2. Now press Ctrl+Shift+P. You will see the command prompt in VS Code opens. If you have installed the extension you will see an option “Create a task file”. Click on it. It has the command that runs the code in that directory. Don’t change anything in that JSON file if you don’t know its implications.

You have to set the path under environment variables for Processing and not the current sketch. You can also do that in that JSON file under the title “path”. Don’t worry this needs to be done only once. If you have already set your path in environment variables, you are good to go. I would recommend not touching the JSON file and doing it by going to environment variables, if you are having trouble just google it.

It is same as adding javac to path for Java or python to path for Python. Your path will look something like this “C:\Users\processing-3.5.3”. Path is used to access “processing-java” command from any directory even if are not present in that processing-java.exe directory. This is required as the code will be run from different sketch directories which are not necessarily at the same directory as “processing-java.exe”.

  1. You will see a .vscode folder created in that sketch folder directory and it will have a file named tasks.json. It is the same file you just created. Now you have all set up.

  2. Final step. Press Ctrl+Shift+B to execute the code, and here you are hurray!!

In Atom I think creating and running the JSON file is linked together. So you don’t have to do it separately. But the core concept is same.

If you want to run Python or JavaScript code outside Processing IDE, I don’t have a solution till now. I will look for it and if I find any, I will update this post.

These steps are needed to be followed for every sketch you make, except for the step where you add processing to system path. It is done just once. Remember to only open the sketch directory you want to run. These JSON files are directory specific in this case. So every project needs its own JSON file. If you have opened a directory which is not that project’s root directory(i.e. for running xyz.pde it will be xyz) but a super-directory to that xyz, the JSON file will get created in the super-directory and the path will be set wrong when you press Ctrl+Shift+B and no code will run.

If I have two sketches I will form two different directories. But at a time I have to open one of these root directories and not the directory containing both of these.

If i want to make lines for one sketch I will form a “line” directory, and inside I will have my line.pde and other related .pde files.

Now if I want to make circles, I will open up a new directory “circle” inside of which I will have circle.pde. If the circle.pde needs to call function from other class of a different file, that file needs to be in “circle” directory.

These two directories may or may not be in the same super-directory.

Hope you find it useful!!

6 Likes

Nice article, thanks a lot! Really well-structured and useful. Good job!

1 Like

Thanks, glad you found it useful…

In principle this could be done with any text editor since you’re just having the editor ask the OS to run a separate program with specific parameters. The editor just has to expose such functionality to the user.

I think Notepad++ and SublimeText should also work, provided the appropriate plugin/extension but might not be as streamlined as say VSCode.

As a note you should be able to take a similar approach to run pure javascript or python code using a local Node or Python install. You don’t even have to use processing-java per se, the respective runtimes just must be able to n locate the Processing libraries.

1 Like

for a beginner the big question might be

+++ is the advantage of the editor ( code folding / block coloring … )
over the Processing IDE ( PDE ) more helpful

± as the missing

  • project / folder management
  • library management
  • help reference and links
  • integrated examples
  • debug

the PDE offers.

what you think? at what ‘learning state’ of JAVA / processing
you would recommend to OPT for a other editor
( or a bigger IDE ( with its own learning curve ) )

I think using an IDE is not the problem. The problem is the auto completion stuff. At early stage you should write your code without using this feature. Also, error detection in an IDE is very easy. You should learn to detect errors by yourself.
Otherwise using an IDE is not a bad option. If you can control your fingers from not doing auto completion, I think you can use an IDE.