p5.js Introducción

p5.js es una biblioteca de JavaScript utilizada para la codificación creativa. Se basa en Processing , que es un entorno de codificación creativa. El enfoque principal del procesamiento es hacer que sea más fácil para los principiantes aprender a programar aplicaciones gráficas e interactivas, para hacer que un lenguaje de programación sea más fácil de usar al visualizarlo.
La ventaja de usar el lenguaje de programación JavaScript es su amplia disponibilidad y soporte ubicuo: cada navegador web tiene un intérprete de JavaScript incorporado, lo que significa que los programas p5.js se pueden ejecutar en cualquier navegador web.
Además, Processing es ese lenguaje que hace hincapié en la viabilidad de que los programadores creen prototipos de software muy rápidamente, para probar una nueva idea o ver si algo funciona. Por esta razón, los programas de procesamiento (y p5.js) generalmente se conocen como «bocetos».

Editores Preferidos La documentación oficial de p5.js sugiere usar Bracket o Sublime y luego incluir los archivos JavaScript, finalmente nos lleva a trabajar como cualquier otro lenguaje de programación. Pero el editor web p5.js en línea es la mejor alternativa. Se basa en un entorno de programación basado en web.

¿Diferencia entre P5.js y JavaScript?
JavaScript es un lenguaje central que proporciona todas las características para construir cualquier funcionalidad en los navegadores. Puede usar Loop, Function, Conditional, DOM Manipulation, events, canvas, etc. Por lo tanto, al usarlo para desarrollar y diseñar cualquier marco.
p5.js es una biblioteca de JavaScript. P5.js se ejecuta en Pure JavaScript y proporciona algunas funciones que hacen que la vida del usuario de JavaScript sea fácil de dibujar en la web.
 
Ejemplo:

function setup() {
  createCanvas(400, 400); //Canvas size 400*400
}
  
function draw() {
  background('blue'); //background color blue
}

Producción:

setup(): Son las declaraciones en la función setup(). Se ejecuta una vez cuando comienza el programa. createCanvas debe ser la primera instrucción.
draw(): Las declaraciones en draw() se ejecutan hasta que se detiene el programa. Cada declaración se ejecuta en secuencia y después de leer la última línea, la primera línea se ejecuta nuevamente.

Referencia: https://p5js.org/

Créditos:
• Lauren McCarthy (creadora de p5.js)
• Cassie Tarakajian (creadora del editor web p5.js)