What is P5.js?

Around the year 2000, Ben Fry and Casey Reas developed the Processing Language. Processing, also known as P5, is designed as a highly visual langugage. From the Processing website: "Processing is a flexible software sketchbook and a language for learning how to code within the context of the visual art". Processing programs are called sketches. Processing is Java based and thus follows many of Java's syntactic rules.

Recall that in the year 2000, Java applets were very popular. Java was one of the ways to deliver rich graphical content in the web. There was no such thing as a canvas element that allowed you to draw into an element of the webpage natively. JavaScript was often thought of as a toy language, good only for small tasks but nothing of significance.

Since then, JavaScript (which is nothing like Java) has become the dominant language of web. JavaScript is now very efficient. It is the only language available in every browser. You can now create procedural graphics with JavaScript. At the same time, Java in the browser is largely dead. Applets are pretty much non-existent and generally unsupported. Flash is headed in the same direction as Java. Today's web involves the mix of several technology all of which is understood natively by the browser (html, JavaScript, css).

In 2007, John Resig started a project named Processing.js. Processing.js can be thought of a transpiler. In essence, Processing.js will translate Java based Processing code into JavaScript. It allows Processing sketches to be delivered without plugins to the browser. At Seneca College, where I work, a good number of students contributed to Processing.js under the direction of professor David Humphrey.

Processing.js accepts Processing code and turns it into JavaScript. In other words, as a user of Processing.js you would still be using Java based Processing. Processing.js translates Processing into JavaScript for you. It is possible to use processing.js as a graphics library in pure JavaScript. However, the syntax becomes a bit more complicated when used in this manner. It should be noted that Khan Academy's JavaScript unit uses Processing.js in its JavaScript form but it's editors do a few things to simplify that syntax. However, if you wish to take your sketch created in the Khan Academy editor, and put it on your own web page, you wouldn't be able to do it by simply setting it up like a regular processing.js sketch. If you would like to do that, I have set up the wrapper code needed to do that here. Just hit the tutorial link on the top right and follow the instructions. In any case, this book is not about Processing.js.

P5.js is not Processing.js. It is a reimagining of Processing to use JavaScript as its base instead of Java. From the p5.js site: "p5.js is a JavaScript library that starts with the original goal of Processing to make coding accessible for artists, designers, educators, and beginners, and reinterprets this for today's web.". Thus, when you use p5.js you follow JavaScript syntax rules and conventions. It is designed to be easy to use like Processing is. The base language though is JavaScript instead of Java.

From a teaching point of view, there are several big advantages to using p5.js:

• Creates graphics with the simplicity of Processing
• Adding other web elements can be done with p5.js plugins. For example if you want to use buttons, text boxes, and other media elements like like video can do so by adding p5.dom.js to your project.
• Regular Web Developer tools can be used. Both Firefox and Chrome come with built in debuggers and consoles. Writing code in JavaScript means that these tools are at your disposal