What is p5.js?

We will be using p5.js to learn how to creative interactive interfaces.

What does "p5.js" mean? I honestly don't know. Sometimes a number in a name is used to truncate the word. For example, "i18n", is short for "internationalisation", there are "18" characters that have been removed. But p5.js doesn't appear to be short for anything. Perhaps the "5" refers to HTML5? (if you find out, let me know)

p5.js is derived from a tool called Processing. Processing was developed at the MIT MediaLab to make creative coding easier. Processing first appeared in 2001 (!). We need to remember that computers were much slower back then, had less RAM, smaller screens, and there was no such thing as a touch smartphone or tablet. The most popular language at the time was Java, which brought great improvements over the previously popular language, C, but was still difficult to learn unless you were very keen on programming.

Processing was a way to make building visual and interactive environments simpler. It is actually based on the Java language but removes a lot of the complexity and allows you to get straight to doing visual things.

Over 15 years later the world has moved on. We now have a good, and reasonably simple to learn language in every web browser, JavaScript. The web is the platform now. Hence, the p5.js project. p5.js is now an exact replica of Processing, however the concepts are similar. Processing uses a variant of Java syntax, even though JavaScript has similarities it is still different and p5.js doesn't attempt to look like Java or Processing, but is unashamedly JavaScript, which is a good thing because you will be able to take these programming skills and apply them to other web projects.

Okay, so p5.js is based on JavaScript, good, but what is p5.js? Good question!

Even though JavaScript is a simpler language than Java, the HTML5/CSS/JavaScript environment is still cumbersome to develop interactive and visual graphics. Basically you need to write a lot of HTML5, CSS, and JavaScript to get something simple to happen. This is partly because the web is not design for interactive applications per se, it primarily was designed as hypertext documents, although many websites these days to appear more as applications than documents. (an area where the web could improve)

p5.js assumes from the start you are interested in presenting a hypertext document, so no HTML5 is required, that is done behind the scenes for you. You also don't need to use CSS. It's straight into JavaScript, and this has also been simplified. When JavaScript was created it wasn't intended for its current use, again it was designed to manipulate a document. Doing fancy graphics requires some contortions. p5.js provides these ready to go on a platter, no need for contortions. Keep in mind that p5.js won't be any good for a creating a standard web page, but great for creating interactive graphics embedded into a web page. And indeed you can do that. You can take your JavaScript and the p5.js libraries and embed them into any other web page.

Okay so let's [get started with p5.js](Getting started with p5.js)...