Funciones gráficas

Palabras clave: Ventana gráfica, Pixel, Colores, Figuras, Números aleatorios.

Preguntas de repaso

¿Qué es una instrucción simple?
¿Qué es una expresión?
¿Qué es una función?
¿Qué diferencias existen entre un operador y una función?
¿Qué es un argumento?

No sigas si no conoces las respuestas.

1. Ventana gráfica

En las ejecuciones de los programas que has realizado hasta ahora con Processing se ha mostrado una ventana pequeña y aparte de la ventana de edición. Es la ventana gráfica del PDE.

La ventana gráfica está formada por un conjunto de pixeles. Un pixel es un punto de la ventana gráfica. Para hacer referencia a un punto/píxel de la ventana gráfica necesitamos indicar sus coordenadas. Seguramente estés acostumbrado al sistema de coordenadas cartesiano, pero Processing tiene un sistema de coordenadas distinto: tiene el origen en la esquina superior izquierda de la pantalla.

Compara el sistema cartesiano tradicional con el de Processing y mira cómo viene dado el pixel (4,5).

Coloreando de forma adecuada cada uno de los pixeles podemos dibujar cualquier tipo de imagen, como el siguiente angry bird.

2. Tamaño de la ventana gráfica

La ventana gráfica siempre aparece con un tamaño fijo que no cambia durante la ejecución del programa. El tamaño por defecto de la ventana gráfica es de 100x100 (pixeles al cuadrado). Si quieres que tenga otro tamaño tendrás que utilizar la función size(w,h);.

Es una función que puede aparecer. Si aparece:
1. sólo se puede invocar una sola vez en todo el programa/sketch, y
2. debe ser la primera línea del programa (y si no fuera posible, cuanto antes mejor).
3. Si usaras la función setup(), procura que sea la primera línea de esta función.
Sus argumentos tienen que ser dos números naturales que representan el ancho y el alto de la ventana gráfica. El ancho y el alto de la ventana se mide en pixeles.

Ejemplo 1. Cambiando el tamaño de la ventana gráfica

El siguiente programa consta de una única instrucción que cambia el área de la ventana gráfica a 200x100 pixeles.

1 size(200,100);

Haz un programa que contenga una función principal cuya única instrucción consista en cambiar el área de la ventana gráfica para que tenga 400x600 pixeles.

¿Cuántas funciones tiene tu programa? ¿cuáles?
¿Cuántos argumentos tienen las funciones y de qué tipo son?
¿Cuántas instrucciones tiene tu programa? ¿cuáles?

Solución

void setup() {
    size(400,600);
}

Existen dos funciones en el programa, que son setup() y size(). Se reconocen por los paréntesis.
La función setup() no tiene argumentos, pero la función size() tiene dos argumentos y ambos son literales.
Solo hay una instrucción y es size(); se reconoce por el punto y coma.

En Processing 2.x se admite la instrucción size(200, 200-100); pero no así en Processing 3.x. Si quieres que el tamaño de la ventana gráfica dependa del resultado de una expresión numérica tendrás que usar la función settings() que se comentará más adelante.

3. Colores

Podemos colorear cada pixel de la ventana gráfica. Un color puede venir dado por uno o tres valores.

Si un color viene dado por un único valor, dicho valor representa un tono de gris.
Si un color viene dado por tres valores (r, g, b), estos representan la intensidad de los colores rojo (r), verde (g) y azul (b).

Tanto el tono de gris como las intensidades de color se establecen con un valor entre 0 y 255.

Ejemplo 2. Diversos colores

Algunos valores interesantes son:

El color 0 representa al negro.
El color 255 representa al blanco.
(0,0,0) representa al negro (no hay intensidad de ningún color).
(255, 255, 255) representa al blanco (máxima intensidad de todos los colores).
(255, 0, 0) representa al rojo (no están presentes ni el verde ni el azul).
(0, 255, 0) representa al verde (no están presentes ni el rojo ni el azul).
(0, 0, 255) representa al azul (no están presentes ni el rojo ni el verde).

Interpreta el significado de la siguiente instrucción background(random(255));. Observa que random() está anidada en background().

Para ello busca en las referencias de Processing qué realizan las siguientes funciones: background(), random().
Completa el programa del ejercicio anterior añadiendo antes del cierre de llaves, }, la instrucción background(random(255));.

Pulsa varias veces este icono para comprobar el efecto de aleatoriedad.
Vuelve a modificar el programa para que en cada ejecución la ventana gráfica tenga un color de fondo aleatorio dado por sus tres canales (r, g, b) en lugar de considerar solo un tono de gris.

4. Figuras básicas

Todo programa que permite hacer figuras dispone de un conjunto de instrucciones elementales que combinadas permiten realizar dibujos complejos.

Busca en las referencias las instrucciones que permiten hacer figuras (Shape). Lee cómo se utilizan las siguientes instrucciones del grupo 2D Primitives: ellipse, line, point, rect.
Completa el programa anterior dibujando un rectángulo, una línea, un círculo (que es un caso particular de elipse) y un punto. En este orden. Centra todas las figuras en el centro de la pantalla.

No solo podemos dibujar figuras. También podemos controlar su color de borde y de relleno.

Busca en las referencias las instrucciones que permiten cambiar los colores (Color > Setting). Lee cómo se utilizan las siguientes instrucciones: fill, noFill, stroke, noStroke, strokeWeight.
Haz que las figuras dibujadas en el programa anterior tengan un color de borde negro, relleno de color amarillo y borde con un grosor de 10px como se muestra en esta ejecución:

Compara tu solución con la mía. ¡Ah! y no olvides comentar tu programa (es fundamental) .

Recuerda que no debes pulsar el icono hasta que tengas en firme una respuesta con la que comparar mi resultado.

Responde a las siguiente preguntas:

¿Qué efecto tiene fill sobre un punto o una línea? ¿Por qué?
Solución
No tienen ningún efecto porque un punto no tiene superficie y por tanto no tiene sentido hacer fill(). Se ve afectado solo por las funciones que afectan al "stroke".
¿Qué pasa si dibujas las figuras después de ejecutar esto? ¿Por qué?
Solución
No se visualizan las figuras porque las instrucciones indican que los colores de relleno y de los bordes deben ser "transparentes". En consecuencia, las figuras se dibujan, pero no son visibles porque adoptan en su relleno y en los bordes el mismo color que el del fondo.

  noFill();
  noStroke();

Recuerda que no debes pulsar los iconos hasta que no consideres en firme una respuesta. No vale "es que no lo sé".

5. Repasa y memoriza

El tamaño de la ventana gráfica se puede controlar con la instrucción size().
En muchos problemas matemáticos y físicos se utiliza la función random().
Existen varias funciones para realizar figuras gráficas. Memoriza el uso de ellipse, line, point y rect.
Antes de dibujar una figura podemos indicar el color del borde y de relleno de la figura. Memoriza el uso de background(), fill, noFill, stroke, noStroke, strokeWeight.