https://p5js.org/

P5JS is a Javascript library enabling us to use creative coding and a similar language structure to Processing in the web browser. It has a really great web editor so we can edit and run code from the browser window.

Whilst there are many similarities between Processing and P5JS in the naming of functions and commands there are also some key differences.

<aside> 💭 The differences can feel a little frustrating to begin with so here are some guides to transitioning between Processing and P5JS

• https://github.com/processing/p5.js/wiki/Processing-transition
• Processing to P5 converter (works with simple methods. Will not work with large, complex code)
• The P5JS reference page contains lots of examples as to how to use the library functions.

</aside>

A great cheat sheet can be found here in many different languages.

p5.js

bmoren/p5js-cheat-sheet

<aside> 👉 There are some key differences in P5JS we will highlight when building a sketch.

• function instead of void
• createCanvas instead of size
• print() instead of println()
• There are no datatypes in Javascript. So int, float, String do not exist. They become var

</aside>

https://editor.p5js.org/jen_GSA/sketches/K0r5w2C1M

<aside> 👉 Exercise: Take a simple Processing sketch (this can be one on their example page) and convert it to P5JS using the web editor.

• What works and is the same?
• What is different and needs changing for Javascript?

</aside>

Whilst the P5 web editor looks and feels like an application P5JS is actually a library used in Javascript that also needs other web elements in order to run in the browser window. These elements are HTML and CSS.

<aside> 💡 HTML = set up of what is on the page: structure, initial content CSS = cascading style sheets: styling, visual look and feel Javascript = behaviour: code, generation of interactivity

</aside>

<aside> 👉 Exercise: Place an element of text using HTML not P5 code then change the styling of the text using CSS.

Here is an example to get started with: https://editor.p5js.org/jen_GSA/sketches/7Fac6THfb

</aside>