Processing and p5.js compared

Please note that this article is still in development

Please note: This article may be very time-bound and the items in the list may change depending on experience and also as both technologies evolve. The last update of this article is from December 29, 2022.

Processing and p5.js share the same principles and almost the same syntax. Nevertheless, there are major differences in terms of performance, usability and technical details. This blog post is a kind of inventory of these differences.

• Processing = Environment // p5.js = library
• Java // Javascript
• P5.js is executed by the browser, sketches are online!
• Processing rather for output & apps // p5.js for online interactivity
• Saving: Caution in p5.js: saveFrames() in the draw loop calls a pop-up save window from the browser 30 times per second – leads to crash. Always bind saveFrames to conditions.
• P5.js is much slower when it comes to nested loops in the draw loop.
• Images that are processed pixel by pixel in the draw loop are problematic.
• Generally good practice: Large files in p5.js are not recommended due to their online nature.
• 3D: Coordinate system is positioned differently in p5.js, WEBGL is one of the specs that can actually do different things than P3D in Processing.
• 3D: WEBGL is German faster than P3D because it is rendered on the CPU.
• 3D: in p5.js bugs/artifacts are avoided if you always call pg.clear() on the graphics element first in the draw loop.
• -> this is often a source of errors
• p5.js: PGraphics transparency in 3D not possible
• SVG support (processing only with library), p5.js supports
• mask()-function can use black/white images as masks in Processing, in p5.js you need real alpha channel images (.png)

Wrapping up:
As you can see, there are already some things that work quite differently in both languages. Depending on the use case, it makes sense to weigh up exactly which of the two languages is the right one for your project. And of course there is always the possibility to switch to completely different frameworks or libraries.