Primer contacto con p5.js
En esta práctica vamos a romper el hielo con el entorno de p5.js usando cosas que ya conoces de JavaScript y añadiendo los dos conceptos que acabamos de aprender: funciones y objetos. El objetivo no es dibujar cosas todavía, sino entender cómo funciona el programa por dentro.
🎯 Descripción de la tarea
Desarrolla un programa en p5.js que:
- Cree un canvas con un tamaño definido por 2 variables.
- Muestre un mensaje de bienvenida por consola sólo al comenzar el programa.
- Use una variable contador que se incremente continuamente y muestre su valor por consola de forma infinita.
📋 Requisitos que debe cumplir el programa
Para que la práctica esté correcta, tu código debe cumplir todo esto:
✅ El canvas se crea con la función createCanvas()
✅ El tamaño del canvas depende de 2 variables globales
✅ El mensaje de bienvenida sólo aparece una vez
✅ El contador aumenta continuamente
✅ El valor del contador se muestra por consola de forma infinita
🛠️ Paso 1 – Preparar las variables
Antes de nada, debes definir las variables globales:
- Una para el ancho del canvas.
- Una para el alto del canvas.
- Una variable contador, que empezará en 0.
let ancho = 400;
let alto = 300;
let contador = 0;💡 Estas variables se usarán en distintas partes del programa, por eso van fuera de las funciones.
🛠️ Paso 2 – La función setup()
Dentro de setup() debes:
- Crear el canvas usando las variables ancho y alto.
- Mostrar por consola un mensaje de bienvenida.
createCanvas(ancho, alto);
console.log("Bienvenido a mi primer programa");⚠️ Recuerda:setup() solo se ejecuta una vez, así que es el lugar perfecto para este mensaje.
🛠️ Paso 3 – La función draw()
Dentro de draw() debes:
- Mostrar el valor del contador por consola en cada ejecución.
- Incrementar el valor del contador.
console.log(contador);
contador++;Ten en cuenta algo importante: draw() se ejecuta una y otra vez automáticamente, como si fuera un bucle infinito. Por eso el contador no parará de crecer.
