1. Diseño en papel¶
Paso 1/8 de práctica 1 "Lienzo interactivo"
Antes de escribir una sola línea de código, coge papel y lápiz. Esta fase es importante: te ayudará a pensar qué quieres hacer antes de preocuparte por la sintaxis.
Nota
Abre el editor online de p5.js en tu navegador: Editor p5js
No necesitas crear una cuenta para trabajar, aunque sí para guardar tu proyecto. Si quieres guardar, regístrate con tu correo del centro y una contraseña para este sitio.
¿Qué vamos a hacer?¶
En esta práctica vas a crear tu primera pieza de arte generativo con p5.js. El resultado será un lienzo animado que cambia en tiempo real según la posición del ratón: las formas se mueven, el color varía y el programa reacciona a ti.
No hay un único resultado correcto. Dos personas siguiendo los mismos pasos pueden llegar a composiciones completamente distintas dependiendo de sus decisiones estéticas. Eso es exactamente lo que buscamos.
El boceto en papel¶
Dibuja un rectángulo que represente tu lienzo (el canvas). Dentro de él:
Dibuja dos o tres formas: pueden ser círculos, cuadrados o rectángulos.
Anota unas coordenadas aproximadas para cada forma (un punto x e y desde la esquina superior izquierda).
Piensa: ¿qué cambiaría si el ratón estuviera en la esquina izquierda? ¿Y en la derecha? ¿Y abajo?
Anota en el papel qué propiedad de cada forma cambiarías con el ratón: ¿el tamaño? ¿el color? ¿la posición?
¿Por qué hacemos esto en papel?
El papel te obliga a pensar el problema antes de resolverlo. En programación, empezar a escribir código sin un plan previo suele llevar a código confuso y difícil de corregir. Un boceto de dos minutos te puede ahorrar diez minutos de errores.