Alliansens sverige titelbild

Processing2P5.js

Processing2P5JS is a search and replace based 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 is by no means a complete porting tool.

It can primarily be used in three ways.

  1. If it works it works. People who know processing can try to run their Processing program through Processing2P5js and there is approximately 75% chance that it works. This does not require any knowledge in P5.js or javascript

  2. As a help to port program from Processing to P5.js. Processing2P5js 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.

  3. 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 Processing2p5js window is openend. It shows both the original Processing code and the javascript code.


The javascriptfile is saved in current sketch folder, and Processing2p5js tries to start chrome to show the sketch. It searches for some standard installation paths, and then checks if chrome is in the PATH. If chrome does not starts automaticly you should try to place the directory containing the chrome executable ( chrome.exe in windows, and just chrome for other os) in the PATH.


 

Whats works

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

What does not work

  • Processing 3D

  • To declare more than one variable per line in classes.

  • API:s that exists in Processing but not in P5.js

Classes in Processing2P5js

Processing2P5js tries to convert Processing classes to ES6 classes. ES6 classes is support in all modern browsers (not in IE). It seems to work for most cases. But you must declare each member variable on a new line. The access control keywords private, public and protected 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.