Sesión 01: Introducción a p5.js

Objetivos

• Distinguir las funciones setup() y draw().
• Crear figuras geométricas y aplicarles color.
• Usar width y height para definir posiciones.
• Animar una figura y controlar sus colisiones con el lienzo.

Recorrido

1. Genera un proyecto desde Visual Studio Code con la extensión p5.js 2.x Project Generator.
2. En setup(), crea el lienzo y establece un fondo. Después, dibuja un círculo, un cuadrado y un triángulo.
3. Aplica fill() y sustituye coordenadas fijas por expresiones relativas a width y height.
4. En draw(), actualiza la posición vertical de un círculo y observa el bucle de renderizado.
5. Invierte la velocidad al alcanzar los límites. Ajusta la condición para que la colisión considere el radio de la figura.

Ejercicio final

Añade movimiento y colisiones a los otros dos círculos. Explica qué variables representan la posición y la velocidad, y justifica por qué el radio debe formar parte de la condición de colisión.

La explicación ampliada y las referencias se encuentran en el README de la sesión.