Tomás Domínguez Mínguez - Processing

Como habrá comprobado, ambos bloques son similares a los de setup()y loop()de Arduino.

NOTA.En este libro, con el ánimo de mostrar de la forma más clara y sencilla el funcionamiento de las funciones de Processing, se van a utilizar ejemplos que, por su simplicidad, en algunos casos permitirían que todo el código pudiera situarse dentro del bloque setup(), dentro del bloque draw()o, incluso, escribirlo sin utilizar ninguno de dichos bloques. Sin embargo, siempre se usarán ambos bloques ya que, de lo contrario, no se estaría siguiendo la filosofía de programación subyacente bajo Processing.

NOTA.Con frecuencia llamaré a las funciones Processing comandos. También me referiré a las líneas de código acabada en punto y coma («;») como sentencias. En el caso de las funciones setup()y draw(), al ser la base de la estructura de un programa Processing, las identificaré generalmente como bloques.

En Processing, el dibujo de interfaces de usuario se realiza a través de funciones específicas que le permitirán pintar, desde los elementos gráficos más elementales (como puntos y líneas), pasando por otros más elaborados (como figuras geométricas), hasta los más complejos realizados en 3D.

Naturalmente, podrá emplear el color allí dónde lo necesite, tanto para el fondo de la ventana de trabajo, como el trazo o el relleno de las figuras exhibidas.

Finalmente, Processing le permitirá realizar operaciones de rotación, traslación o escalado que, junto con el uso de las matrices de transformación, posibilitarán el desarrollo de gráficos avanzados que incluyan animaciones y efectos visuales con los que conseguirá interfaces realmente impactantes.

Los gráficos más elementales son los puntos y las líneas. Para dibujarlos, además de conocer las funciones gráficas que los muestran en pantalla, deberá saber cómo situarlos en una posición concreta. Para ello, será necesario conocer el sistema de coordenadas utilizado por Processing, concepto fundamental, previo a cualquier otro.

El elemento gráfico más elemental es el punto. Pero antes de dibujarlo debe saber cómo indicar a Processing dónde situarlo. Para ello, tiene que ver la ventana de su programa como una hoja de papel cuadriculado. En dicho papel, la intersección de cada línea horizontal y vertical especificaría las coordenadas de cada punto, tal como se muestra en la siguiente figura.

Por lo tanto, las coordenadas de un punto forman una tupla de dos números x (horizontal) e y (vertical) que determina su ubicación en la ventana. Es de destacar que el origen de coordenadas (0, 0) no está situado en el centro de la imagen sino en la parte superior izquierda.

Así, por ejemplo, el punto con coordenadas (10, 10) sería:

Conociendo el sistema de coordenadas utilizado, para indicar a Processing que dibuje un punto utilizaría el siguiente comando:

Es importante destacar que este comando hace referencia a un punto, no a un píxel. Un punto es un concepto cuya mínima expresión correspondería a un píxel. Como los puntos pueden ser más o menos grandes, Processing proporciona otro comando para especificar su grosor:

Donde el grosor viene dado en píxeles.

NOTA.Este comando también es válido para indicar el grosor de las líneas y los contornos de cualquier figura geométrica.

A continuación, se muestra un ejercicio en el que experimentará cómo se va rellenando de negro una ventana utilizando puntos en una posición y grosor aleatorio.

El código que se utilizará será el siguiente:

En el bloque setup()únicamente se fija el tamaño de la ventana en 300 × 300 píxeles.

En el bloque draw()establecerá de forma aleatoria las coordenadas (x, y) del punto que va a pintar, así como su grosor. Para ello, utilizará la función random(), que devolverá un valor de tipo float entre 0 y el número especificado como argumento. Dicho número tendrá que convertirlo posteriormente a entero mediante la función int(), ya que un número de píxeles no puede ser decimal (un píxel es indivisible). El grosor del punto también los establecerá aleatoriamente, pero en un rango de 10-20 píxeles. Por eso, en este caso se utilizará la función random()con dos argumentos, ya que, ahora, el valor que devuelva deberá estar comprendido entre el que ponga en el primer argumento y el segundo.

NOTA.La transformación entre tipos primitivos es una operación muy habitual en todos los lenguajes de programación que se conoce con el término inglés de casting . En este caso, utilizando la función int().

Finalmente, establecerá el grosor del punto y lo dibujará en la coordenada obtenida aleatoriamente en cada momento.

Vea otro ejemplo en el que va a simular cómo se veían las antiguas TV analógicas cuando se quedaban sin señal de antena. Los que ya tenemos «algunos» años lo recordaremos así:

Simularlo es muy sencillo con Processing. Para ello debería escribir un código similar al siguiente.

En el bloque setup()únicamente se define un tamaño de ventana de 300 × 300 píxeles y un grosor de punto de 2 píxeles.