P5.js Basics

P5.js is a Javascript library that is based on Processing. Processing is a Java library and needs to be compiled and run through Java. P5.js and Javascript run directly in a web browser. Not only is that really powerful but it also allows the editor to be web-based. The video above gives a quick introduction to the web editor. 

You can see when you visit the web editor p5.js also includes the basic structure of processing. There is a setup function that runs once and there is a draw function that continuously runs. Instead of size() in setup p5.js uses createCanvas(). The other major difference is you don’t have to declare variables by type (int, float, string, etc) but simply “var.”  Also Javascript can handle dynamic arrays which means the length does not have to be predefined so there isn’t a need to use lists. There are a number of other differences but these are the main differences.

If you plan on using p5.js I would encourage you to check out the p5.js videos on Coding Train . I would do some of the examples in the videos whether it relates to your project or not so you get a sense of how p5.js works. I have included the first video that includes writing code below: