# 3. Circuitos, conexiones y GUI

Hasta ahora se ha podido ver cómo la creación de algoritmos simples crea rápidamente patches caóticos. Para realizar funciones relativamente simples, es común emplear decenas de nodos conectados entre ellos. Eso provoca que, en la creación de algoritmos algo más complejos, los patches se vuelvan aún mucho más caóticos y, lo peor, que se pierda el control del flujo de datos. Para ello, en esta sesión se trabajan funciones como **[send] y [return]**, que sirven para mantener el flujo de datos lo más ordenado posible. También se revisan cómo crear subpatches a través de **[inlet]** y **[outlet]** y cómo utilizar las funciones avanzadas de creación de **GUI**.

</br>

## Contenidos

:::info

|Objetivos|Detalle|
|---|---|
|Limpiar y simplificar las diferentes conexiones entre nodos en el patch | **[send] [receive]**
|Creación de subpatches y control de entrada y salida de señales | **[inlet] [outlet]**
|Crear una interfaz de control con una GUI personalizada |**GUI**

:::

</br>

## Send & Receive

Uno de los principales problemas de cualquier lenguaje de programación visual es la gran cantidad de información visual que se acumula en pantalla debido a los conectores. No obstante, Pure Data tiene una función diseñada para limpiar el ruido visual del patch a través de conexiones sin cables. Los nodos en cuestión son **[[send]](https://pd.iem.sh/objects/send/)** (abreviado como **[s]**) y [**[receive]**](https://pd.iem.sh/objects/receive/) (abreviado como **[r]**).

<div style="text-align: center;">


</div>

Para que funcione, ambos nodos, **[send]** y **[receive]** deben recibir el mismo argumento (con la única condición de que no sea un número). En caso de no tener asignado un **argumento**, el nodo **[send]** dispone de un **Cold Inlet** a través del que le podemos asignar un argumento dinámico (a través de un **mensaje**). El nodo **[receive]** siempre tiene que tener un argumento asignado o **no recibirá datos**.

<div style="text-align: center;">


</div>

En este caso, se utiliza la palabra "play", y se envía un bang sin cables entre dos partes del patch. Esto es especialmente útil para enviar un mismo **[bang]** a múltiples partes del código a la vez como, por ejemplo, para resetear a la vez diferentes partes de un mismo circuito.

<br>

:::info

## TIP

Una particularidad que hace esta función interesante es que las funciones **[send]** y **[receive]** pueden enviar datos entre distintos patches. Eso quiere decir que un mismo patch puede enviar datos a diferentes, o que un patch puede recibir datos de diferentes patches a la vez.
:::

:::info

## FYI

Ambos nodos, tanto **[s]** como **[r]**, pueden operar con señaeles sonoras **(~)**. En tal caso, se deberán utilizar **[s~]** para enviar las señales y **[r~]** para recibirlas.
:::

</br>

## Subpatch

El [**Subpatch**](https://pd.iem.sh/objects/pd/) (también conocido como **_Subwindow_**) sirve para agrupar y organizar parte del contenido programado de un patch. Es una _capa_ que _esconde_ parte del código creado y que se puede conectar con las diferentes partes del código del patch general. El **Subpatch** puede agrupar diferentes funciones y, a través de un mismo nodo, recibir y enviar diferentes tipos de datos y señales. Al igual que el resto de nodos de Pure Data, el **Subpatch** se define a través de la función (**pd**) y un argumento (**nombre del Subpatch**):

<div style="text-align: center;">


</div>

En este caso, se utiliza la palabra subpatch para dar nombre al nodo. El resultado de la creación de este **Subpatch** es un segundo patch en el que se puede trabajar del mismo modo en el que se puede trabajar en un patch normal.

<div style="text-align: center;">


</div>

Para que el **Subpatch** tenga conexiones de entrada o de salida,es necesario incluir los objetos **[inlet]** y **[outlet]**, que servirán como la vía de comunicación entre el patch y su **Subpatch**.

<div style="text-align: center;">


</div>

Una vez comunicados a través de **[inlet]** y **[outlet]**, ambos patches pueden comunicarse enviando cualquier tipo de dato, mensaje o señal.


<br>

:::warning

## OJO

La cantidad de outlets del **Subpatch** e inlets depende de la cantidad de la cantidad de nodos [inlet] y [outlet] que se añadan. **Ambas funciones se pueden utilizar sin añadir argumentos:**


Sin embargo, ambos objetos se rigen por la norma general de **Función - Argumento**, y es recomendable utilizarlos para entender correctamente por donde entran y salen los datos, mensajes o señales que se comunican en el **Subpatch**:


:::

</br>

## GUI

Para crear una Graphic User Interface, es necesario añadir el nodo a través del menú **Poner > Gráfico** (traducido del inglés **Put > Graph**). Aparecerá en el patch un pequeño rectángulo blanco. Este rectángulo actúa como un **Subpatch**, que podemos conectar a través de **[s]/[r]** o a través de **[inlet]/[outlet]**.

<div style="text-align: center;">


</div>

Para acceder a este **SubPatch** se debe hacer **click derecho** sobre el gráfico y seleccionar **Abrir**.

<div style="text-align: center;">


</div>

A continuación se abre una nueva ventana en la que se muestra el **Subpatch** creado. En ese **Subpatch** es donde debe crearse la GUI que se incluirá posteriormente en el patch principal. Una vez abierto este **Subpatch**, el gráfico del patch se visualiza en color gris, mientras que en el **Subpatch** aparece un rectángulo rojo, que es donde se visualizará la GUI una vez creada.


El siguiente paso para crear una GUI consiste en introducir los elementos que se quieren incluir para el control del patch. En este caso se incluyen dos **[bang]**: uno verde, que servirá como botón de inicio, y uno rojo, que servirá para detener el código:


El último paso a seguir para que se visualicen los cambios en la GUI, es conectar los envíos a una caja de **[s]** para que se puedan recibir donde se tengan que ejecutar (ya sea el mismo patch o un patch que reciba el mismo argumento a través de **[r]**.


:::info
## FYI

Los datos que muestra el gráfico **(GUI)** únicamente son de tipo gráfico (bang/slider/selector/toggle/número...). De modo que el **Subpatch** del gráfico puede enviar tantas instrucciones como sea necesario.

:::

Para visualizar el resultado de la **GUI** se debe cerrar el **Subpatch**. Una vez cerrado se puede observar el resultado gráfico de las conexiones creadas anteriormente:

<div style="text-align: center;">


</div>

El tamaño del área de trabajo, así como otros ajustes de la GUI, se pueden ajustar haciendo botón derecho dentro el **Subpatch** y seleccionando **Propiedades**:

<div style="text-align: center;">


</div>

Un ejemplo de GUI algo más compleja podría ser el siguiente:


En su interior esconde una estructura de conexiones para trabajar con una interfaz MIDI:


<br>

## Ejercicio 3

**Parte1:**
Crea una GUI con dos botones, dos sliders y dos números. El primer botón (verde) deberá encender el circuito; el segundo botón (rojo) deberá apagar el circuito; cada slider (amarillo) deberá controlar el volumen de un sonido distinto (**rango de 0 al 1**); el número deberá indicar el volumen al que se está reproduciendo el sonido. El fondo de la GUI tiene que ser de un color sólido.

**Parte2:**
El circuito controlado por la GUI está **en un archivo distinto**. Una vez encendido, el patch debe reproducir un sonido cada tercio de segundo por el speaker de la izquierda y reproducir un sonido cada medio segundo por el speaker de la derecha. Los volúmenes deben ser controlados **por separado**.

**Parte3:**
Crea un nuevo circuito en un **nuevo archivo de Pure Data**. Suma infinitos valores (+1) y agrúpalos en módulos de 8. Selecciona el primero de ellos y crea un número al azar **del 1 al 100**. Si el número seleccionado es más alto que el porcentaje del volumen, activa la Parte4 del ejercicio.

**Parte4 (buscar nueva función):**
Se activa un circuito que, una vez **==transcurridos 3 segundos==** apaga el circuito, reseteando todos los contadores y bajando el volumen al completo. Este circuito también **==apaga por completo el sonido de Pure Data==**.

</br>

:::spoiler **Solución**

**Parte1:**

<div style="text-align: center;">


</div>

<br>

**Parte2:**

<div style="text-align: center;">


</div>

<br>

**Parte3:**

<div style="text-align: center;">


</div>

<br>

**Parte4:**

<div style="text-align: center;">


<br>


<br>


</div>

<br>

:::

<br>

---

<br>

<div style="text-align: center;">

Anterior: [**2. Introducción a Pure Data**](https://hackmd.io/@FvMTRdPQSeqhA0pGgMQEWg/ryPpRy_CR)
Siguiente: [[**Sesión 4: Comunicación (I) MIDI**]](https://hackmd.io/pjc8A_sIQdOd4T2tV775nA)

</div>
<br>