Skip to main content

Processing.js Workshop

If you enjoyed using JavaScript to make drawings and animations, we recommend further study and play with the almost identical p5.js library. It's better.

Where to start coding with p5.js​

Why change?​

  • 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:
  • You can use modern javascript language features, which make things nicer

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 random() function.

Example:

// (inside your draw() function...)

var colorNames = ["maroon", "skyblue", "whitesmoke"];
var chosenColor = random(colorNames);
fill(chosenColor);

var words = ["code", "your", "future"];
var chosenWord = random(words);
text(chosenWord, 100, 100);

Best place to learn p5.js​

We recommend Daniel Shiffman's Youtube course: "Code! Programming with p5.js".

What's OpenProcessing.org?​

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

Other courses​

In addition to "Code! Programming with p5.js"...

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 draw() function​

  • The draw function is not optional.
  • All drawing operations (fill(), ellipse(), rect(), etc) should go inside the draw() function.

You can provide a setup() function for set-up​

It will be called before the first call to your draw() function.

If you don't want animation, you must call noLoop()​

Unlike Khan Academy's Processing.js, you must always define a draw() function, even if you don't want animation. noLoop() and loop() can be used to prevent or enable animation by repeated calls to the draw() function. The default is to animate.

Live Demo:

var setup = function () {
  noLoop();
};

var draw = function () {
  fill(random(255), random(255), random(255));
  rect(50, 50, 400, 400);
};

You can't call Processing.js functions at the top level​

You can't call functions like random(), fill(), color(), rect() at the top-level (i.e. outside of the p5.js functions such setup(), draw(), 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:

  1. Declare the variable var xPos; outside of the setup() function
  2. Initialise the variable inside the setup() function. Example: xPos = random(0, 400);

GOOD CODE example - do this if you need to initialise a global variable using random() or color() or width or height...

var xPos;

var setup = function () {
  xPos = random(0, 400);
};

BAD CODE example - this won't work

// Start of program
var xPos = random(0, 400); // can't call random() outside of setup() or draw(), etc.

var draw = function () {
  rect(xPos, 100, 50, 50);
};

The default canvas is only 100, 100...​

However, you can make it bigger calling createCanvas() in setup().

Live Demo of specifying canvas size:

var setup = function () {
  createCanvas(windowWidth, windowHeight);
};

p5.js provides global variables windowWidth and windowHeight, AND width and 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.