tutorials / p5js / which-processing

Which Processing?

tutorial p5.js processing processing.js javascript

Before we dive into learning about P5.js, let’s take a minute to talk about how it fits into everything else we’ve learned about so far.

A Brief Processing History

To understand how all of this fits together, let’s see a timeline of the major events:

You don’t have to memorize any of this, but hopefully it helps put everything into perspective.

P5.js versus Processing.js

If you’re still not sure what the difference between P5.js and Processing.js is, don’t worry! It’s a subtle distinction. After all, they’re both basically JavaScript versions of Processing, right?

The difference is a little bit philosophical, in that they had slightly different goals.

In other words, Processing.js was originally intended to be a port of Processing, with support for all of Processing’s syntax. P5.js was more of a reboot in pure JavaScript syntax.

Which Processing should I use?

With all these different versions of Processing, how do you know which one to use? Here’s a little flow chart (flow list?) that explains my recommendations:

In other words, I recommend using regular Processing if you’re new to coding, or if you have an existing sketch that uses Java libraries or Processing 3 syntax. I recommend using Processing.js if you already have a regular Processing sketch (with no Java libraries or Processing 3 syntax) that you’re trying to deploy. And I recommend using P5.js if you’ve already learned about Processing and JavaScript, and you’re thinking about starting a new sketch.

Those are my recommendations, but there aren’t any strict rules about any of this. In the end, you should use whatever you’re comfortable with or curious about!

Learning P5.js as a Novice

If you’re just starting out learning how to code, I recommend using regular Processing first. This is because Processing, built on Java, is compiled which means that you get a warning as soon as you type something incorrectly. (It shows up as a little red underline in the Processing editor.)

Compare that to P5.js, built on JavaScript, which is interpreted instead of compiled. This means that you don’t get any errors until you actually run your code. And even then the errors can be pretty confusing, and you have to know where to find them, and often lead to weird behaviors instead of friendly errors. P5.js is getting better at this, but it’s still much easier to shoot yourself in the foot in JavaScript than it is in Java.

Plus, a lot of the cooler things about P5.js require an understanding of HTML and JavaScript. I think this is all a lot to learn at once, which is why I recommend starting with regular Processing to learn the basics of programming, then learning HTML and JavaScript, and finally combining it all to learn about P5.js. That’s how I’m going to organize the tutorials on this site.

All of that being said, that’s just my opinion, and it’s what I personally recommend. But if you’re a novice and you’re dead set on starting with P5.js, then check out the P5.js getting started guide and the learn guide. I also recommend this video playlist by Daniel Shiffman.

Of course, if you start learning P5.js and you find it a bit overwhelming, you can always come back here and start learning the basics in Processing! :smile_cat: