Processing2JS

Processing2JS is a porting tool, to help the porting of Processing apps to P5.js. This is a tool that I created for me and my students, and is provided to the rest of the world as is.

It can primarily be used in three ways:

If it works it works. People who know processing can try to run their Processing program through Processing2JS and there is approximately 85% chance that it works, at least for smaller projects. This does not require any knowledge in P5.js or javascript

As a help to port program from Processing to P5.js. Processing2JS will take care of most of the boring work of removing all the types from function declarations etc, and then you can manually change the rest, which hopefully is only a few lines. This will require that you know both Processing/Java and P5.js/javascript.

To keep a single source-base for both your Processing/java and P5.js/javascript projects. You write your code in the Processing editor and have the possibility to make exception code lines that only will run in Javascript.

How it works

If we have the following example in Processing:

I choose Tools/Processing2p5js

The Processing2JS window is openend. It shows both the original Processing code and the javascript code, and in the middle a syntax tree will be shown. This tree can sometimes be good in your error search. All processing files will be put together, and it will also only be one output file containing alla the generated javascipt code.

javascriptfile is saved in current sketch folder, and Processing2JS starts the standard webbrowser.

Whats works

• Most Processing 2d graphics
• 1-3d arrays
• ArrayList

What does not work

• Anything where the API:s between Processing and p5.js differs

• Fore example if API:s that exists in Processing but not in P5.js
• Or the API-functions is not the same

• In this case it actually works in some instances where I have tried to match processing functions with p5.js functions

Classes in Processing2P5js

Processing2P5js tries to convert Processing classes to ES6 classes. ES6 classes is supported in all modern browsers (not in IE). It seems to work for most cases. The keyword static is not supported.

beginShape … endShape

One special thing is beginShape/endShape. It works in the non-object oriented way for example:

beginShape();
vertex(30, 20);
vertex(85, 20);
vertex(85, 75);
vertex(30, 75);
endShape(CLOSE);

In a more object oriented way when used with createShape() it does not work.

Preload()

In the context of the webb it is often a good idé to preload pictures for example. LoadImage call that are maid in setup() is automatically moved to preload(). If you explicitly want to move a call to preload you can insert //preload after the statement.

Create exceptioncode to keep a common codebase

One of the points with Processing2JS is to enable to have a common codebase that is shared between Processing/Java and p5.js/Javascript. To enable to have code that is specific to Processing and javascript respectively.

Put //notjs after a statement if you want the line to be absent from the javascript code.

//js before a statement to have the rest of the line inluded in the javascript code. note that in this case the code should be javascript.