Hola Mundo con Processing

de: Mrhofflich

Dificultad:

Principiante

Plataforma:

Processing

Categoria:

Software

Favoritos:

favorite1

reportReportar

Descripción:

En este tutorial cubriremos las bases para hacer tu primer aplicación en Processing.

Licencia: GNU Affero General Public License v3.0


Tags:

Processing
maker
movimiento maker
creative coding
processing
programacion creativa
codigo creativo

Componentes:

  • Processing IDE

Paso 1:

En este tutorial cubriremos las bases para hacer tu primer aplicación en Processing. Lo primero que hay que hacer es descargar el programa, para hacer esto hay que ir a la página de Processing (www.processing.org) y descargar (Link) la versión que corresponda a tu sistema operativo: Windows, Mac o Linux. Al momento de este tutorial la versión más estable es la 3.1.1.


Una vez que se haya descargado el archivo .zip, tendrás que descomprimirlo y ponerlo donde quieras. Dentro de la carpeta de Processing encontrarás los siguientes archivos (en mi caso, yo estoy usando Windows).


Para abrir Processing hay que dar doble click en el archivo ejecutable llamado processing. Una vez que se abra deberías tener algo como esto:

Si en estos momentos tienes la imagen anterior en tu pantalla, ¡Felicidades!, vas por buen camino. El siguiente paso es dibujar algo en la pantalla. Empecemos con algo sencillo, un cuadro. Para hacer un cuadro en processing hay que recurrir al comando rect(), el cual utiliza los siguientes parámetros: la coordenada X, la coordenada Y, el ancho y el alto. El comando rect debería verse algo así:

rect(20,30,10,15);


Algo que es importante notar es la sintáxis. Primero se escribe el comando rect, luego se abren paréntesis y ahí se pondrán los parámetros o características de nuestro cuadro, después se cierran los paréntesis para indicar que se han puesto todos los parámetros deseados y para finalizar se escribe un punto y coma para indicarle a la computadora que puede pasar a la siguiente línea. Para ver nuestra obra de arte en la pantalla hay que presionar el botón de PLAY (es el pequeño cuadro con un triángulo acostado).El resultado debiera verse algo así:

En este punto, te debes estar sintiendo como el arquitecto de la matrix, lo cual es muy bueno, así que prosigamos. El siguiente paso será crear otra figura, un círculo. Para poder crear un círculo en Processing, debemos recurrir al comando ellipse(), el cuál utiliza los siguientes parámetros: la coordenada X, la coordenada Y, el ancho y el alto. El comando elipse() debería verse algo así:

ellipse(70,70,25,25):


Muy bien, el siguiente paso ahora es hacer crecer nuestro espacio de trabajo. Para poder tener un canvas(ventana) más grande y así poder tener más cosas dentro usaremos el comando size. El comando size es muy sencillo ya que solo consiste en dos parámetros: el ancho y el alto. tomemos nuestras dos líneas de código anteriores y dibujémoslas en una venta de 200 por 200. El comando size, junto con nuestras líneas de código, debe verse algo así:

size(200,200;

rect(20,30,10,15);

ellipse(70,70,25,25);


Paso 2:

Si has llegado hasta este punto, ¡Felicidades! Ahora si viene lo interesante. Nuestro primer programa en el cual se dibuja un rectángulo y un círculo es maravilloso pero aún hay mucho que se puede mejorar. La estructura de cualquier programa, incluyendo los "sketch" como se les conoce a los programas hechos en Processing y/o Arduino se compone principalmente de dos partes: las condiciones iniciales y el programa. En el lenguaje de programación de Processing a las condiciones iniciales se le conocen como función setup() y al bloque de código que se estará ejecutando una y otra vez se le conoce como la función draw(). Volviendo a nuestro programa, nuestras condiciones iniciales serían solamente el tamaño de la ventana, mientras que el programa que se estaría ejecutando una y otra vez sería el dibujo de nuestro rectangulo y nuestro círculo. ¡No te alarmes!, estructurar nuestro programa no es díficil, es solamente agregar unas cuántas líneas de código. Nuestro programa con las funciones setup() y draw() se verían algo así:



Código:

                                    
                                            //

void setup() {

size(200, 200);

}

void draw() {

rect(20, 30, 10, 15);

ellipse(70, 70, 25, 25);

}
                                    
                                

Paso 3:

Aunque el resultado visual sea el mismo, el programa es diferente. Antes de explicar porque, revisemos la sintáxis de nuestro nuevo programa. En processing cuando queremos usar una función debemos seguir un orden, que es el siguiente:

Primero debes especificar el tipo de función que usarás, que de momento sólo usarás una: la función de tipo void. Void significa vacío en español, lo que quiere decir que esa función está vacía, osea no regresará ningún valor, solo ejecutará algo en la pantalla.

Lo segundo que tienes que hacer es poner el nombre de la función. En tu primer programa usarás dos: setup() y draw(). Después del nombre de la función siempre se deben agregar paréntesis, te aseguro que tienen su propósito pero de momento, lo único que debes saber es que deben estar siempre despues del nombre, sin incluir espacio.

El tercer paso que debes seguir es agregar el bloque de código que se ejecutará dentro de la función. Para hacer eso debes abrir una llave {, luego agregar el código y después cerrar la función, cerrando la llave }

Bien, volviendo al tema de que si son iguales pero diferentes. El programa que corriste sin las funciones setup() y draw() no había movimiento, era un programa "estático"; y en la segunda versión, al agregar las funciones lo transformaste en un programa dinámico, ya que la función draw() lo que hace es ejecutar las líneas de código una y otra vez hasta el infinito, o hasta que se apague el programa, o se le de la instrucción de parar. Que quiere decir esto, que lo que para nosotros es una imágen, es en verdad una enorme cantidad de imagenes dibujándose en el mismo lugar una y otra vez. Si no te ha explotado la cabeza en este punto, prosigamos.

Esta información es útil para ti, por que sin querer ya estás haciendo una animación. Vamos a modificar nuestro programa para hacerlo un poco más evidente, y para hacer eso utilizarás a tus nuevas mejores amigas: las variables. Las variables son el mejor recurso de un programador, ya que en ellas se guardan valores que pueden ir cambiando dependiendo de cuales sean nuestras necesidades, de ahí el nombre variables. Existen muchos tipos de variables, dependiendo de lo que quieras hacer, ya lo veremos más adelante. De momento sólo nos quebraremos la cabeza con 1, la variable int. La variable int nos permite guardar valores discretos, o sea, números enteros. Vamos a sustituir nuestras coordenadas en X por una variable a la que llamaremos... X.


Código:

                                    
                                            //

int x = 40; {

void setup() {

size(200, 200);

}

void draw() {

rect(x, 30, 10, 15);

ellipse(x, 70, 25, 25);

}
                                    
                                

Paso 4:

Una vez que hayas sustituido las coordenadas por variables, podrás simular el fenómeno de movimiento. Para eso utilizarás una función aritmética muy básica, la suma.



Código:

                                    
                                            //

int x = 40; {

void setup() {

size(200, 200);

}

void draw() {

rect(x, 30, 10, 15);

ellipse(x, 70, 25, 25);

x = x+1;

}
                                    
                                

Paso 5:

No era el resultado que esperabas supongo, hay que analizar lo que pasó. En este punto del programa ya tienes animación y ya hiciste que tus figuras se movieran.. o algo así. Lo que pasó es que Processing, a través de la función draw, dibuja una y otra vez lo que tenga dentro del bloque de código. Lo que hicimos con la operación x= x+1; fue dibujar un cuadro y un circulo en el punto 40 del eje x (int x=40;), después lo que hicimos fue sumarle 1 a nuestra coordenada y dibujarlo otra vez, luego una vez más y si no le haz dado stop al programa aún lo sigue haciendo, solo que ya no se alcanza a percibir debido a que el espacio de trabajo es de solo 200. Para corregir esto, Processing tiene el comando background(), con este comando lo que harás será dibujar un cuadro de cualquier color que elijas y luego dibujará las figuras, luego le sumará 1 y dibujará nuevamente un cuadro nuevo, para despues dibujar las figuras en la nueva coordenada... y así sucesivamente. El código debería verse algo así:



Código:

                                    
                                            //


int x = 40; {

void setup() {

size(200, 200);

}

void draw() {

background(0);

rect(x, 30, 10, 15);

ellipse(x, 70, 25, 25);

x = x+1;

}
                                    
                                

Paso 6:

En el comando background() puedes poner valores entre 0 y 255 para obtener diferentes tonalidades dentro de la esclaa de grises. Si eres una persona que no es tan monocromática, y prefieres tonos mas vivos, puedes agregar otros dos parámetros al comando background() para agregar colores. Cabe mencionar el los colores en las computadoras se maneja con el formato RGB (Rojo, verde y azul), por ejemplo podrías poner background(255,0,0), para un fondo rojo. Ahora que ya sabes como hacer una figura y como hacer que se mueva, veamos algo un poco más complicado, interacción. No te preocupes, Processing se ha encargado de todo lo difícil por ti, ya que ha creado comando muy sencillos para usar el mouse y el teclado. Vamos a hacer que el cuadro que dibujamos en nuestra primer línea de código siga al mouse. Para acer eso vamos a utilizar un recurso de Processing llamado mouseX y mouseY, que son variables de Processing que guardan la ubicación de las coordenadas X y Y de nuestro mouse. Tu código se debe ver algo así.

Código:

                                    
                                            int x = 40; {

void setup() {

size(200, 200);

}

void draw() {

background(0);

ect(mouseX, mouseY, 10, 15);

ellipse(x, 70, 25, 25);

x = x+1;

}
                                    
                                

Paso 7:

¡Perfect! Ya tienes un cuadro que sigue el mouse, me imagino que tenías en mente algo más.. interactivo, no te preocupes para haya vamos. Ahora vamos a hacer que cuando presiones el mouse, comiences a dibujar con un trazo cuadrado. para eso haremos uso de una tercer función, llamada mouseDragged(). La función mouseDragged() va aejecutar el bloque de código que contenga siempre y cuando el mouse sea movido mientras que algún botón del mouse sea presionado. Tú código debiera verse algo así:.

Código:

                                    
                                            //

int x = 40; {

void setup() {

size(200, 200);

}

void draw() {

}

void mouseDragged() {

noStroke();

rect(mouseX,mouseY, 10,15);

}
                                    
                                

Paso 8:

Analicemos el código. El cambio más grande que debiste haber notado fue que ya no hay código en la función draw(). Esto es porque lo que queremos hacer necesitamos que pase una sola vez, o siempre y cuando esté pasando alguna de las condiciones que hayamos decidido. Te has de estar preguntando por que la dejé en el código, esto es por que si se le quita la función draw() el código se ejecutaría una sola vez y se convertiría en un programa estático, por eso se deja, para que la computadora repita el código una y otra vez. Un punto importante que hay que aclarar es que la función mouseDragged() debe ir fuera de la función setup() y draw().

En este caso lo que quieres es que se dibuje un rectángulo siempre y cuando el mouse este presionado y se mueva, por eso el comando rect() se pasó de la función draw() a la función mouseDragged(), además se le agrego el comando noStroke() que elimina el trazó del rectángulo para dar la ilusión de un trazo continuo al arrastrar el mouse.

Para finalizar la ilusión de un trazo continuo ocupas que el cuadro que se dibujo no se borre cuando el mouse cambie de posición por eso moviste el comando background() de la función draw(). Ahora bien, lo pusiste en la función setup() ya que lo primero que quieres en tu programa es que se defina el tamaño de la ventana y se defina el color del fondo. Si quisieras que el trazo fuera circular en vez de rectangular, solamente cambia el comando rect() por el comando ellipse() y..¡Listo!.

Por último, le agregarás a tu programa, una opción para que se limpie la pantalla. Para poder hacer esto utilizaremos el teclado. Al igual que la función mouseDragged(), existe una función llamada keyPressed(), la cual nos permite detectar si alguna tecla a sido presionada. La función keyPressed() también debe ir fuera de las demás funciones de tu programa. Dentro de la función keyPressed() pondremos el comando background(0), ya que queremos que cada vez que se presione una tecla, cualquiera, se dibuje un fondo nuevo.

El código completo de tu primer programa debería verse algo así:

Código:

                                    
                                            //

int x = 40; {

void setup() {

size(200, 200);

background(0);

}

void draw() {

}

void mouseDragged() {

noStroke();

rect(mouseX,mouseY, 10,15);

}

void keyPressed() {

background(0);

}
                                    
                                

Comentarios:

  • ronny ronny

    Muy bueno este tutorial, estoy empezando en el mundo de arduino y habia escuchado de Processing pero nunca lo habia utilizado.

    11/07/2016

  • Lobo Lobo

    Bien explicado gracias

    13/07/2016

mode_edit