Proyecto Trombón En Processing

Nelson Cárdenas Bolaño

Figura  1

En este artículo se explicarán los pasos seguidos para la creación de un trombón virtual enfocado a dispositivos iOS y Android. Al diseñarse, se ha pensado en que sea compatible con smartphones de distintos tamaños de pantalla. Se explicarán algunos efectos como círculos degradados, efecto de encendido, además se hablará sobre las ecuaciones utilizadas para que el tamaño de trabajo sea genérico aprovechando las herramientas del software Processing. El programa no ha sido terminado, por lo cual, esta entrada debería servirle al lector como base para avanzar rápidamente en un programa de este tipo.

 Primero, la pantalla es modelada a partir de cálculos porcentuales teniendo en cuenta el eje X (ancho) y el eje Y (alto) para que cualquier smarthphone sea compatible con las medidas, por ejemplo: el menú ocupará  3/19 partes (15.78%) del total de la longitud. En la figura 1 puede observarse la división que se hizo para el área de trabajo. Estos valores porcentuales fueron escogidos a partir de la relación que se deseaba entre el tamaño de las casillas y del menú donde el ancho de una casilla es dos tercios del ancho del menú. El alto está dividido en 4 partes.  

Figura  2

En el recuadro está la definición de las variables casillax que es el ancho de la casilla mientras que casillay guarda el alto de la casilla, además se guarda el ancho del menú que será lo que sobre de las 8 casillas. Debajo de donde se encuentra la variable menu está una constante muy importante en este trabajo que es alpha, en la figura número 3 se observa que alpha representa el espacio entre los círculos, la altura total ejey será igual a el espacio vacío entre los círculos mas 3 veces el diámetro del círculo.

Figura  3

Como se conoce el valor de menu y casillay despejamos a alpha que será:

alpha=(ejey – menu*2 )/4

Esta constante se puede usar para que los círculos estén equidistantes entre sí y del límite superior e inferior, además sirve para imprimir las imágenes dentro de los círculos aunque este último proceso nuevamente exige un análisis trigonométrico adicional que no será explicado en esta ocasión. Para terminar se crea una función llamada reccir() que imprime los 3 círculos y los 8 rectángulos que se observan en la imagen principal, esta función utiliza todas las constantes explicadas con anterioridad.

Efecto De Inicio

Figura  4

La función se encarga de mostrar un degradado de oscuro a claro al iniciar y de esta forma sea mas agradable visualmente la aplicación. Este efecto se realiza a partir de una variable llamada tinte, dicha variable estará directamente relacionada con la transparencia de los círculos y los rectángulos, si tinte=0 la transparencia es máxima y no se observará nada, por el contrario si tinte=255 el objeto tendrá transparencia nula. Para realizar este efecto primero se inicializa a tinte en 0, luego teniendo en cuenta que la función void Draw() se ejecuta 60 veces por segundo normalmente, escribimos en ella:

 

Por último se hace que el parámetro de transparencia que tienen los círculos y rectángulos de la función reccirc() dependa de la variable tinte, tal como se puede observar en la sección de código de dicha función. Eso es todo, así podrán darle a sus programas un estilo de inicio distinto, cabe resaltar que el mismo principio puede ser usado para transiciones de menús o lo que se les ocurra.

Efecto Círculos Degradados

Figura  5

Esta función trabaja cuando das click en algún sector imprimiendo un círculo de color dependiente del lugar donde se ha clickeado, conjuntamente el círculo estará relleno volviéndose transparente a medida que se acerca al centro, además de esto, luego de dar click este desaparece suavemente como se muestra  en la Figura 5.  A continuación el código que permite realizar dicha labor.

Para ser utilizada se llama a la función degradados() desde el void Draw(), trabaja con una variable de tipo booleano llamada x1 que debe ser true para que se ejecute y la función se detiene por si sola gracias a contx1, cuando este llega a 0 hace x1=false.

Música

Con respecto a la música se utiliza la librería Maxim para cargar 8 tonos en formato .wav que son las principales notas del trombón. Estas son ejecutadas según la casilla en la que se haya dado click. 

Dentro de void Setup() se escribe:

Además se crean las funciones detener() y ejecutar() que como su nombre lo indica se encargan de detener la nota que esté sonando y ejecutar la nota respectivamente. 

 

Esta librería presentó un problema, a medida que se aumentaba el número de notas el volumen de cada una al ejecutarse disminuye, por lo cual se recomienda investigar como solucionarlo o utilizar una librería que no tenga problemas de este tipo.

Menú

Este consta de tres botones, el de la parte inferior se encarga de ejecutar una composición pregrabada, el parlante se encarga de poner en silencio el instrumento y el de arriba no ha sido implementado y por el momento solo tiene un gráfico con fines estéticos. Utiliza la función dist( x0, y0, x, y) para detectar si se ha dado click sobre los círculos ya que dist haya la distancia entre el punto de coordenadas (x,y) y (x0,y0).

Si quiere descargar el proyecto completo puede acceder al siguiente link:

descargar Proyecto Trombón En Processing