Processing E-Book

Tomás Domínguez Mínguez

• Herausgeber: Marcombo
• Kategorie: Wissenschaft und neue Technologien
• Sprache: Spanisch
• Veröffentlichungsjahr: 2020

Seitenzahl: 321

Beschreibung

Processing es un lenguaje de programación con un entorno de desarrollo integrado, pensado para todo tipo de usuarios interesados en dotar a sus proyectos con una salida visual de la información. Si quiere descubrir cómo Processing deviene un complemento ideal para Arduino y ESP8266, este es su libro. Con él podrá ir más allá de la recogida de datos de sensores o el manejo de servos y motores, lo que le permitirá crear interfaces y entornos visuales interactivos para llevar sus proyectos con Arduino y ESP8266 a un nuevo nivel. Gracias a la multitud de prácticas que presenta el manual y la explicación paso a paso de los códigos podrá: o Desarrollar proyectos de forma rápida y sencilla, aprendiendo un nuevo lenguaje casi sin darse cuenta, ya que el entorno de desarrollo interactivo (IDE) en Arduino y Processing son muy similares. o Crear interfaces gráficas de usuario para presentar de forma vistosa todo tipo de información y realizar cualquier actividad de control desde un ordenador. o Conectar su ordenador o teléfono móvil a su Arduino de forma remota con Bluetooth o WiFi. o Usar protocolos de internet de las cosas (IoT) para recibir datos y dar órdenes a través de un móvil con acceso a Internet a cualquier dispositivo conectado a Arduino o ESP8266. o Procesar imágenes con métodos de visión artificial que le permitan identificar caras u objetos e, incluso, hacer un seguimiento de sus movimientos. o Desarrollar programas de realidad aumentada que añadan información gráfica o textual en tiempo real a las imágenes obtenidas de una cámara web. Además, en la parte inferior de la primera página del libro encontrará el código de acceso que le permitirá descargar de forma gratuita los contenidos adicionales en www.marcombo.info. Con la amplia variedad de técnicas reunidas en este libro podrá llegar a realizar casi cualquier cosa con Arduino y ESP8266. Disfrute de las enormes posibilidades de una plataforma que no para de crecer y sobrepase los límites de su imaginación. Tomás Domínguez es ingeniero de telecomunicación y doctorado en inteligencia artificial. Su labor profesional se ha desarrollado en una multinacional de telecomunicaciones, donde ha ocupado diversos cargos relacionados con la tecnología. Asimismo, ha ejercido como profesor universitario de ingeniería informática en la Universidad Alfonso X el Sabio de Madrid.

Leseprobe

A mi mujer, que es el amor de mi vida

Processing

Desarrollo de interfaces gráficas para Arduino

Primera edición, 2020

Segunda edición, 2023

© 2023 Tomás Domínguez Mínguez

© 2023 MARCOMBO, S. L.

www.marcombo.com

Cubierta: ENEDENÚ DISEÑO GRÁFICO

Maquetación: quimdiaz.net

Correctores: Nuria Barroso

Directora de producción: M.a Rosa Castillo

Cualquier forma de reproducción, distribución, comunicación pública o transformación de esta obra sólo puede ser realizada con la autorización de sus titulares, salvo excepción prevista por la ley. Diríjase a CEDRO (Centro Español de Derechos Reprográficos, www.cedro.org) si necesita fotocopiar o escanear algún fragmento de esta obra.

ISBN del libro en papel: 978-84-267-2791-6

ISBN del libro electrónico: 978-84-267-3202-6

Producción del ePub: booqlab

TABLA DE CONTENIDO

1. INTRODUCCIÓN

2. IDE PROCESSING

2.1 Instalación

2.2 Interfaz

2.3 Sketches

3. PROGRAMACIÓN CON PROCESSING

3.1 Funciones setup() y draw()

3.2 Hola Mundo

4. FUNCIONES GRÁFICAS

4.1 Grá cos elementales

4.1.1 Puntos

4.1.2 Líneas

4.2 Figuras geométricas

4.2.1 Rectángulos

4.2.2 Elipses

4.2.3 Arcos

4.2.4 Figuras geométricas personalizadas

4.2.5 Práctica: emoticono

4.3 Color

4.3.1 Práctica: emoticono en color

4.4 Textos

4.5 Imágenes

4.6 Transformaciones

4.6.1 Traslación

4.6.2 Rotación

4.6.3 Escalado

4.6.4 Matrices de transformación

4.6.5 Práctica: reloj analógico

4.7 Grá cos 3D

4.7.1 Transformaciones 3D

4.7.2 Figuras geométricas

4.7.3 Iluminación

4.7.4 Cámara

5. INTERACCIÓN CON EL RATÓN Y EL TECLADO

5.1 Uso del ratón

5.1.1 Práctica: pizarra electrónica

5.1.2 Práctica: control de movimiento 3D

5.2 Uso del teclado

5.2.1 Práctica: juego del frontón

5.2.2 Práctica: juego de los ladrillos

6. INTEGRACIÓN ARDUINO-PROCESSING

6.1 Librería Firmata

6.1.1 Práctica: blink

6.1.2 Práctica: linterna inteligente

6.1.3 Práctica: control direccional de un mecanismo pam tilt

6.2 Gestión directa de las comunicaciones serie

6.2.1 Envío de datos desde Processing hacia Arduino

6.2.2 Envío de datos desde Arduino hacia Processing

6.2.3 Práctica: mando de juegos

6.2.4 Práctica: espejo 3D

6.2.5 Práctica: osciloscopio

7. LIBRERÍA DE ELEMENTOS GRÁFICOS CONTROLP5 169

8. INTERNET DE LAS COSAS

8.1 Comunicaciones Bluetooth

8.1.1 El HC-05

8.1.2 Práctica: control de una persiana

8.1.3 Práctica: control del nivel de brillo de un led

8.1.4 Práctica: estación meteorológica

8.2 Comunicaciones MQTT

8.2.1 El WEMOS D1

8.2.2 Librerías ESP8266WiFi y PubSubClient de Arduino

8.2.3 Librería MQTT de Processing

8.2.4 Práctica: control de las luces de una casa

8.2.5 Práctica: control de la calefacción desde un teléfono móvil 234

9. VISIÓN ARTIFICIAL

9.1 OpenCV

9.2 Librería OpenCV for Processing

9.3 Características básicas de una imagen

9.3.1 Color

9.3.2 Brillo y contraste

9.3.3 Histogramas

9.4 Filtros de procesamiento de imágenes

9.4.1 Filtros basados en umbral

9.4.2 Filtro paso bajo

9.5 Detección de contornos

9.5.1 Bounding box

9.5.2 Aproximación poligonal

9.5.3 Práctica: clasificación de objetos por tamaño

9.6 Detección facial

9.7 Captura y reproducción de vídeo

9.7.1 Vídeo obtenido de una cámara

9.7.2 Vídeo procedente de un archivo

9.8 Procesamiento de vídeo

9.8.1 Práctica: mascota robótica I

9.9 Realidad aumentada

9.9.1 Práctica: clasificación de materiales

9.10 Detección de movimiento

9.10.1 Práctica: alarma inteligente

9.11 Color tracking

9.11.1 Práctica: mascota robótica II

Unidad 1

INTRODUCCIÓN

Processing es un entorno de programación dirigido al desarrollo de aplicaciones visuales e interactivas. Fue creado en 2001 por Casey Reas y Ben Fry con el objetivo de proporcionar una herramienta fácil de usar a diseñadores gráficos sin conocimientos previos de informática. Por lo tanto, su fin es la alfabetización software de estos colectivos en los que dicha disciplina no es más que una herramienta (como los pinceles) para alcanzar un fin: la creación artística.

Processing es de código abierto, por lo que se puede descargar y usar de forma gratuita, lo que ha fomentado la participación y colaboración de una comunidad cada vez más amplia que ha sido vital para su continuo crecimiento. No en vano, en el seno de esta gran familia se han desarrollado más de cien bibliotecas, tanto de presentación de información como de comunicaciones o electrónica, incluso de visión artificial, algunas de la cuales se describirán en esta obra.

Como resultado del compromiso de este proyecto por promover el aprendizaje del software dentro de las artes, especialmente entre aquellos que de otro modo no tendrían acceso a este tipo de herramientas y recursos, en 2012 fue constituida la Processing Foundation.

Según sus creadores, Processing consiste en:

• Un entorno de desarrollo, en el que podrá escribir, depurar y ejecutar sus propios programas.

• Un conjunto de funciones (también denominadas comandos) que conforman lo que en programación se conoce como API (Application Programming Interface, interfaz de programación), además de diversas bibliotecas que admiten funciones más avanzadas, entre las que destacan las de comunicaciones (utilizada para la integración con Arduino) o las de procesamiento de imágenes, audio o vídeo, entre otras.

• Un lenguaje, cuya sintaxis es casi idéntica a la de Java. Como esta es similar a la de C++, si programa en Arduino, también lo sabe hacer en Processing.

• Una activa comunidad online (http://processing.org). Sus componentes son el semillero que mantiene viva la llama del proyecto.

Quizá ahora le resulte difícil ver la relación entre un entorno de diseño gráfico y Arduino. Pronto cambiará de opinión, ya que la realización de los múltiples ejercicios propuestos durante la lectura de este manual le demostrarán que su orientación visual e interactiva hace posible el desarrollo de interfaces de usuario que facilitan las tareas de presentación de los datos recogidos a través de sensores o el control de sistemas mediante relés, servos o motores.

Unidad 2

IDE PROCESSING

A los entornos de desarrollo se los conoce por el acrónimo inglés IDE (Integrated Development Environment). En Processing, a este IDE se le llama PDE (Processing Development Enviroment) y, como verá más adelante, su aspecto recuerda al de Arduino, lo que facilita su aprendizaje.

El IDE Processing es muy simple, en línea con su orientación a usuarios con escasos conocimientos informáticos. Básicamente, incluye un editor de texto en el que se escriben los programas y una ventana de visualización donde se ejecutan. También dispone de una serie de herramientas que facilitan tareas como la selección de colores, la creación de fuentes, etc.

Aunque viene con un conjunto de librerías con las que se puede hacer todo aquello para lo que fue creado, permite el uso de otras desarrolladas por terceros que amplían sus capacidades, muy especialmente la de comunicación con Arduino.

Dispone de diferentes modos de programación. Por defecto se trabaja en el de Java, aunque es posible descargar otros que admiten el desarrollo de aplicaciones Python o incluso Android.

Seguramente esté deseando empezar a utilizarlo. Pero antes tendrá que instalarlo en su ordenador. Como pronto comprobará, la sencillez de manejo de este entorno se extiende también a la propia instalación que, a diferencia de otros entornos de desarrollo (especialmente Java), es prácticamente inmediata.

2.1 INSTALACIÓN

La última versión de Processing se encuentra en https://processing.org/download. Para descargarla, seleccione el sistema operativo del que disponga (Mac OS, Windows o Linux).

Aunque Processing es multiplataforma, los comentarios que se hagan en este obra relacionados con el sistema operativo harán referencia exclusivamente a Windows.

Si quiere saber si su ordenador Windows es de 64 bits, pulse en el botón “Inicio” (el situado en la esquina inferior izquierda del escritorio) y luego en “Configuración”.

En la ventana que aparece, pulse sobre la categoría “Sistema”.

Se muestra una nueva pantalla en la que tendrá que seleccionar la opción “Acerca de” situada al final de todas las que aparecen a la izquierda. Hecho esto, en el apartado “Tipo de sistema” del panel derecho encontrará la información buscada.

Después de descargar el archivo “.zip”, descomprímalo en la carpeta que haya elegido, por ejemplo, en Documentos. Se habrá creado una nueva cuyo nombre incluye la versión del entorno (en el momento de escribir este libro es la 4.0.1). No tiene que hacer nada más. En realidad, no hay ningún proceso de instalación ya que la aplicación no es más que un ejecutable (“processing.exe”) situado dentro de esta nueva carpeta (“processing-4.0.1”), bajo la que hay una estructura de subcarpetas con todo lo necesario para su funcionamiento.

En la ruta de instalación de la carpeta donde haya decidido instalar Processing no debe haber acentos ni cualquier otro carácter especial.

Estará impaciente por ver el aspecto de este IDE. Para ello, solo tiene hacer doble clic sobre el archivo “processing.exe”. Aparecerá la siguiente ventana:

Como puede observar, la interfaz está en inglés. Para cambiar el idioma, seleccione la opción “Preferences…” del menú “File”. Se abrirá una nueva ventana en la que podrá elegir el español de entre todos los ofrecidos en el menú desplegable asociado al campo “Language”.

Una vez hecho esto, pulse el botón “OK”. Para que los cambios surtan efecto tendrá cerrar el IDE y volver a abrirlo.

Antes de empezar la descripción de este entorno y todo lo que ofrece, si le resultara incómodo tener que acceder a la carpeta de Processing cada vez que quiera ejecutarlo, puede crear un acceso directo en el escritorio. Para ello, en Windows solo tiene que pulsar con el botón izquierdo del ratón en una zona vacía y seleccionar la opción “Nuevo” “Acceso directo”.

Aparecerá una ventana en la que se elige el archivo ejecutable de Processing y luego otra en la que se asigna un nombre al acceso directo (por ejemplo, “Processing”).

Al pulsar el botón “Finalizar” de esta última ventana, verá el acceso directo en su escritorio junto al del resto de aplicaciones.

2.2 INTERFAZ

Una vez realizada la instalación del entorno de desarrollo de Processing y la configuración del idioma, ya está en condiciones de empezar a utilizarlo. Pero, antes, conviene que conozca las distintas partes en las que se divide su interfaz.

Se trata de las siguientes:

1. Barra de menús. Contiene los menús desde cuyas opciones se accede a las diversas facilidades ofrecidas por el IDE.

2. Barra de herramientas. En la parte izquierda hay dos botones con los que se ejecutan o se paran los programas.

A la derecha se encuentra el menú con el que se selecciona el modo de ejecución (por defecto, Java) y un botón con forma de mariposa que activa el depurador (tiene el mismo efecto que la opción “Depuración” “Activar depurador”, que conocerá más adelante).

3. Pestañas para administrar archivos. Cuando los programas crecen, pueden ser difíciles de mantener. Para facilitar esta tarea, se aconseja dividir el código en varios archivos que se editan en pestañas independientes.

4. Editor de texto. Zona de la interfaz donde se escribe el código.

5. Área de mensajes. Aquí es donde aparecen los errores que se cometen durante la edición del código.

6. Consola de texto. Muestra tanto los mensajes de error del sistema como los de tipo informativo que haya incluido en el código con las funciones print() y println(), similares a Serial.print() y Serial.println() de Arduino.

7. Pie. Permite elegir si el tipo de información mostrada en la consola es la de error generada por el IDE o la informativa añadida por nosotros mismos.

Veamos en detalle la barra superior, ya que es donde realmente se concentra la funcionalidad proporcionada por esta herramienta.

En ella se encuentran los siguientes menús:

• Archivo. Entre sus opciones, destacan las necesarias para crear, abrir o guardar el código de un programa.

• Editar. Agrupa todas las opciones básicas que tiene cualquier editor de texto.

• Sketch. Además de la ejecución y parada de programas, que también se muestran como botones en la barra de herramientas, entre sus opciones destaca aquella con la que se importan librerías. Estas amplían las capacidades de Processing más allá de las que tiene integradas. Hay infinidad de librerías generadas por la comunidad de Processing que, como verá a lo largo de este libro, le posibilitará trabajar con imágenes 2D y 3D, grabar o reproducir archivos de audio y vídeo, realizar tareas de visión artificial o establecer comunicaciones con Arduino a través de su puerto serie, mediante cable USB, Bluetooth (conectándolo al módulo HC-05) o Internet (en este último caso, se emplearía una placa basada en el SoC ESP8266).

• Depuración. Permite activar y configurar el depurador, que es una importante herramienta de diagnóstico de errores. Al activarlo, toma el control sobre el avance de la ejecución del código, que puede hacerse línea a línea, o detenerse en los puntos de interrupción que determine. Una vez parado el programa, los valores de las variables se mostrarán en un panel independiente.

• Herramientas. Sus opciones abren utilidades de diferente naturaleza con las que podrá crear fuentes, utilizar colores específicos, etc.

• Ayuda. Como su nombre indica, contiene todo tipo de recursos que facilitan tanto el aprendizaje como el uso del IDE, además de enlaces a páginas web que ofrecen una explicación detallada del entorno, así como de resolución de errores, preguntas frecuentes, tutoriales, etc.

Las opciones de estos menús se irán estudiando poco a poco a lo largo del libro según se vayan necesitando. Sin embargo, las del menú “Archivo” son imprescindibles para empezar a trabajar con Processing, motivo por el que se describen a continuación.

2.3 SKETCHES

En Processing, al igual que en Arduino, a los programas se les llama sketches. Cada sketch tiene su propia carpeta, cuyo nombre es el del archivo (o el del principal, si hubiera varios). Por ejemplo, si escribiera un nuevo sketch y lo guardara con el nombre “HolaMundo”, se crearía la carpeta “HolaMundo”, dentro de la que existiría un archivo llamado “HolaMundo.pde”.

La extensión de archivo PDE es el acrónimo de Processing Development Environment.

El nombrado de archivos Processing sigue las mismas normas que en Arduino.

Si el código fuera muy extenso, en vez de escribirlo en un único archivo podría repartirlo entre varios (uno de los cuales sería el principal). En ese caso, cada uno de ellos se abriría en pestañas independientes, que se gestionarían mediante las opciones del menú desplegable con forma de flecha situado a la derecha del nombre de la propia pestaña. Como puede ver en la siguiente imagen, estas permiten crear nuevas pestañas, cambiar el nombre o eliminar la actual (entre otras):

Debido a su sencillez, las prácticas que se realicen en esta obra no requieren dividir el código en varios archivos, motivo por el que no tendrá necesidad de utilizar dichas opciones.

Además de los archivos de código, la carpeta del sketch puede contener otras carpetas, entre las que destaca la destinada a los archivos multimedia (“data”).

Como verá más adelante, cuando se agrega una fuente de texto, una imagen o un vídeo a un sketch mediante la opción “Sketch” “Agregar archivo...”, la carpeta de “data” se crea automáticamente.

Aunque los sketches se pueden almacenar en cualquier carpeta de su ordenador, Processing los guarda por defecto en un sketchbook (cuaderno de bocetos). Siguiendo el símil artístico, sería el cuaderno de dibujos del artista.

Para establecer la carpeta que representa el sketchbook, seleccione la opción “Archivo” “Preferencias…” (la misma con la que cambió el idioma de la interfaz). Se abrirá una ventana en la que tendrá que indicar su ruta de acceso en el campo “Ubicación del sketchbook”.

Al seleccionar la opción “Archivo” “Guardar”, los archivos se guardarán en dicha carpeta. Para abrirlos de nuevo, solo tiene que seleccionar la opción “Archivo” “Sketchbook” y pulsar aquel en el que se encuentra.

Esta configuración no es necesaria ni imprescindible, ya que los archivos se pueden guardar en cualquier carpeta y, posteriormente, abrirlos con la opción “Archivo” “Abrir”. Aunque esta última forma de trabajo le da más libertad, un cuaderno de bocetos le ayudará a mantenerlos ordenados.

Una vez que ya sabe que en Processing un programa es un sketch que se almacena en un sketchbook, ya está en condiciones de conocer las opciones del menú “Archivo”. Se trata de las siguientes:

• Nuevo. Abre una ventana con un sketch en blanco, al que nombrará automáticamente con la fecha actual usando el formato “sketch_ YYMMDDx” (la ‘x’ nal es un carácter que va cambiando para distinguir los que se hayan creado en el mismo día).

• Abrir. Abre un sketch en una nueva ventana.

• Reciente. Muestra la lista de sketches cerrados recientemente.

• Sketchbook. Abre una pequeña ventana en el que aparecen los sketches de su sketchbook.

• Ejemplos. Abre otra ventana donde se muestra la lista de programas de ejemplo de todas las librerías que tenga instaladas, sean nativas o importadas. Le animo a que ejecute alguno de ellos para comprender el enorme potencial de este lenguaje.

• Cerrar. Cierra la ventana del sketch que está visualizando.

• Guardar. Guarda el sketch en el sketchbook.

• Guardar como. Guarda el sketch con el nombre y en la carpeta que quiera.

• Exportar aplicación. Convierte el sketch en un archivo ejecutable.

• Configurar página. Define las opciones de impresión del código.

• Imprimir. Imprime el código del sketch.

• Preferencias. Configura aspectos de funcionamiento del entorno, como la ubicación predeterminada del sketchbook, el tamaño de la fuente utilizada en el editor de texto o el idioma, entre otros muchos.

• Salir. Cierra todas las ventanas y sale del IDE Processing.

Si quiere conocer las opciones del resto de menús, visite https://processing.org/environment o, simplemente, seleccione la opción “Ayuda” “Entorno” (le llevará a esta misma página).

Unidad 3

PROGRAMACIÓN CON PROCESSING

Aunque se hable de la programación con Arduino como si se tratara de un lenguaje específico, realmente no es así ya que se hace en C++. Lo que sucede es que Arduino incorpora dentro de su IDE un conjunto de funciones específicas que facilitan el control de los dispositivos hardware que se conectan a sus pines, ya sean de entrada y salida, tanto analógicos como digitales. En Processing sucede algo similar, solo que ahora se programa en Java y el foco es el diseño gráfico.

Aunque Java y C++ son lenguajes diferentes, el uso de variables, estructuras de control, operadores o el manejo de funciones tienen una sintaxis similar, por lo que podrá reutilizar los conocimientos de programación ya adquiridos con Arduino. Lo que sea específico de Processing se explicará a medida que sea necesario.

La referencia del lenguaje Processing se localiza en processing.org/reference. Este será el sitio al que deberá acudir para conocer los detalles de cualquiera de las funciones que lo componen.

3.1 FUNCIONES setup() y draw()

En Processing, el código de los sketches se estructura en dos grandes bloques, setup() y draw(), que en realidad son funciones muy singulares. En general, una función toma como entrada una serie de argumentos, que son los datos que necesita para realizar una tarea y devolver un resultado. En el caso que nos ocupa, ninguna requiere datos de entrada ni tampoco devuelven una salida. Por eso, se declaran así:

void setup(){

 …

}

void draw(){

 …

}

Las instrucciones que componen la función setup() se ejecutan una única vez. Por ese motivo, se utiliza generalmente para definir las condiciones iniciales del sistema como, por ejemplo, las dimensiones de la ventana, el color de fondo, el tamaño de la fuente de texto, etc. Solo puede haber una función setup() en cada programa y no se debe volver a llamar después de su ejecución inicial.

Por el contrario, las instrucciones de la función draw() se ejecutan una y otra vez de forma repetida. Son las encargadas de realizar el refresco de la imagen que se muestra en pantalla (al igual que los fotogramas de una película) con el fin de dar sensación de movimiento. Cada uno de dichos fotogramas se pinta en un ciclo del bucle, en el que también se atienden los posibles eventos de teclado, ratón, comunicaciones, etc., que permitirán la interactividad del programa.

Como ya se habrá dado cuenta, la estructura de un sketch Processing es similar al de Arduino, en la que las funciones setup() y loop() juegan un papel análogo.

Como las funciones setup() y draw() son la base de la estructura de un programa Processing, se hará referencia a ellas como bloques.

3.2 HOLA MUNDO

El aprendizaje de un lenguaje de programación siempre comienza con un pequeño programa llamado “Hola Mundo” que muestra la forma de usarlo.

En este caso consistirá en un texto que sigue el puntero del ratón dentro de la ventana de la aplicación.

Su código es el siguiente:

void setup(){

size(300, 100);

}

void draw(){

background(0);

text(“Hola Mundo”, mouseX, mouseY);

}

Como puede observar, se aprecian los dos grandes bloques presentes en cualquier sketch: setup() y draw().

Dentro del primero se llama a la función size(), cuyos argumentos determinan el tamaño de la ventana de la aplicación (300 × 100 píxeles).

Si no se fijara un tamaño de forma explícita, Processing abriría una ventana de 100 × 100 píxeles. Si quiere que el programa ocupe toda la pantalla, susituya esta función por:

fullScreen()

En ese último caso, para salir de la aplicación deberá mantener pulsada la tecla Esc.

La función size() debe ser la primera del bloque setup(). Solo se puede llamar una vez y no permite redimensionar el tamaño de la ventana. Además, los valores de sus argumentos deben ser números, en ningún caso variables.

En el bloque draw(), la función background() establece el color de fondo especificado como argumento. En este caso, el valor 0 indica que se trata del negro.

Por defecto, Processing asigna un color de fondo gris claro. En la sección dedicada a los colores conocerá la distintas formas de especificar cualquier otro.

A continuación, se muestra el texto “Hola Mundo” con la función text(). El primer argumento de esta función es una cadena de caracteres y los otros dos las coordenadas x, y del punto donde empezaría a escribirse. En esta ocasión, dichas coordenadas son variables del sistema que contienen las coordenadas x, y del ratón en todo momento (mosuseX y mouseY).

Una vez desarrollado este programa, guárdelo con el nombre “HolaMundo”. Tanto si lo ha hecho en su sketchbook como en cualquier otra ubicación del disco, compruebe que se ha creado una carpeta con dicho nombre, dentro de la que se debe encontrar el archivo “HolaMundo.pde”.

Solo quedaría verificar si el comportamiento del sketch es el descrito. Para ello, pulse el botón “Ejecutar” de la barra de herramientas, lleve el ratón dentro de la ventana y confirme que el texto lo va siguiendo allí donde se mueva.

Observe que en la barra de título de la ventana aparece el nombre de dicho archivo (sin la extensión). Si quisiera darle su propio título, añada la siguiente sentencia en el bloque setup():

surface.setTitle(“Hola Mundo”);

Es importante que entienda correctamente el papel de los bloques setup() y draw(), ya que es la base del funcionamiento de cualquier sketch de Processing. Con el fin de afianzar dicho conocimiento, cambie de bloque la función background() con la que se fijó el color de fondo de la ventana. El código del sketch sería ahora el siguiente:

void setup(){

size(300, 100);

background(0);

}

void draw(){

text(“Hola Mundo”, mouseX, mouseY);

}

¿Cree que el funcionamiento del programa seguiría siendo el mismo? Para salir de dudas, ejecútelo de nuevo.

El resultado es completamente diferente porque esta vez la frase “Hola Mundo” se ve arrastrada por toda la ventana. El fondo sigue siendo el mismo (de color negro), pero dicha frase se vuelve a dibujar una y otra vez al mover el ratón. El motivo es porque ahora en cada iteración de la función loop() no se borra lo dibujado previamente. En cambio, en el código original se pintaba de negro la ventana con la función background() antes de volver a escribir la frase “Hola Mundo”, lo que eliminaba cualquier rastro de aquello se hubiera mostrado anteriormente, a la vez que producía el efecto de movimiento del texto.

En Processing, el texto no deja de ser un objeto gráfico, como una línea o una figura geométrica. Por lo tanto, se puede decir que Processing “dibuja” el texto, no lo escribe. En cualquier caso, siempre tiene la posibilidad de presentar cualquier tipo de información por la consola con las funciones print() y println(), algo que suele resultar muy útil durante el proceso de pruebas. A modo de ejemplo, modifique el código del sketch para que informe por consola del ancho y el alto de la ventana en la que se ejecuta:

void setup(){

size(300, 100);

println(“Ancho: “ + width, “Alto: “ + height);

}

void draw(){

background(0);

text(“Hola Mundo”, mouseX, mouseY);

}

En la siguiente imagen puede observar que, en la parte inferior de la interfaz, aparecen los valores establecidos mediante la función size().

Por último, si quisiera compartir la aplicación una vez finalizada, Processing le ofrece la posibilidad de crear un archivo que podría ejecutarse en Windows, macOS o Linux. Evidentemente, allí donde se lo lleve no será necesario tener instalado el IDE Processing.

A tal efecto, seleccione la opción Archivo Exportar aplicación. Se abrirá una ventana en la que se puede elegir el sistema operativo y si quiere que se vea a pantalla completa.

Al pulsar el botón “Exportar” comenzaría un proceso que finaliza con la creación de una carpeta específica dentro del propio sketch, donde se almacenaría el ejecutable. Así, en el utilizado de ejemplo, dentro de la carpeta “HolaMundo” habría otra llamada “windows-amd64” en la que estaría el archivo “HolaMundo.exe”.

Cierre el IDE Processing y pulse dos veces sobre dicho archivo para ejecutarlo. Aparecerá la misma ventana de antes, pero esta vez al margen del IDE Processing.

Unidad 4

FUNCIONES GRÁFICAS

En Processing, el dibujo de interfaces de usuario se realiza a través de funciones específicas que permiten 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í donde lo necesite, tanto de fondo de pantalla, como para el trazo o el relleno de las figuras o los textos mostrados.

Finalmente, Processing facilita el uso de operaciones de rotación, traslación o escalado que, junto con las matrices de transformación, hacen posible el desarrollo de gráficos avanzados que incluyan animaciones y efectos visuales con los que obtendrá interfaces realmente impactantes.

4.1 GRÁFICOS ELEMENTALES

Los gráficos más elementales son los puntos y las líneas. Pero antes de aprender a dibujarlos, deberá conocer el sistema de coordenadas utilizado. Inicialmente trabajará en uno de dos dimensiones formado por un eje horizontal (X) y otro vertical (Y) que forman un plano donde la ubicación de un punto viene determinada por sus coordenadas (x, y).

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

Si le gustaban las matemáticas, recordará que los valores x, y son el resultado de la proyección ortogonal del punto en cada uno de los ejes.

Es de destacar que el origen de coordenadas (0, 0) se sitúa en la esquina superior izquierda (no en el centro).

Una vez que sabe cómo situar un punto en la pantalla, solo quedaría pintarlo. Siga leyendo y descubrirá cómo hacerlo.

4.1.1 Puntos

El elemento gráfico más elemental es el punto, que se dibuja con la función:

point(x, y)

Es importante destacar que esta función hace referencia a un punto, no a un píxel, ya que estos pueden ser más o menos gruesos. Solo si tuviera el tamaño mínimo, equivaldría a un píxel. La función que permite especificar dicho tamaño es:

strokeWeight(grosor)

Su único argumento representa el grosor en píxeles.

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

A continuación, realizará un ejercicio en el que se simula el aspecto de una hoja de papel sobre las que van cayendo gotas de tinta en una posición y con un grosor aleatorios.

El código utilizado para obtener este resultado es el siguiente:

Al inicio del programa se declaran las variables globales que representan las coordenadas (x, y) y el grosor del punto que se va a dibujar en cada iteración del bloque draw().

int x, y, grosor;

Processing usa la misma sintaxis que Arduino para añadir comentarios al código.

En el bloque setup() únicamente se fija el tamaño de la ventana con la función size().

size(300, 200);

Lo primero que se hace en el bloque draw() es asignar un valor aleatorio a las coordenadas del punto que va a pintar. Para ello, se utiliza la función random(), que devuelve un número de tipo float entre 0 y el especificado como argumento. Así, el valor de la coordenada ‘x’ estaría comprendido entre 0 y el ancho de la ventana, mientras que el de la coordenada ‘y’ sería entre 0 y el alto de la ventana. El ancho y el alto de la ventana se encuentran almacenados en las variables del sistema width y height, respectivamente. Como un número de píxeles no es decimal (un píxel no es divisible), el valor devuelto por la función random() se convierte a entero con la función int().

La transformación entre tipos primitivos es una operación habitual en cualquier lenguaje de programación, que se conoce con el término inglés de casting. Por ejemplo, la función int() convierte a entero cualquier valor del tipo boolean, byte, char, float, long o String. Las principales funciones de casting de Processing son boolean(), byte(), char(), float(), long() o str(). El tipo devuelto por dichas funciones se deduce de su nombre.

Después se hace lo mismo con el grosor del punto, que varía aleatoriamente entre 0 y 20 píxeles.

Finalmente, se fija el grosor del punto y se dibuja en las coordenadas obtenidas aleatoriamente.

strokeWeight(grosor);

point(x, y);

Ejecute el programa y observe el curioso efecto que producen las gotas de tinta al caer sobre el papel.

4.1.2 Líneas

Una línea es una sucesión continua de puntos en el espacio. En cambio, un segmento es la línea más corta entre dos puntos (x1, y1) y (x2, y2). Eso es precisamente lo que dibuja la siguiente función, cuyo nombre no refleja exactamente lo que hace desde un punto de vista matemático:

line(x1, y1, x2, y2)

Aunque se trate de segmentos, siempre se hará referencia a estos como líneas.

Así, en la figura mostrada a continuación se observan dos líneas que se cruzan.

La línea vertical une los puntos (30, 10) y (30, 50) y la horizontal el punto (10, 30) con el (50, 30), por lo que en Processing se dibujaría así:

line(30, 10, 30, 50);

line(10, 30, 50, 30);

En una línea se pueden intercambiar los puntos origen y final, ya que el resultado sería el mismo.

Ahora que sabe dibujar líneas, realizará un sencillo ejercicio que divida la pantalla en una cuadrícula. El código sería el siguiente:

En primer lugar, se declara la variable que almacena el tamaño de la cuadrícula (20 píxeles de lado).

En el bloque setup() únicamente se fijan las dimensiones de la ventana con la función size().

size(300, 300);

En el bloque draw() hay dos bucles: uno dibuja las líneas verticales y otro las horizontales.

En el caso de las líneas verticales, en cada iteración se va aumentando el valor de la coordenada ‘x’ desde 0 hasta el ancho de la ventana (width) a incrementos de ladoCuadricula. La coordenada ‘x’ de los puntos inicial y final de estas líneas son iguales (es la variable del bucle). En cambio, la coordenada ‘y’ toma siempre el valor 0 en el primero y height en el segundo (la longitud de todas las líneas verticales es la del alto de la ventana).

Para dibujar las líneas horizontales, en cada iteración del bucle for la coordenada ‘y’ aumenta de valor desde 0 hasta el alto de la ventana (height) a incrementos de ladoCuadricula. Ahora es la coordenada ‘y’ de los puntos inicial y final la que coincide (es la variable del bucle). En cambio, la coordenada ‘x’ toma siempre el valor 0 en el primero y width en el segundo (la longitud de todas las líneas horizontales es la del ancho de la ventana).

Ejecute el sketch. El resultado obtenido debería ser el siguiente:

En esta otra práctica se simula lo que haría un niño pequeño cuando se le deja delante de una hoja de papel con un lapicero. Previsiblemente, empezaría a rayarla de forma aleatoria en cualquier dirección sin levantar el bolígrafo del papel, tal como se muestra a continuación:

¿Cómo se conseguiría este mismo comportamiento en Processing? Muy sencillo:

Primero se declaran las variables que se van a utilizar para especificar las coordenadas de los puntos inicial (x1, y1) y final (x2, y2) de cada línea.

int x1, x2, y1, y2;

En el bloque setup() únicamente se establece el tamaño de la ventana.

size(300, 300);

En el bloque draw() se calculan las coordenadas de los puntos inicial y final de la línea que se va a dibujar en cada iteración. Como las rayas van en zigzag, ya que se parte del supuesto de que los niños no levantan el bolígrafo del papel, se hace coincidir el punto de inicio de la nueva línea con el final de la anterior.

De esa manera, solo será necesario obtener de forma aleatoria las coordenadas del punto final.

Una vez calculadas las coordenadas (x1, y1) y (x2, y2), solo queda dibujar la línea que las une.

line(x1, y1, x2, y2);

Ejecute este programa y observe el peculiar efecto que se produce mientras se dibujan unas líneas que parecen trazadas por una mano misteriosa.

4.2 FIGURAS GEOMÉTRICAS

Una vez conocidos los elementos de dibujo más básicos, ya puede empezar a trabajar con figuras geométricas. En concreto, se estudiarán las siguientes:

• Rectángulos

• Elipses

• Arcos

Cada una de ellas tendrá su propia sección. Empecemos con la primera, dedicada a los rectángulos.

4.2.1 Rectángulos

Processing permite trazar un rectángulo de diversas formas, según la información que se disponga sobre sus dimensiones y su posición. La manera más habitual de hacerlo es a partir del ancho, el alto y las coordenadas de su esquina superior izquierda mediante la siguiente función:

rect(x, y, ancho, alto)

Evidentemente, si el ancho y alto fueran iguales, lo que pintaría sería un cuadrado, como en la figura anterior, obtenido con la sentencia:

rect(10, 10, 40, 40);

Una forma alternativa de dibujar un rectángulo sería tomando como referencia su centro, tal como se muestra en esta otra figura:

En este caso, antes de la función rect() habría que indicar a Processing que las coordenadas x, y no son las de la esquina superior izquierda, sino las del centro de la figura con la función:

rectMode(CENTER)

Así, el siguiente código dibujaría el cuadrado de la figura anterior:

rectMode(CENTER);

rect(30, 30, 40, 40);

En Processing es costumbre escribir las constantes en mayúsculas. En este caso, CENTER es una constante el propio sistema. A diferencia de otros lenguajes, Processing es sensible a las mayúsculas y las minúsculas (en inglés se dice que es case sensitive), por lo que no podrá escribir Center ni center.

También se podría identificar un rectángulo por los puntos de sus esquinas superior izquierda e inferior derecha, tal como se puede ver en esta otra figura:

En tales circunstancias, la forma de llamar a la función rectMode() sería:

rectMode(CORNERS)

Ahora Processing interpretará los dos primeros argumentos de la función rect() como las coordenadas de la esquina superior izquierda (x1, y1) y los dos últimos las de la esquina inferior derecha (x2, y2). De ese modo, el código con el que se dibujaría el cuadrado de ejemplo anterior quedaría así:

rectMode(CORNERS);

rect(10, 10, 50, 50)

Por defecto, los rectángulos se dibujan interpretando los dos primeros argumentos de la función rect() como las coordenadas correspondientes a su esquina superior izquierda, que de forma explícita se podría indicar también con el comando rectMode(CORNER). No confunda esta constante con CORNERS.

4.2.2 Elipses

Para dibujar una elipse se usan generalmente las coordenadas de su centro y el tamaño de sus ejes horizontal y vertical como argumentos de la función:

ellipse(x, y, tamaño eje X, tamaño eje Y)

Evidentemente, si el ancho y el alto de ambos ejes fueran iguales, el resultado sería una circunferencia, como la que aparece en la figura anterior, obtenida con la sentencia:

ellipse(30, 30, 40, 40);

De forma similar a lo que ocurría con los rectángulos, también es posible cambiar el significado de los argumentos de esta función llamando previamente a ellipseMode(). Su único argumento puede tomar como valor las constantes CENTER (por defecto), RADIUS, CORNER o CORNERS. En los dos últimos casos, la esquina o esquinas hacen referencia al rectángulo en el que estaría circunscrita la elipse (en la siguiente imagen con líneas punteadas).

4.2.3 Arcos

Un arco puede asemejarse a una elipse incompleta. Dicho de otra forma, una elipse es un arco de 360º. Para trazar un arco, Processing proporciona la función:

arc(x, y, tamaño eje X, tamaño eje Y, ángulo inicio, ángulo fin)

Como en el caso de las elipses, los dos primeros argumentos son las coordenadas x, y del centro de la elipse imaginaria de la que formaría parte. Los dos siguientes contienen la longitud de sus ejes horizontal y vertical. Los dos últimos argumentos toman como valor los ángulos entre los que estaría comprendido el arco (expresados en radianes).

Así pues, el arco mostrado a continuación se dibujaría con la sentencia:

arc(30, 30, 40, 40, 0 , HALF_PI)

Como habrá supuesto, HALF_PI es una constante de Processing cuyo valor es π/2. Más adelante verá que una circunferencia completa es un arco que recorre un ángulo de 2π radianes. Si prefiere trabajar con grados, también aprenderá a pasar de una unidad a otra.

4.2.4 Figuras geométricas personalizadas

Las figuras estudiadas hasta ahora han sido las básicas, pero en un caso práctico seguramente necesite trabajar con formas más complejas, en cuyo caso necesitará aprender a manejar las coordenadas de sus vértices, ya que las líneas que los unen constituyen el contorno del polígono. Por poner un ejemplo sencillo, imagine que se quiere pintar el siguiente triángulo:

Tal como se acaba de comentar, este triángulo podría describirse por las líneas que unen los vértices, situados en las coordenadas (30, 10), (50, 40) y (10, 40). En lenguaje Processing un vértice se declara con la función:

vertex(x, y)

Puesto que la figura geométrica estará formada por un conjunto de vértices, todos ellos deberán ir agrupados dentro de las sentencias:

beginShape()

endShape()

En resumen, el triángulo anterior se dibujaría con el siguiente código Processing:

beginShape();

vertex(30, 10);

vertex(50, 40);

vertex(10, 40);

endShape();

4.2.5 Práctica: emoticono

En este ejercicio pondrá en práctica todo lo aprendido hasta ahora esbozando un emoticono sonriente.

El código utilizado es el siguiente: