Processing es un lenguaje válido para casi cualquier cosa aunque se le suele mencionar la pega de que no es adecuado para hacer GUI’s (Graphical User  Interface o interfaz gráfica de usuario), una vez oí esa pega acompañada de un “salen muy feas”. Está claro que si tratamos de crear elementos gráficos como botones o barras de desplazamiento con las primitivas gráficas de Processing van a salir, en el mejor de los casos, muy espartanas… pero ¿y si utilizamos imágenes?. Processing tiene la capacidad de cargar imágenes para utilizarlas dentro de nuestra aplicación sin prácticamente límites y eso nos brinda la oportunidad de darle a nuestros programas un aspecto todo lo elaborado que queramos.

Como ejemplo he programado una ScrollBar muy sencilla con elementos que he sacado de una búsqueda en las imágenes de Google, no voy a poner el código como en otros tutoriales pero lo podéis descargar un poco más adelante. Voy a comentar como lo he hecho y si abrís el código lo encontraréis lleno de comentarios para hacerlo comprensible.

Podéis descargar el proyecto desde aquí.

En la carpeta del proyecto, dentro de la carpeta Data, están las imágenes que lo forman. Básicamente son los extremos derecho e izquierdo (que también funcionan como botones), el cursor y una imagen de 1 píxel de ancho con la que se forma el cuerpo de la barra.

El programa carga las imágenes en variables y luego simplemente las posiciona dentro del canvas todas juntas, el cuerpo de la barra se hace con un bucle for()…. aunque lo podría haber hecho de una sola vez con una imagen más ancha, para gustos colores. Como las imágenes tienen un tamaño de 20×20 píxeles los extremos y 20×30 píxeles el cursor ha habido que hacer un poco de mágia con las coordenadas, pero todo responde a la posición que ocupa cada elemento y el ancho de cada imágen, espero que se entienda bien.

Para dotar de acción a los elementos con los que se pueden interaccionar sólo había que recurrir al truco de concatenar condiciones if() de modo que si esta pulsado el botón del ratón y si esta el ratón dentro de la altura de la imagen y si esta el ratón dentro de la anchura de la imagen se modifica el valor de la variable cursorX , y es esta variable la responsable de almacenar la posición en la que se dibuja el cursor. Lo mismo pasa con los botones laterales, que en un principio iba a dejar sin función por sencillez pero luego pensé que darles funcionalidad era complicar muy poco el código.

El código, tal cual está, se podría utilizar en una aplicación o incluso hacer varias barras iguales y utilizando la misma técnica de utilizar imágenes se pueden añadir otros elementos como botones.


Si este tutorial te ha sido de utilidad puedes considerar hacerme un donativo, por pequeño que sea estarás contribuyendo a que siga con esta labor.