:date: 2026-06-23 :modified: 2026-06-28 :author: Esther Gordo :license: Creative Commons Attribution-ShareAlike 4.0 International :license_url: https://creativecommons.org/licenses/by-sa/4.0/ Diseño en papel =============== .. parsed-literal:: 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. .. note:: 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? .. admonition:: ¿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.