Which to Choose: Processing or p5.js

A (very) short introduction

Daniel Voicu
Tab & Space | Creative Coding
3 min readOct 12, 2017

--

My interest in creative coding was sparked when I was looking for new methods to break images, to create “intentional glitches”. I found out about Processing by accident. And what a great accident it was.

While browsing Goodreads, I stumbled upon a book about generative art. Its cover drew my attention and I decided to find out more about this kind of art and about Processing. So I went on processing.org, downloaded Processing 2.1.1, and looked through the exhibition. When you see the amazing things that can be done with it, you are instantly drawn in. For me, it was almost magical to know that there’s a way to design something through code.

It’s based on Java, but from my limited experience with Java, I can say that it’s much easier to learn and, if you have the time, to master. The languages by themselves are not the problem, though. In my case math — trigonometry is needed if you want to create something more than simple primitives, as basic shapes are called — and algorithmic thinking took a little bit longer to understand.

Processing

Processing logo

Processing was created in 2001, by Casey Reas and Benjamin Fry. Since then, it has evolved from an university project into a full-fledged language used by designers, artists and coders alike, for a large variety of projects. I started with with Processing because it felt easy to learn, and you get visible results almost immediately you start coding. This language was initially created to teach programming fundamentals in a visual context, but it has evolved into more than that. Now it’s being used by artists, designers, researchers etc., and in so many ways that, probably, in a couple of years it might be a standard requirement for hiring designers and/or programmers.

It has its own editor, a minimal IDE called a sketchbook, which you use to create sketches, of course. There are a few books about Processing, and you can check out the recommended books on the Processing Foundation website.

If you’re familiar with Java, then Processing is the way to go.

P5.js

p5.js logo

P5.js is a reinterpretation of Processing for the web. Basically, you can do the same things you did using Processing, but with a few differences.

P5.js also had its own editor, until it was discontinued. The people behind P5.js are working on a new iteration of the editor, but in the meantime you can use any editor you like. I’d recommend Atom or VS Code, but these are just my personal preferences. If you’re going for Atom though, I also recommend using this plugin for p5.js code snippets. It will speed up your coding a lot.

If you’ve been working as a web developer or you’re at least a little bit familiar with Javascript, you’ll probably feel more at home using p5.js, as it is a Javascript library that you can easily add to your projects. It can be extended with a few other add-on libraries, and a few of them are provided with the p5.js library. Besides the ones provided by p5.js by default, you can find more of them for sound and speech, 2D and 3D etc. on the libraries page.

--

--