Unidad 2 - Processing

 1. La consola

Además de informar errores, la consola puede servir para visualizar información que consideremos relevante. Para ello se utilizan las funciones print() y println().

2. La pantalla

Utilizando la función size(); dentro de setup(), le podrás indicar a Processing de qué tamaño será la ventana dónde se mostrarán las figuras. 

Entre paréntesis colocá primero el valor del ancho en píxeles y, separado por una coma, el valor del alto también en píxeles. 

Por ejemplo, en la siguiente imagen, la ventana tiene un ancho de 800px y un alto de 600px. 

Si no sabés el tamaño de la pantalla de tu dispositivo y deseás que la ventana ocupe toda la pantalla, podés escribir la función de esta forma:

size(displayWidth,displayHeight); 

3. Espacio de color

Por defecto, Processing trabaja con el espacio de color RGB (red, green, blue), que está representado por los colores rojo, verde y azul. Cada uno de ellos adquiere un valor entre 0 y 255. 

Por ejemplo, para determinar un fondo negro podrás utilizar la función background(0,0,0); o background(0);, ya que si los tres valores son iguales, se pueden colocar una sola vez. Y para un fondo blanco background(255,255,255); o background(255);.

Estas son algunas variantes:

background (255,0,0); //fondo rojo

background (0,255,0); //fondo verde

background (0,0,255); //fondo azul

background (255,0,255); //fondo violeta

Con la función colorMode(HSB); se puede cambiar al espacio HSB (hue, saturation, brightness), que se compone de tono, saturación y brillo o matiz, saturación y valor. 

Para volver al espacio RGB, basta utilizar la función colorMode(RGB);. En este curso, se utilizará el espacio de color RGB.

4. Dibujar líneas

Para empezar a dibujar en Processing, vas a comenzar trazando unas líneas con la instrucción: 

line(x1,y1,x2,y2) ;

Los valores de x1,y1 indican la posición donde comienza la línea, mientras que x2,y2, donde termina.

Por ejemplo, en el siguiente caso, la línea comienza en x = 200, y = 0 y termina en x = 200, y = 600. Dado que coincide el valor de x, la línea resultante es vertical.

line(200,0,200,600) ;

En el caso de las líneas horizontales, se mantiene constante el valor de y:

line(0,200,800,200) ;

Y finalmente, en el caso de líneas diagonales, no se mantiene constante el valor de x ni de y:

line(0,0,800,600) ;

Podemos verlo en el siguiente video:

5. Dibujar rectángulos

Para dibujar rectángulos se utiliza la siguiente función: 

rect(x,y,ancho,alto); 

Los dos primeros valores corresponden a la posición de inicio de la figura, luego se indica el ancho y el alto. 

El método también acepta estas modalidades:

rect(x,y,ancho,alto,valor1); 

rect(x,y,ancho,alto,valor1,valor2,valor3,valor4); 

En el primer caso redondea todas las esquinas por igual según el valor ingresado, mientras que en el segundo los valores afectarán a las puntas en este orden: primero la superior izquierda, luego la superior derecha, inferior derecha e inferior izquierda.

En el video del ejemplo, se determinó como posición inicial el centro de la ventana (x = 400, y = 300). 

Sin embargo, la figura no está centrada. Esto se debe a que, por defecto, la esquina superior izquierda se encuentra en el centro de la pantalla. Dicha configuración se puede cambiar con la función rectMode(), como se observa a continuación: 

6. Dibujar triángulos

Dibujar un triángulo es muy similar a un rectángulo, pero se utiliza la función triangle(). Se debe especificar la posición x e y de los tres puntos que lo componen, como se observa en la imagen.

7. Dibujar círculos

En el caso de los círculos, se utiliza la función circle(). Tal como se observa en la imagen, los dos primeros valores corresponden a la posición del centro del círculo y el tercero, a su radio.

En el caso de querer dibujar una elipse, se utiliza la función ellipse () y se indican tanto la posición del centro como el ancho y el alto de la figura.

Sin embargo, en ambos casos el centro de la figura no coincide con la posición real del centro, ya que, al igual que con los rectángulos, se comienza a dibujar desde la esquina superior izquierda. 

Para modificar esto se utiliza la función ellipseMode();. Su valor por defecto es elipseMode(CORNER);.

Para que el centro que colocamos en la función sea el centro de la figura, debemos utilizar elipseMode(CENTER); antes de dibujar la figura (si se coloca después no tendrá efecto).

8. Eventos del ratón

Además de las funciones que ya se mencionaron, Processing incorpora otras que se ejecutan cuando detecta un evento del ratón o mouse (clic, se arrastra, etc.). Dichas funciones reconocen cuando se hace clic, y se escriben por fuera de las funciones draw() y setup().

Un ejemplo de ellas es la función void mouseClicked() {}, como se observa a continuación:

9. Desafío

En esta oportunidad, te proponemos que crees un programa donde dibujes una figura utilizando al menos dos funciones de las vistas en la unidad cada vez que se haga clic. Por ejemplo, combinando cuadrados, triángulos y líneas. 

Volver a Processing