Processing and p5.js compared

Published by Tim on Thursday December 29, 2022

Last modified on January 25th, 2024 at 14:06

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.


New course out now: Grid Systems

After a long period of work, about a dozen discarded lessons, and many discussions with a wide variety of people, […]

A brief research on grid systems

How do you develop a course for a subject as abstract and multifaceted as the topic of grid systems? Either […]

Student Journey – with Lily Montague

[INTROTEXT VON TIM HIER EINFÜGEN] What sparked your interest in creative coding and how did you get started? For me, […]

Curating the DESIGN IN MOTION Festival 2022

Imagine if the majority of all outdoor displays in public spaces were broadcasting the best of design and moving image […]

The Magic Triangle

Hey people, I hope you are all well! I escaped the cold and wet weather in Germany and am now […]

How to build the folder structure?

Hey everyone, I hope you are well! Today I would like to talk about a problem in the sketching process. […]

The best programming language for Creative Coding in 2022

Yesterday I got a message from a very nice person named Julia who is interested in my courses, but is […]