Where to start coding with p5.js
- We recommend the site called OpenProcessing - it makes it easy to click "new sketch" and start immediately
- Alternatively, here's a starting sketch that defines functions the way you have learned so far
- If you want to use CodePen, here's a p5.js starting "pen"
- A tutorial for a random words poster which works through a project using p5.js
- Khan Academy platform is not stable for complicated programs
- Khan Academy doesn't "feel professional" or "polished"
- The Processing.js library used by Khan Academy has been retired
- p5.js is much more widely used than Processing.js
- p5.js has more and better documentation and tutorials
- p5.js is more advanced and more powerful than Processing.js. You can make sketches that:
Pick one element at random from an array
However, some of my favourite differences are very, very small. Here's one: If you have an array, you can pick one element of it at random, simply by passing the array as a parameter to the
Best place to learn p5.js
We recommend Daniel Shiffman's Youtube course: "Code! Programming with p5.js".
The above course introduces a website called "p5.js web editor" which allows you to quickly write your projects and test them out. It's ok, but we recommend a different website which does the same thing: https://www.openprocessing.org/.
It has a huge gallery of work by other artists, and you can see all of their code to learn from!
When you read others' code and it makes no sense...
Don't Panic! Do not be worried when you find a project that looks amazing but then you look at the code and can't understand it - this is normal.
- These projects can become VERY complex and the artists often aren't very concerned about how easy their code is to read
- Code reading is a skill you have to work on
- Take it slow. Study simpler projects to start with
In addition to "Code! Programming with p5.js"...
The creators of processing have a p5.js course on kadenze.com - "Introduction to Programming for the Visual Arts with p5.js"
Joshua Davis has some courses on processing on skillshare, which is free for 2 months.
Mostly aimed at teachers: Introduction to Computational Media with p5.js has material for teachers to run a course. Students can find some interesting project ideas.
If you want to stick with processing.js and Khan Academy longer, there is Advanced JS: Games and Visualizations. I haven't worked through this course, yet.
Some more differences between Processing.js and p5.js
As discussed above, there are some differences between Processing.js (used in the Khan Academy environment) and p5.js. Here are some more details of the differences.
You must always define the
drawfunction is not optional.
- All drawing operations (
rect(), etc) should go inside the
You can provide a
setup() function for set-up
It will be called before the first call to your
If you don't want animation, you must call
Unlike Khan Academy's Processing.js, you must always define a
draw() function, even if you don't want animation.
loop() can be used to prevent or enable animation by repeated calls to the
draw() function. The default is to animate.
You can't call Processing.js functions at the top level
You can't call functions like
rect() at the top-level (i.e. outside of the p5.js functions such
mousePressed(), etc). If you try to do this, you'll get an error such as
Uncaught ReferenceError: random is not defined
The editor at OpenProcessing.org is kind enough to add the following good advice - read your error messages!
Did you just try to use p5.js's random() function? If so, you may want to move it into your sketch's setup() function.
Global variables must be initialised in
setup(), if they need p5.js functions
If you want a global variable to be initialised at random, using p5.js's
random() function, you must do it in two parts:
- Declare the variable
var xPos;outside of the
- Initialise the variable inside the
xPos = random(0, 400);
GOOD CODE example - do this if you need to initialise a global variable using
BAD CODE example - this won't work
The default canvas is only 100, 100...
However, you can make it bigger calling
p5.js provides global variables
height which will hold the size of the canvas.
Where's the documentation?
The p5.js documentation is at https://p5js.org/reference/. Each function has multiple examples of how it can be used.
Other migration guides
If you want to stick with Processing.js, Khan Academy have this guide to using Processing.js outside Khan Academy.