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
-
Open the text editor of your choice.
-
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.
- 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.
-
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.
-
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”.
-
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.
-
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!!