1. Reto 1. Dibujos

1.3. Añadimos interactividad

Vamos al apartado «Example 2-2: Make Circles» del libro (página 12) y copiamos el código. El resultado será este:

Y ahora lo ejecutamos. Movemos el ratón encima del rectángulo creado con el canvas. Veremos que vamos dibujando círculos, blancos si no pulsamos el botón del ratón, negros si lo hacemos.

Ejercicios

Probad a cambiar el número que hay dentro de los paréntesis de las instrucciones fill(). Cambiad primero el primero y probad a ver qué pasa. Haced después lo mismo con el segundo. ¿Qué cambia? ¿Por qué lo hace de este modo?

Buscad en el manual de referencia de p5.js información sobre la instrucción fill(). Cambiad el color del círculo a rojo cuando se pulsa el botón del ratón y verde cuando no.

Lo que queda del capítulo 2 del libro

Quedan solo dos apartados en el segundo capítulo del libro. El titulado «Making a New Project» nos habla de cómo hacer nuevos proyectos. Nos podemos guardar esta información. Haremos referencia a ella en próximos retos. Pero ahora no la usaremos.

Y el apartado «Examples and Reference» lo leeremos con atención y visitaremos las páginas que nos recomienda.