Lo primero es invitarte a revisar la carpeta donde se aloja este documento index.html.
Asómate a /js, allí encontrarás p5.min.js, que contiene la versión "apretada"
de la biblioteca
de JavaScript que puedes descargar desde http://p5js.org/download/.
También asómate a /p5. Allí encontrarás varios script que se
ejecutan del lado del ciente,
escritos como corresponde al uso de la biblioteca de p5.js
Ya habrás notado que en la mayoría de los documentos *.html de la carpeta incluyen el elemento
<script>…/<script>, por el cual se vinculan los scripts que manipulan al
DOM.
Vale la pena abrir un pequeño paréntesis, para decir que el DOM
es la estructura lógica del documento. Accediendo a esta estructura es que JavaScript puede añadir, modificar o eliminar elementos y contenido en un documento *.html
Este paréntesis es una respuesta adelantada a la pregunta: ¿Dónde quedó lo que acabo de crear? ¡No lo veo en el código fuente!.
Nos estamos adelanto a una pregunta que contiene un error de conceptos: En el código fuente del documento *.html no verás el resultado mismo,
porque no se está manipulando directamente el código fuente sino que su estructura lógica. Lo que sí puedes ver es el script que, del lado del cliente, provoca el cambio en lo "renderizado" por el navegador.
Agreguemos un ejemplo sencillo:
Ahora revisa el código fuente y busca esa fecha, hora y huso horario. No encontrarás nada más que un párrafo, de una determinada identidad, que está vacío: <p id="demo"></p>.
Con ese ejemplo sencillo podemos cerrar el paréntesis, y comenzar por lo más básico en p5.js, esta reinterpretación de Processing que le debemos a
Lauren McCarthy. Revisemos el código en p5/cero.js, que está vinculado a este documento:
function setup() {
createCanvas(300, 300);
background(0);
}
function draw() {
ellipse(width/2, height/2, 80, 80);
}
Este código, ejecutado del lado del cliente, nos permite ver un canvas de 300 por 300 pixeles, de fondo negro, "agregado" al final de la página (pero en el código fuente no aparecer nada nuevo).
Realiza algunas modificaciones en p5/cero.js. Intenta:
background(r,g,b);ellipse(posX,posY,x,y) por un cuadrado rect(posX,posY,x,y);rectMode(CENTER); y