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:
1995: Java is developed by James Gosling at Sun Microsystems.
- Java had a goal of “write once, run anywhere” - any computer that can run Java can run Java programs. This was a big change from other programming languages at the time, which had to be recompiled for each type of computer.
2001: Processing is developed by an artist named Casey Reas and a data scientist named Ben Fry.
- Processing is built on top of Java, with the goal of providing a simplified syntax that allows developers to create animated and interactive applications.
- Several “modes” are added to Processing, which allows developers to write Processing applications in other languages, like Processing.py for Python.
2008: Processing.js is developed by John Resig.
2013: P5.js is developed by an artist named Lauren McCarthy.
- This can be used as “p5.js mode” from the Processing editor.
2014: Java releases an update that makes it very hard for novices to deploy applets.
- Various security settings and requiring a paid certificate means that applets are basically dead.
- Later, browsers remove the ability to run applets at all.
2015: Processing is updated to version 3.0.
- Before Processing 3, the
PAppletclass extended Java’s
Appletclass. But since applets weren’t really a thing anymore, it didn’t make sense to keep that around.
- Processing 3 also introduced a few features (like the
surfacevariable and the
- Before Processing 3, the
2016: Processing.js is no longer actively developed.
- Processing.js doesn’t support any new Processing 3 features.
You don’t have to memorize any of this, but hopefully it helps put everything into perspective.
P5.js versus Processing.js
The difference is a little bit philosophical, in that they had slightly different goals.
P5.js is based on Processing’s original goals, but the developers of P5.js didn’t tie themselves to Processing’s syntax. Some things are the same (like the
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:
- Are you completely new to coding?
Yes, I already have a sketch. Okay, does that sketch use any Java libraries or Processing 3 features?
- Yes, it uses Java libraries or Processing 3 features. In that case you have to use regular Processing, and you can only deploy your sketch as an executable. You can’t run it in a webpage.
- No, it doesn’t use Java libraries or Processing 3 features. Then you can deploy your sketch as Processing.js without changing any syntax.
No, I’m starting a new sketch. Cool, then I’d recommend P5.js!
- Yes, I already have a sketch. Okay, does that sketch use any Java libraries or Processing 3 features?
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.)
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!