DA1:007 – p5.js: JavaScript version of Processing

p5.js

p5.js is a JavaScript library that brings many of the familiar Processing functions to JavaScript. Native JavaScript and various libraries allow you to do many of the things you would do in Processing, but using p5.js is a nice stepping stone to learning how to write JavaScript, since the structure will be familiar from Processing.

Why Would You Want to Use p5.j5 Instead of Processing?

There are many reason, but the main reasons would be:

  • Do you want to make things that run online in your web browser?
  • Do you want to make things that run on mobile devices?
  • Do you want to use some cool JavaScript library that you found online?

Processing is based on Java, and many years ago running Java Applets in your browser was pretty normal, but nowadays you should not even consider doing that.

JavaScript is now the new norm for many of the modern web features. There are tons of other libraries besides ps.j5 that you can use. JS plays really well together with HTML and CSS.

JavaScript will also run on most modern mobile devices on the web browser. Very complex things might not run very quickly or smoothly, but in most cases your code will probably run just fine.

Note that you can export Android applications straight from Processing.

Why Would You Want to Use Processing Instead of p5.js?

Again, many reasons exist and what you should use really depends on your project, but here are some cases where you probably would want to use Processing instead of p5.js:

  • Do you want to make art installations that run in an exhibition in a real physical space? (In most cases Processing is a better choice for an installation that is for example connected to a projector/multiple projectors/multichannel sound-system etc.)
  • In some cases p5.js is just not fast enough. Especially when you are working with lots of pixel data, videos etc. (Although this is really case-specific and Processing/Java is definitely not the fastest choice on the desktop either)
  • Do you want to work with some specific hardware? (JavaScript implementations for hardware are getting better and better, but with many special hardware [sensors, lighting equipment, video cameras etc.] it is probably easier to work with Processing.)
  • Do you want to make an application for your computer that you double-click to open? (You can export an application straight from Processing for Windows/Mac/Linux.)

How To Setup p5j5?

There is no separate application (IDE) where you would write your code and that would also run the application like in Processing. You can use any text editor to write the code and then see the results in your browser. The psj5 team is working on an editing environment, an it is alpha mode at the moment

Meanwhile, you can use one of the many online code editors available:

  • p5js Web Editor – Experimental alpha version of the official p5js editor.
  • OpenProcessing – OpenProcessing already setup to run p5j5. Probably the easiest place to start with
  • CodePen – CodePen is really popular with people working with JavaScript. Fairly easy to setup for p5js.

Or if you are really serious about starting to write JavaScript code. Use one of the many free text editors designed for coders. Go through this tutorial on how to setup a text editor for p5.js on your own computer..

What is the Difference in the Code?

Let’s compare the same simple sketch in Processing and p5.js

Processing

float eSize = 20;

void setup(){
 size(500,500);
 background(100);
}

void draw(){
 ellipse(mouseX, mouseY, eSize, eSize);
}

p5.js

let eSize = 20;

function setup() {
 createCanvas(500, 500); 
 background(100); 
} 

function draw() {
 ellipse(mouseX, mouseY, eSize, eSize);
}

Main Differences:

  • p5.js requires a HTML page where the code is loaded.
  • Use createCanvas() instead of size()
  • In p5.js all variables are let, you don’t need to define the data type of your variables like you do in Processing (int, float, String etc.)
  • let can be anything, even a function
  • You might also see var used instead of let, but using let will behave in a more familiar way to variables used in Processing so I would recommend you to use let. Here is a video explaining the difference.
  • In p5.js, you don’t need to specify return types for functions like you do in Processing (void, int, float etc.).
  • Objects work a bit differently and there are many ways to create objects.
  • If you want to load images, it might be a good idea to use the preload() function to load the images before the setup runs. See this example.
  • This page goes through some other things in detail and gives examples.

Where Can I Find More Information?

Example

Assignment