Posterous theme by Cory Watilo

Quartz Composer - Demo 2 - Visualización de un ecualizador

Continuamos con nuestra visualización. Lo primero es abrir nuestra macro (doble-click sobre ella como ya comente antes) y añadir un patch Structure Index Member al editor. Conectamos el valor de salida de este nuevo patch al parámetro de entrada Inital Value de nuestro patch Amplificador. El visor parará de mostrarnos la barra animada que teníamos, no pasa nada.

Ahora mismo nuestra macro “Medidor Audio” solo tiene un parámetro de entrada (enabled). Ha llegado el momento de “hacer públicos” otros parámetros de nuestra macro (siguiendo con el símil de la programación tradicional).

Hacemos click derecho en el patch Structure Index Member y seleccionamos Published Inputs -> Structure, nos aparecerá un campo de texto donde podremos renombrar el parámetro, por ejemplo a Spectrum. Repetimos el mismo paso con el parámetro Index, y lo dejamos sin renombrar.

Highslide JS

Retornamos al nivel principal de la composición. Veremos como ahora nuestra macro tiene ahora dos nuevos parámetros de entrada, Spectrum e Index. Conecta el valor de salida Spectrum del patch Audio Input al nuevo parámetro de la macro, Spectrum. El visor volverá a mostrar nuestra barra animada pero la respuesta al sonido será más floja que antes (esto tiene que ver con el valor de Spectrum, que es más bajo que el de Volume Speak). Doble-Click sobre la macro para editarla de nuevo.

Click sobre el patch Amplificador, nos vamos al Inspector y seleccionamos en el botón Pop-Up “Settings”. Aquí modificamos “Number of Operations” a 2. Vemos como se añaden dos nuevos parámetros al patch. Seleccionamos “Input Parameters” en el botón Pop-Up y modificamos sus valores:

Highslide JS
  1. Operation #2: Multiply
  2. Operand #2: 10

Y diréis, ¿por que no multiplica por 100 poniendo 100 en el operand #1 y se deja de añadir otro Operand? Lo veréis ahora mismo.

Click derecho sobre el patch Amplificador, seleccionamos Published Inputs -> Operand #2 y lo renombramos a “Sensibilidad”. Esto nos servirá para controlar la amplitud del espectro amplificándola mucho o poco.

Lo siguiente es posicionar 12 columnas individuales de LEDs 2 veces para crear en total 24 columnas (12 a la derecha y 12 a la izquierda). Esto viene a ser modificar el parámetro X Position de Sprite y Cubo. ¡Vamos a ello!

Hacemos click derecho sobre el patch Structure Index Member y elegimos Insert Index Splitter -> Index. Esto nos creara un nuevo patch de nombre Index, lo seleccionamos. En sus Settings, en la ventana inspector configuramos su tipo a Number y sus min. y max. values a -12 y 12 respectivamente. Para acabar, hacemos click derecho sobre él (el patch) y seleccionamos Publish Inputs -> Input, renombrándolo a Index.

Añadimos un nuevo patch Mathematical Expession y configuramos sus Settings en el inspector añadiendo “abs(a)-1”. Ahora conectamos el valor de salida Output del patch Index al parámetro de entrada “a” del patch que acabamos de añadir y el valor de salida de este (Result) lo conectamos al parámetro de entrada Index del patch Structure Index Member.

Creamos otro patch Math y lo renombramos a Posicionador-X configurándolo como sigue:

  1. Initial Value: Arrastramos desde Index su valor de salida Output
  2. Operation #1: Multiply
  3. Operand #1: 0.075
Highslide JS

El valor 0.075 será multiplicado por otro valor (en el rango antes definido: -12, 12) para producir una posición en el eje X, dandonos un bonito espacio entre columnas. Para ello conectamos el valor de salida del Posicionador-X al parámetro de entrada X Position de los patches Cubo y Sprite.

¿Quieres probar lo que llevamos hecho? Pues volvemos al nivel principal y clickamos en la macro, en su configuración probamos a cambiar su parámetro Index (el cual solo se puede mover entre el rango -12, 12), como verás, al cambiar este valor la barra se mueve en el eje X. Lo dejamos a -12.

Pulsamos y mantenemos pulsada la tecla “option” (también llamada Alt en el mundo PC), hacemos click sobre el patch Medidor Audio (nuestra macro) y la arrastramos, esto nos creará una copia del patch. Ahora conectamos el valor de salida del patch Audio Input al parámetro de entrada de la copia creada de la macro. También debemos cambiar el parámetro Index de la copia, en este caso a -11.

Highslide JS

Ahora en el visor se mostrarán dos barras, ligeramente separadas. Este último paso debemos repetirlo 22 veces más, poniendo 12 barras entre el rango -12, -1 y otras 12 barras entre el rango 1, 12 (Sí, lo sé, un poco tedioso...).

Para que la aplicación en la que usemos nuestra visualización pueda decidir sobre la sensibilidad del espectro de audio necesitamos hacer un par de ajustes.

Click derecho sobre el Medidor Audio que tenía el Index -12 y elige Insert Input Splitter -> Sensibilidad. Seleccionamos el nuevo patch creado y en la ventana Inspector elegimos la sección Settings. En esta sección modificamos el min. y el max. values a 0 y 100 respectivamente. Conectamos su valor de salida Output al parámetro Sensibilidad de los patches Medidor Audio cuyo index sea -12 y 12. Hacemos click derecho sobre el patch y seleccionamos Publish Input -> Input, lo renombraremos como “Sensibilidad 12”.

Highslide JS

Este último paso debemos repetirlo pero para cada par de medidores (-11, 11; -10, 10; -9, 9;...), cambiando el uso de 12 por el número del par que estemos editando.

Con esto hemos acabado nuestra visualización y está preparada para ser usada en una aplicación.

 

 

 

(download)