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 of void 
  • To create variables, use let or var instead int, 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 of size() .
  • 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');

Did this answer your question?