El Lince necesita un cartel con el cielo de Sierra Bermeja, y lo quiere en varios tamaños. A mano habría que repetir el dibujo cada vez; con código se cambia un número y está hecho. Un dibujo con código es una lista de instrucciones, y cada instrucción dice qué figura va, dónde y de qué color.
Esto es un mini emulador para entender la estructura. El programa de verdad lo ejecutas después en Processing, en modo Python.
1 · El lienzo y las coordenadas
En Processing el origen está arriba a la izquierda y la y crece hacia abajo, al revés que en las gráficas de matemáticas. Para pintar algo en (x, y) se cuenta x hacia la derecha e y hacia abajo.
Color RGB: tres números de 0 a 255 (rojo, verde, azul); (0, 0, 0) es negro y (255, 255, 255), blanco.
2 · Escribe, ejecuta y mira
Haz esto: (1) Ejecuta. (2) Pasa el ratón por el lienzo y fíjate en x e y. (3) Cambia el 280 de la luna por 90 y ejecuta otra vez (o pulsa «Luna alta»). (4) Prueba los otros dos botones y predice antes qué va a pasar. Lo que no se pinta como esperas es lo que más enseña.
Instrucciones que entiende el emulador: size, background, fill, noFill, stroke, noStroke, rect, ellipse, line, point, triangle.
3 · Dos reglas para recordar
fill va antes de la figura: el color se aplica a lo que dibujes después. Lo último que se dibuja queda encima de lo anterior, como las capas de un cuadro.
Y recuerda: Processing debe estar en modo Python (selector arriba a la derecha) y ese modo usa Python 2: sin f-strings, print con un solo argumento y 7/2 da 3.
Preguntas de comprobación
1. En un lienzo de 400×400, ¿dónde aparece un círculo en (50, 350)?
Abajo a la izquierda: a 50 píxeles del borde izquierdo y a 350 del borde de arriba, es decir, cerca del borde de abajo.
2. ¿Qué pasa si pones el fill después del ellipse?
La figura se pinta con el color anterior (blanco si no había ninguno). El nuevo fill solo afecta a lo que dibujes después.
3. Si dibujas el monte antes que la luna, ¿qué se ve?
La luna completa, encima del monte. Lo último que se dibuja queda encima.
Y mañana por la noche...
El Lince quiere cien estrellas. ¿Cien líneas de ellipse? Hace falta algo que repita. Eso lo vemos en clase.
Prototipo educativo. Todo ocurre en tu navegador y no se envía ningún dato.