Processingjs, initially built by John Resig in 2008 and maintained by the community until 2018, is now deprecated and is not updated at its Github Repository any further.
This library played a vital role on our website, porting over 100,000 sketches created in Java to Javascript behind the scenes. We are thankful to all of our users who shared their Processing sketches, and all of Processingjs contributors who made this possible.
With the release of P5js, it became possible to write Processing sketches in Javascript, providing better performance, error reporting, and access to new technologies that browsers support today. We ❤ P5js, we decided to throw our full support on P5js in the future and drop support on Processingjs.
What this means for new and existing sketches?
You will still be able to create sketches using Processingjs on OpenProcessing. However, you should expect to see limited features such as:
Limited error reporting and no line numbers in console
No default libraries or live reference features.
No support for recent Processing functions
We will design our new features focusing on P5js and other javascript libraries.
Your existing sketches should work as is, however, new functions and updates on Processing may not be available when you copy/paste them over OpenProcessing.
In most cases, it takes a few lines to port a Processing sketch to P5js
We highly recommend P5js and use this transition guide to port your sketches to javascript. Simple syntax changes are below:
To create functions, use
function
instead ofvoid
To create variables, use
let
orvar
insteadint, float, String, etc.
To create arrays, use
let myArray = []
instead of ArrayLists objects.Use P5js reference instead of Processing reference, and make sure you are using the updated function names, such as
createCanvas()
instead ofsize()
.Use
preload
function to load files that you use, so that browser can cache them before your sketch is executed:
function preload() {
img = loadImage('image.jpg');
}