PROGRAMACIÓN: CONCEPTOS || MASTER EN ARTES DIGITALES

Sección 2: Funciones gráficas

1. "Hello World!" gráfico
2. La cuadrícula de pixeles
3. Color
4. Primeras funciones de dibujo
5. Funciones de dibujo básicas
6. Ejemplos de código de dibujo

1.- "Hello World!" gráfico

Para empezar a ver de qué estamos hablando, y ya que Processing es un entorno esencialmente gráfico, vamos a realizar otro tipo de "hello world!" haciendo un primer dibujo. Lo primero que vamos a hacer es dibujar una línea con:

Ahora sí que donde hay que mirar es a la ventana gris. Si cambiáis éste código por el que sigue

y comparáis los resultados podéis empezar a suponer cómo está respondiendo el programa a nuestras instrucciones en este caso.

2.-LA CUADRÍCULA

Processing, y java, trabajan píxel a píxel. Es decir, para dibujar con Processing hay que tener en cuenta que trabajamos sobre una cuadrícula de píxeles, que puede ser de 100x100 –el tamaño por defecto que vimos con los ejemplos del “Hello World!”– , 200×454, 1008×91… o lo que se quiera mientras la memoria RAM de la máquina donde trabajamos lo pueda aguantar.

Para dibujar, por ejemplo, una línea, tenemos que especificar en el código de qué punto a qué otro de la cuadrícula tiene que ir. Para una esfera, el punto central y el radio, etc.

Veréis que trabajando así a veces llegaremos a ciertos dibujos que son muy característicos de entornos como Processing (y muy diferentes por ejemplo que los de Flash).

Cada píxel, pues, tiene su lugar en la cuadrícula. Esta posición se expresa mediante coordenadas X, Y, con el punto 0,0 en la esquina superior izquierda de la ventana.
Para entenderlo rápidamente, podéis mirar esta simulación donde moviendo el ratón veréis las coordenadas del píxel en el que estáis.

Su posición en pixelArray es un concepto avanzado que de momento podéis ignorar.

Lo que sí es interesante en la simulación es utilizar las teclas ‘n’ y ‘m’ para ver la simulación a distintas resoluciones y ver cómo, al duplicar el tamaño de la cuadrícula, el número total de píxeles crece exponencialmente.
También podéis utilitzar el botón izquierdo del mouse para intentar dibujar formas geométricas en la resoluciones simuladas.

El hecho que el ordenador intente dibujar líneas rectar en una cuadrícula es lo que produce, en algunos casos, lo que se conoce como efecto Moiré:

3.-COLOR

Cuando trabajamos con Processing, el ordenador entiende el color así:

AAAAAAAARRRRRRRRGGGGGGGGBBBBBBBB

aunque nosotros en realidad lo veremos así:

RRRRRRRRGGGGGGGGBBBBBBBBAAAAAAAA

Esto significa que cada unos de los cuatro valores (rojo, verde, azul y alfa) ocupa 8 bits (un byte) en memoria.

Un byte tiene 256 valores posibles. Así pues, el color en Processing tendrá un rango de 0 a 255 por cada uno de estos cuatro valores.

El valor de un color en Processing se expresa así: color(255,0,0) pera un rojo puro, por ejemplo, o para un verde con alfa (transparencia) del 50%: color(0,255,0,127). Si no se especifica el parámetro alfa, se entiende que su valor es máximo, 255, y que por lo tanto no hay transparencia (la opacidad es total).

Para ver estos valores de color, el color picker de la interfaz de Processing puede ser muy útil.

Cuando un color está en la escala de grises (y por consiguiente sus valores R, G y B son iguales entre sí), se puede expressar con un solo valor: color(127);

Hay varias maneras de utilizar el color. De momento, veremos las funciones background(), stroke() y fill(). Dentro de sus paréntesis (es decir, como parámetros), pondremos el valor de color (en forma de uno, tres, o cuatro números de 0 a 255), para cambiar, respectivamente, el color de fondo de una ventana, el color del trazo en una forma geométrica, o su color de relleno.

Por ejemplo:

4.-Funciones de dibujo I

Volvemos ahora al “hello world” gráfico:

Escribid

en la interfaz de Processing y clicad Run.

Veréis que una línea negra en la ventana gris que Processing ha abierto.
Una línea que va del punto 20,20, al 80,80 en una cuadrícula de 100×100 píxeles.

Si escribís

veréis, efectivamente, que se crea un rectángulo (cuadrado en este caso) a partir del punto 20,20 y de 60 píxeles de largo y ancho.

Y así sucesivamente con las siguientes formas geométricas:

line() p.e.: line(30, 20, 85, 75);

rect() p.e.: rect(30, 20, 55, 55);

ellipse() p.e.: ellipse(56, 46, 55, 55);

triangle() p.e.: triangle(30, 75, 58, 20, 86, 75);

Recordad que EN JAVA, HAY QUE ACABAR CADA LÍNEA DE CÓDIGO CON UN PUNTO Y COMA; Esto significa que hace falta “;” al final de cada instrucción, no necessàriamente, de hecho,  de cada línea tal y como la escribimos en la interfaz de Processing. Pero hay que tener esto siempre en cuenta ya que es un error muy común olvidarse algún punto y coma.

Para combinar esto con las funciones de color, hay que llamar las funciones de color ANTES de dibujar, como si de coger un lápiz de tal o cual color se tratara. Así:

dibujará un rectángulo verde con el borde rojo. Estos colores se mantendrán en la paleta hasta que llamemos de nuevo las funciones fill y stroke. Background, por su parte, llenará toda la ventana del color especificado (sin admitir alfa), con lo que hay que escribir esta función antes de cualquier dibujo.

5.-Funciones de dibujo II

size();

Cambia el tamaño de la ventana, que por defecto es de 100×100. size(x,y);
size() puede recibir dos o tres parámetros. Si recibe dos (o los dos primeros en caso de recibir tres), se refieren al tamaño de la ventana en píxeles. (El tercero, que por ahora podéis ignorar, re refiere al motor de “rendering”, de dibujo).

Por ejemplo:

background();

Otra instrucción útil para dibujar, y siempre, es background(), que le dice a Processing cual tiene que ser el color de fondo de una ventana.

Esta instrucción la debemos situar justo detrás de size() o, en todo caso, antes de hacer ningún dibujo, ya que de hecho tapa todo lo que hay en la ventana con el color especificado. Por defecto, su valor es el gris que hemos visto en los primeros ejemplos.

fill();

Como su nombre indica, esta instrucción especifica el color con el que va a rellenar la próxima forma geométrica que se dibuje. Los parámetros (valores entre paréntesis) especifican el color y pueden ser uno, dos, tres o cuatro.

Fill afectará todos los dibujos que se realicen DESPUÉS en el código. No sólo el siguiente, y no afecta para nada a los anteriores.

stroke();

Lo mismo que fill() pero afecta el contorno, el trazo de las formas y las líneas.

Stroke afectará todos los dibujos que se realicen DESPUÉS en el código. No sólo el siguiente, y no afecta para nada a los anteriores.

strokeWeight();

Recibe un parámetro. Especifica el grosor del trazo en píxeles. Por defecto, es uno.

noFill();

Especifica que a partir de este punto no se rellenen las formas.
No recibe parámetros. Es decir, no hay que poner nada entre los paréntesis. Ningún valor. Simplemente se invoca la función.

noStroke();

Especifica que a partir de este punto no se dibujen los trazos.
No recibe parámetros. Es decir, no hay que poner nada entre los paréntesis. Ningún valor. Simplemente se invoca la función.

6.- Ejemplos de código de dibujo

Visto esto, ya tenemos elementos para entender código un poco más complejo. Copiad los siguientes tres ejemplos a Processing, e intentad seguir la lógica del código y predecir qué va a pasar una vez cliquéis RUN.

Ejemplo 1:

Ejemplo 2:

Ejemplo 3:

----------------------------------------------------------------------------------------------------