Chisme 166 del Lince: Processing Python, tu primer dibujo con código
Sierra Bermeja, una noche sin nubes. El Lince de la Noche ha pegado en la pared de su cueva un cartel enorme con el cielo, el monte y la luna, dibujado a mano con muchísimo cuidado.
—Perfecto —dice, y se aparta para admirarlo.
La Gata Montesa lo mira de arriba abajo.
—Precioso. Ahora lo necesito el doble de grande para la feria de ciencia. Y en un tamaño pequeño para el folleto.
El Lince se queda mirando el cartel. Después mira sus manos, con pintura hasta los codos.
—¿Tengo que dibujarlo todo otra vez?
—O lo dibujas con código —sonríe la Gata—. Una lista de instrucciones: «aquí una luna, aquí un monte». Si quieres otro tamaño, cambias un número.
Introducción
Hoy damos el primer paso con Processing Python, el modo Python de Processing: dibujar en la pantalla con unas pocas instrucciones. No hay que saber arte. Hay que saber dónde va cada figura y de qué color.
Pruébalo antes sin instalar nada en el simulador de Processing Python del Chisme 166. Es un mini emulador: escribes, ejecutas y miras.
Por qué usar Processing Python
Un dibujo a mano es un resultado. Con Processing Python el dibujo es una receta: la puedes repetir, cambiar un número y tenerla en otro tamaño, otro color o con otra figura.
Por eso la ciencia y la ingeniería dibujan con código: gráficas, mapas, planos, señales. En este curso lo usarás para pintar la parábola que calculaste en la clase anterior.
El lienzo y las coordenadas
Antes de dibujar hay que saber dónde está cada cosa. En Processing el origen (0, 0) está arriba a la izquierda.
La x crece hacia la derecha, como en matemáticas. La y crece hacia abajo, al revés que en las gráficas que conoces.
Un punto \(300, 100)\ está a 300 píxeles del borde izquierdo y a 100 del borde de arriba. El simulador te muestra la cuadrícula y las coordenadas del ratón para que lo veas.
El color RGB
Un color son tres números de 0 a 255: cantidad de rojo, de verde y de azul. \(0, 0, 0)\ es negro y \(255, 255, 255)\ es blanco. Es el sistema RGB, el que usan las pantallas.
El programa
Este es el sketch de Sierra Bermeja de noche, con el monte en tonos bermejos y un verde andaluz abajo:
\\\`python
size(400, 400)
background(10, 20, 60) # cielo nocturno
noStroke()
fill(250, 240, 200) # color de la luna
ellipse(300, 280, 80, 80) # luna saliendo
fill(150, 50, 25) # bermejo
rect(0, 300, 400, 100) # monte, queda encima
fill(0, 110, 60) # verde andaluz
rect(0, 360, 400, 40)
fill(255) # blanco
ellipse(70, 60, 6, 6) # estrellas
ellipse(150, 120, 6, 6)
ellipse(250, 50, 6, 6)
\\\`
Cada línea es una instrucción. \size\ crea el lienzo, \background\ pinta el fondo, \fill\ elige el color, \noStroke\ quita el borde, y \rect\ y \ellipse\ dibujan un rectángulo y una elipse.
Dos reglas para recordar
fill va antes de la figura. El color se aplica a lo que dibujes después, no a lo anterior.
Lo último que se dibuja queda encima. Por eso el monte tapa la mitad de la luna: se dibuja después.
Cómo probarlo en Processing Python
- Abre Processing en el ordenador.
- En el selector de arriba a la derecha elige el modo Python.
- Pega el programa y guárdalo (se guarda como archivo \
.pyde\). - Pulsa el botón de ejecutar.
Atención: el modo Python usa Python 2. Aquí no valen las f-strings, \print\ lleva un solo argumento y \7/2\ da 3.
Cambia un número y observa
- Cambia el \
280\de la luna por \90\: ¿qué se mueve? - Cambia \
size(400, 400)\por \size(200, 200)\: ¿qué pasa con el dibujo? - Mueve la luna para que quede delante del monte (dibújala después).
Preguntas de comprobación
Las comentamos en voz alta al empezar la clase. No hay entregable.
- En un lienzo de 400×400, ¿dónde aparece un círculo en \
(50, 350)\? - ¿Qué pasa si pones el \
fill\después del \ellipse\? - Si dibujas el monte antes que la luna, ¿qué se ve?
Qué hemos aprendido
- Con Processing Python un dibujo es una lista de instrucciones que se puede repetir y cambiar.
- En Processing el origen está arriba a la izquierda y la y crece hacia abajo.
- Un color es un trío de números de 0 a 255, y el \
fill\va antes de la figura. - Lo último que se dibuja queda encima.
Para seguir investigando
- Referencia de Processing en modo Python.
- Otra forma de dibujar con código, con un autómata: el Chisme 63, el simulador de incendio forestal.
- Formas geométricas en tres dimensiones: Chisme 161, formas 3D con A-Frame.
- Todos los chismes juntos, en el catálogo de los Chismes del Lince.
Y mañana por la noche…
El Lince mira su cielo recién dibujado, satisfecho. Entonces frunce el ceño.
—Faltan estrellas. Muchas. Digamos cien.
—¿Y vas a escribir cien líneas de \ellipse\?
—…
—Necesitas algo que repita —dice la Gata—. Eso es justo lo que veremos en clase.
