Un curso corto de programación creativa con p5.js, la biblioteca de JavaScript para dibujar y animar en un lienzo. El alumno empieza viendo un dibujo animado que son pocas líneas de código y, sala a sala, aprende las piezas con las que se escribe algo así: setup() y draw(), formas, colores, variables, condiciones, bucles, texto, funciones propias y arrays. Termina con dos sketches completos, un sistema de partículas y un árbol fractal recursivo.

El lab tiene 35 salas y casi todas siguen un ritmo de tres tiempos: una sala de observación, una de «Pon a prueba» y, en algunos temas, una de «Escribe tú».

• Observación. Un panel con el código a un lado y el lienzo en marcha al otro. El alumno mueve controles deslizantes y ve cómo cambian a la vez el dibujo y los números del código. No edita el código: solo cambia valores.
• Pon a prueba. Una o dos preguntas de opción múltiple y, en la mayoría, un reto de ordenar las líneas de un programa corto.
• Escribe tú. Una o varias casillas donde el alumno escribe una línea de código (una llamada a una función de p5.js, un operador, una condición, la cabecera de un for, una función) y se comprueba. Si acierta, el resultado aparece en el lienzo cuando la tarea dibuja algo.

No hay apuestas. Las salas de observación solo piden mirar y probar los controles; las de preguntas y las de escribir se dan por resueltas cuando el alumno completa todo lo que piden.

Salas por tema: 1 introducción; 2-3 setup(); 4-5 draw(); 6-7 formas; 8-10 fill, stroke y noStroke; 11-12 colores RGB; 13-15 variables globales y locales; 16-17 variables del sistema; 18-20 if; 21-23 for; 24-25 text(); 26-28 funciones propias; 29-31 arrays; 32-33 forEach, map y filter; 34-35 proyectos.

Qué se aprende

El alumno aprende a leer un programa de p5.js y a escribir fragmentos propios, con la idea de que el código describe lo que pasa en cada fotograma.

• Saber cuándo se ejecuta cada parte: setup() una sola vez, al principio; draw() unas 60 veces por segundo, con frameCount contando los fotogramas (salas 2-5).
• Dibujar con ellipse, rect y line en un sistema de coordenadas con origen arriba a la izquierda, y dar color con fill, stroke y noStroke (salas 6-10).
• Entender el color RGB como tres números de 0 a 255 (salas 11-12).
• Distinguir variables globales, que persisten entre fotogramas, de las locales, que se reinician en cada llamada, y usar +=, -= y *= (salas 13-15).
• Usar lo que p5.js ya sabe del entorno: mouseX, mouseY, width, height, mouseIsPressed (salas 16-17).
• Decidir con if y distinguir = de == (salas 18-20).
• Repetir con for y reconocer sus tres partes (salas 21-23).
• Escribir texto en el lienzo con text(), textSize() y textAlign() (salas 24-25).
• Definir funciones con parámetros y con return (salas 26-28).
• Guardar muchos valores en un array, añadir y quitar elementos, y recorrerlo con for...of, forEach, map y filter (salas 29-33).
• Juntar todo en dos sketches más largos, con arrays, funciones y recursividad (salas 34-35).

Ideas matemáticas clave

El lab es de programación; las ideas matemáticas son las que sostienen el dibujo.

• Coordenadas. El lienzo es un plano cartesiano con el origen en la esquina superior izquierda y el eje y hacia abajo; una elipse o un rectángulo queda determinado por posición y tamaño.
• Color RGB. Cada color es una terna (R, G, B) con valores de 0 a 255; (255, 0, 0) es rojo puro y (0, 0, 255), azul puro.
• Resto de una división. En la sala 4 se usa x % 400: cuando x llega a 400, el resto vuelve a 0 y la bola empieza otra vez por la izquierda.
• Variable como estado. Un contador que crece en cada fotograma y se compara con un límite (la bola que rebota en la sala 18).
• Condiciones y comparaciones. Operadores >, >=, ==, !=; = asigna y no compara.
• Iteración. Un for con inicio, condición y paso dibuja una fila de círculos con separación fija; cambiar el paso, el inicio o el fin cambia cuántos hay.
• Función como transformación. Una función con return devuelve un valor (cubo(3) es 27); map aplica una función a cada elemento de un array.
• Índices. Un array empieza en el índice 0: con lista = [1, 2, 3], lista[1] vale 2 y lista.indexOf(3), 2.
• Recursividad. En el árbol de la sala 35, rama(len, n) se llama a sí misma con una longitud menor (ratio) y un nivel menos, y se detiene cuando n llega a 0; push() y pop() guardan y restauran la posición.

Notas para el aula

• El alumno no escribe un programa completo: las tareas de escribir son de una o dos líneas y las demás son de mover controles, elegir opciones y ordenar líneas. Es una primera aproximación a p5.js, no un taller de programación libre.
• Los retos de escribir comprueban lo escrito (la función y sus argumentos, o la forma de la expresión) y muestran un ejemplo cuando se falla; el docente puede ver qué probó el alumno, también los intentos fallidos.
• Las preguntas sobre el uso de if (x = 5), que asigna en vez de comparar y en JavaScript no avisa, y sobre variables locales frente a globales son los puntos donde conviene detenerse con la clase.
• Las dos últimas salas funcionan bien proyectadas: el alumno cambia gravedad, rebote, ángulo o profundidad y relaciona cada parámetro con la línea del código.

Nivel: bachillerato (Informática). No se necesitan conocimientos previos de programación. Se escribe JavaScript; la sala 20 recuerda que, a diferencia de Python, los paréntesis del if son obligatorios.