Chismes del Lince 54: Processing con Python

La noche caía sobre Sierra Bermeja y el Lince de la Noche llevaba tres horas encerrado en la Lince Cueva con un lápiz, una regla y cara de gran estratega. Quería mejorar la cueva: una sala nueva para los sensores, una antena en la entrada y una ventilación para que los aparatos no se asaran en verano. Hoy vamos a ver Processing con Python.

—Esto lo resuelvo yo con un plano —murmuró.

El plano llevaba ya doce hojas arrugadas. Los círculos le salían como huevos, las líneas nunca se encontraban y la sala de sensores acabó siendo más grande que la montaña.

La Gata Montesa asomó por la entrada, miró el montón de papeles y levantó una ceja.

—¿Estás diseñando una cueva o fabricando confeti?

—Estoy en un proceso creativo.

—¿Y si en vez de dibujarlo a mano le dices al ordenador dónde va cada cosa? Un círculo en este punto, una línea hasta este otro. Si te equivocas, cambias un número y ya está.

El Lince la miró con sospecha. Ya había pensado en comprar una impresora 3D, en contratar a un arquitecto y, durante cinco minutos, en aprender pintura al óleo.

—¿Y eso es muy difícil?

—Es Python. Y el programa ya viene con dos huecos, setup() y draw(), que te dicen dónde va cada cosa.

Dibujó un círculo. Luego, una casa. Luego descubrió que con un for podía dibujar diez círculos de golpe.

A las tres de la mañana la Gata lo encontró delante de la pantalla, con una sonrisa de oreja a oreja y un árbol que se ramificaba solo, como los pinsapos de la sierra.

—¿Y la sala de sensores?

—Mañana. Ahora estoy ocupado: he hecho un árbol que dibuja árboles.

https://montesteam.org/app/chisme54-processing.html

Introducción

En este chisme vamos a dibujar con Processing con Python. Construimos un taller de dibujo que funciona en el navegador: eliges órdenes, se escribe el programa y al instante ves el dibujo.

El programa ya viene con la estructura básica escrita: un hueco arriba para las variables, setup() para lo que se hace una vez y draw() para lo que se repite. Así nadie se pierde sobre dónde va cada cosa.

Si te lo enredas todo, hay dos botones de rescate: Borrar todo y Cargar lo básico. Y después de usarlos aparece Recuperar el anterior, por si te arrepientes.

Además, a la vez que escribes en Python, la página te va mostrando el mismo programa en JavaScript (p5.js). Así puedes probarlo fuera, en el editor de p5.js, o llevártelo a Thonny con py5.

Por qué este chisme

Hasta ahora el Lince ha medido cosas: sonido, luz, movimiento, temperatura. Este chisme da la vuelta: en vez de medir el mundo, lo dibuja. Antes de construir un aparato hay que diseñarlo, y diseñar es dibujar.

Programar dibujos tiene una ventaja enorme para aprender: el resultado se ve. Si te equivocas en un número, el círculo sale en otro sitio; si olvidas una sangría, el programa te lo explica. El error se convierte en algo que se mira y se corrige.

También tiene truco: con muy poco código aparecen cosas sorprendentes. Un for dibuja una cuadrícula; una función que se llama a sí misma dibuja un árbol fractal. Ese es el momento en que mucha gente descubre lo divertido que es programar.

Es un buen punto de enlace con otros chismes: ya dibujamos una espiral en La espiral del Lince y programamos en Python en El sismógrafo del Lince. Aquí el dibujo es el protagonista.

Cómo funciona

—¿Cómo sabe el ordenador dónde pintar? —preguntó el Lince.

—Con números. El lienzo es una cuadrícula de píxeles y cada punto tiene dos coordenadas: x, hacia la derecha, e y, hacia abajo. El punto (0, 0) está arriba a la izquierda.

Eso sorprende al principio, porque en matemáticas la y crece hacia arriba. En pantalla no. Cuando algo sale “del revés”, casi siempre es por esto.

Dos funciones: setup y draw

setup() se ejecuta una sola vez al empezar; ahí se crea el lienzo con size(ancho, alto). draw() se repite unas 60 veces por segundo; ahí va lo que se dibuja y lo que se mueve. Por eso una animación es solo un draw() que cada vez pinta algo un poquito distinto.

Colores y formas

Un color son tres números de 0 a 255: cuánto rojo, cuánto verde y cuánto azul. fill(255, 0, 0) es rojo puro; fill(255) es blanco. Las formas (rect, ellipse, triangle, line, arc) se pintan con el último relleno y el último borde que hayas elegido.

Repetir y llamarse a sí mismo

Un for i in range(10): repite lo que tiene debajo, con sangría, diez veces, y i cambia en cada vuelta. Con eso salen cuadrículas y filas de círculos.

Una función que se llama a sí misma se llama recursión. Si dibuja una rama y luego se llama dos veces para dibujar dos ramas más pequeñas, sale un árbol fractal.

Python dentro del navegador

La página no manda tu programa a ningún servidor. Descarga una vez Pyodide, que es Python compilado para el navegador, y lo ejecuta en tu propio ordenador. Las órdenes de dibujo (size, fill, ellipse…) son una versión pequeña de py5, la forma de usar Processing desde Python, y las dibuja un motor de la propia página.

En Python las órdenes se escriben en minúsculas y con guión bajo: no_fill(), stroke_weight(3), mouse_x. Si escribes noFill, la página te avisa de cómo se escribe en Python.

Qué necesitamos

Este chisme no lleva electrónica: solo un navegador.

• Un ordenador, una tablet o un móvil con un navegador moderno (Chrome, Edge o Firefox).
• Conexión a internet la primera vez, para descargar Python (unos 10 MB). El programa nunca sale de tu navegador.
• La página del taller de dibujo del Lince (el archivo chisme54-processing.html).
• Opcional: Thonny con el paquete thonny-py5mode, si quieres seguir en casa con py5.
• Opcional: el editor de p5.js (editor.p5js.org) para probar la versión en JavaScript.

Si la red del centro bloquea la descarga de Python, la página lo avisa. Compruébalo en un ordenador del aula antes de la clase.

Construcción

No hay nada que montar: la página tiene tres cajas, de arriba a abajo.

1. Elige órdenes. La paleta tiene botones agrupados por colores (lienzo, color y línea, formas, programar, animación). Al pulsar uno, la orden se escribe sola en su sitio: size en setup(), fill y ellipse en draw(), las variables y las funciones propias arriba del todo.
2. Tu programa. Aquí está el código en Python, con la estructura básica ya escrita. Puedes escribir tú, cambiar los números, cargar un ejemplo o pulsar ▶ Ejecutar (también sirve Ctrl + Enter).
3. Tu dibujo. Aquí aparece el resultado, con una rejilla opcional cada 50 píxeles y las coordenadas del ratón para colocar las formas.

Debajo del dibujo hay dos tarjetas más: el mismo programa en JavaScript, que se actualiza solo, y el apartado para llevártelo a Thonny.

Los dos botones de rescate son parte del diseño. Cargar lo básico devuelve el esqueleto con setup() y draw(). Borrar todo deja el cuadro vacío. Los dos guardan antes tu programa, y Recuperar el anterior lo trae de vuelta.

El código

La página completa del taller es un solo archivo HTML (chisme54-processing.html) que se sube tal cual; no hace falta tocarlo. Lo que sí importa es el programa en Python que escriben los alumnos. Son tres.

PARTE 1 · lo importante: el programa básico

Es lo que aparece al abrir la página o al pulsar Cargar lo básico. Las tres zonas están marcadas.

# ---- 1. AQUÍ ARRIBA: variables y funciones propias ----


def setup():
    # ---- 2. Se ejecuta UNA sola vez, al empezar ----
    size(400, 400)


def draw():
    # ---- 3. Se repite sin parar (unas 60 veces por segundo) ----
    background(220)

Lee y predice: si añades ellipse(200, 200, 100, 100) debajo de background(220), ¿dónde saldrá el círculo? ¿Y si lo pones en setup()?

PARTE 2 · un círculo que rebota (variables con global)

Si cambias dentro de draw() una variable creada arriba del todo, Python necesita global. Sin esa línea da error, y la página te explica por qué.

# Variables que cambian mientras dura la animación: arriba del todo
x = 50
vx = 3


def setup():
    size(400, 200)


def draw():
    global x, vx          # sin esta línea, Python se queja al cambiar x o vx
    background(30, 40, 70)

    x = x + vx
    if x > width - 25 or x < 25:
        vx = -vx          # rebota

    fill(255, 190, 40)
    ellipse(x, 100, 50, 50)

Lee y predice: ¿qué pasa si cambias vx = 3 por vx = 10? ¿Y si borras la línea global x, vx?

PARTE 3 · el árbol fractal (recursión)

La función rama dibuja un tronco y, desde su extremo, se llama dos veces con una rama un 30 % más corta, girada a cada lado. Se detiene cuando la rama mide 8 o menos.

def setup():
    size(400, 400)
    no_loop()


def draw():
    background(255)
    stroke(90, 55, 20)
    translate(200, 390)
    rama(90)


# una función que se llama a sí misma (recursión)
def rama(largo):
    stroke_weight(largo / 12)
    line(0, 0, 0, -largo)
    translate(0, -largo)
    if largo > 8:
        push_matrix()
        rotate(radians(25))
        rama(largo * 0.7)
        pop_matrix()
        push_matrix()
        rotate(radians(-25))
        rama(largo * 0.7)
        pop_matrix()

Lee y predice: ¿qué sale si cambias 25 por 45? ¿Y si cambias 8 por 30? ¿Para qué sirven push_matrix() y pop_matrix()?

NO ES NECESARIA: la traducción a JavaScript

La tarjeta de JavaScript se genera sola y no hay que escribir nada en ella. Es una traducción automática del Python a p5.js, pensada para comparar los dos lenguajes y para probar el dibujo en el editor de p5.js.

Cómo probarlo

1. Abre la página y espera a que junto a “Tu programa” ponga Python listo. La primera vez tarda unos segundos.
2. Pulsa el botón de ejemplos y carga Mi primer dibujo. Cambia un número de ellipse y mira qué se mueve.
3. Provoca un error a propósito: escribe noFill() en lugar de no_fill(). La consola negra te dirá cómo se escribe en Python.
4. Carga Sigue al ratón y mueve el ratón (o el dedo) sobre el dibujo.
5. Pulsa Borrar todo, después Recuperar el anterior, y por último Cargar lo básico.
6. Mira la tarjeta de JavaScript: cambia algo en Python y comprueba que el JavaScript cambia a la vez.
7. Pulsa Copiar JavaScript, abre el editor de p5.js, borra todo el contenido de sketch.js, pega y pulsa ▶.

Si un dibujo no aparece, mira primero la consola negra: casi siempre dice en qué línea está el problema y cómo arreglarlo.

La traducción a JavaScript es automática y solo entiende lo que se puede hacer con los botones y los ejemplos. Lo que no entiende queda marcado como SIN TRADUCIR.

Qué estamos aprendiendo realmente

Aquí no medimos nada, pero la ciencia sigue ahí. Un dibujo en pantalla es un modelo: unos cuantos números que representan una cosa. Para diseñar la Lince Cueva hay que decidir qué representa cada píxel, y eso es elegir una escala. Si 1 píxel son 5 centímetros, un lienzo de 400 píxeles representa 20 metros.

El color también son datos. Cada color son tres números de 0 a 255, así que hay 256 × 256 × 256, unos 16,7 millones de combinaciones posibles. Es una mezcla aditiva de luz roja, verde y azul, como la que hace tu pantalla.

Los fractales enseñan otra idea: la autosemejanza. Cada rama del árbol es una copia reducida del árbol entero. Para que no se repita sin fin hace falta un caso base (aquí, largo > 8); sin él, el programa no terminaría nunca. Por eso la página corta un fotograma que tarda más de 4 segundos y avisa de un posible bucle infinito.

Cuidado con confundir este árbol con el de El árbol del Lince: aquel era un árbol de decisión, para clasificar datos; este es un fractal, para dibujar.

Qué no es esta página

La página ejecuta Python de verdad, pero las órdenes de dibujo son una versión reducida de py5 hecha para el taller. No están las imágenes, el sonido, el 3D ni las formas libres, y el navegador es más lento que py5 con Java. Es un prototipo educativo para aprender los conceptos, no un sustituto de py5.

Para el aula

El chisme encaja sobre todo en Creación Digital y Pensamiento Computacional (saberes A.4 y A.5: funciones gráficas, diseño generativo, eventos de ratón y translaciones, rotaciones y escalados) y en Computación y Robótica. También sirve en TIC para los saberes E.1.4 (estructuras de control) y E.1.6 (funciones).

Preguntas para trabajar en clase:

• ¿Qué variable cambia cuando mueves un círculo? ¿En qué unidad se mide?
• ¿Por qué el punto (0, 0) está arriba a la izquierda y no abajo?
• Si 1 píxel representa 5 cm, ¿cuántos píxeles necesita una sala de 4 m × 3 m?
• ¿Qué diferencia hay entre poner una orden en setup() y ponerla en draw()?
• ¿Qué pasa con la memoria y con el dibujo si el for repite 600 veces en vez de 10?
• ¿Por qué el árbol necesita un caso base?
• Dos alumnos hacen la misma casa con números distintos: ¿cuál está “bien”? ¿Cómo lo decidimos?

Actividades concretas:

1. Planos de la Lince Cueva. Cada pareja dibuja la cueva vista desde arriba, con una escala elegida por ellos y escrita en un comentario del programa.
2. Cambia una cosa, predice. Antes de pulsar ▶, cada alumno anota en papel qué va a salir. Después se compara con lo que sale y se discuten las diferencias.
3. Cazar el error. Se reparte un programa con tres fallos (falta un :, una sangría mala, noFill). Hay que encontrarlos usando solo los mensajes de la consola.
4. Python frente a JavaScript. En parejas, encuentran cinco diferencias entre el programa en Python y su traducción a p5.js.
5. Galería. Cada grupo guarda su dibujo (PNG) y se proyecta la galería del aula.

Retos

1. Haz que funcione. Carga “Mi primer dibujo”, ejecútalo y localiza en qué línea está el círculo naranja.
2. Modifica algo. Dibuja tu casa con rect y triangle, y cambia los colores para que sea de noche.
3. Añade repetición. Usa un for para dibujar diez ventanas en fila.
4. Crea tu propia orden. Escribe una función con def que dibuje un árbol y úsala tres veces en sitios distintos.
5. Añade movimiento. Haz que el círculo que rebota cambie de color cada vez que toque una pared.
6. Añade el ratón. Haz que un dibujo cambie de tamaño según mouse_x.
7. Dibuja un plano. Diseña la sala nueva de la Lince Cueva a escala y marca dónde irían los sensores, la antena y la ventilación.
8. Conviértelo en una pequeña investigación. Cambia el ángulo del árbol (25, 35, 45…) y el factor de reducción (0.6, 0.7, 0.8). ¿Qué combinación se parece más a un pinsapo real? Justifícalo con la forma que ves.

Qué hemos aprendido

Hemos aprendido a dibujar con Processing con Python: unas pocas órdenes, dos funciones (setup() y draw()) y la idea de que un dibujo es un conjunto de números que se pueden cambiar. Hemos visto cómo un for repite, cómo una función puede llamarse a sí misma y por qué un error en pantalla es una pista, no un castigo.

El Lince todavía no ha diseñado la sala de sensores. Pero ya sabe que cuando tenga que hacerlo, no necesitará doce hojas de papel: le bastará con cambiar un número.

—Y además se ha divertido —dijo la Gata Montesa.

—No se lo cuentes a nadie. Todavía tengo una reputación que mantener.

Para seguir investigando

Si te ha gustado dibujar con Processing con Python, estos enlaces te llevan más lejos.

• py5: la documentación oficial de Processing para Python, con todas las órdenes y ejemplos.
• Referencia de Processing: todas las órdenes de Processing explicadas (en Java, pero los nombres sirven para buscar la orden equivalente en py5).
• Referencia de p5.js: lo mismo para la versión en JavaScript.
• La espiral del Lince: otra vez el dibujo, esta vez para analizar un temblor.
• El sismógrafo del Lince: más Python, con datos reales.
• El árbol del Lince: el árbol de decisión, que no es un fractal pero también se ramifica.