Processing: Tutorial básico de manejo y relleno de primitivas en 2D.

En este tutorial haremos una breve introducción a las figuras primitivas, que son la línea, el cuadrado y el círculo, así como algunas figuras poligonales. Además, se explicará el relleno básico de las mismas usando la función “fill”.

En esta ocasión crearemos un robot a partir de las primitivas antes mencionadas.
1. Comenzamos definiendo el tamaño de nuestro canvas dentro de la función “setup”. Las medidas son a tu elección. En este caso utilizaremos uno de 500×500 píxeles.

im1

Antes que nada hay que recordar cómo se manejan las coordenadas en nuestro canvas de Processing:

im2

2. Ahora, dentro de la función “draw” comenzaremos a definir las partes de nuestro robot.
Primero empezaremos creando la antena del mismo. Esto se hará utilizando la primitiva línea. Se dibujará con la función “line”. Sus parámetros son: line(X1, Y1, X2, Y2);
donde:
• X1: es la coordenada en X del punto de inicio de la línea.
• Y2: es la coordenada en Y del punto de inicio de la línea.
• X2: es la coordenada en X del punto final de la línea.
• Y2: es la coordenada en Y del punto final de la línea.
Definiremos la antena a la mitad del canvas para que nos sirva como punto de referencia.

im3

Hay que correr siempre el programa para verificar que todo lo que queremos plasmar se está haciendo de manera correcta.

Como vemos, a Processing sólo le damos las coordenadas del punto inicial y punto final de la línea y él se encarga de unirlos.
3. Ahora pasaremos a crear la cabeza. Para esto utilizaremos el cuadrado. Se creará con la función “rect”: rect(X, Y, ancho, alto);
donde:
• X: es la coordenada en x del vértice superior izquierdo del cuadrado.
• Y: es la coordenada en y del vértice superior izquierdo del cuadrado.
(¿Por qué se manejan las coordenadas de ese vértice? Porque Processing lo utiliza como punto de inicio para trazar el cuadrado).
• ancho: es, obviamente, el ancho deseado de la figura.
• alto: es, claramente, el alto deseado de la figura.

im5

NOTA: Es importante cuidar las coordenadas y las dimensiones de las figuras que se vayan dibujando ya que no queremos que se traspongan unas con otras.
4. Ahora toca dibujar el pecho del robot. Para esto seguiremos utilizando la función “rect” pero no para dibujar un cuadrado, sino un rectángulo.

im7

5. ¡Bien! Ahora comenzaremos a dibujar el brazo izquierdo. Primero dibujaremos el hombro. Esto lo haremos con un trapecio, utilizando la función “quad”:
quad(X1, Y1, X2, Y2, X3, Y3, X4, Y4);

im9

 

Donde X1, Y1, X2, Y2, X3, Y3, X4, Y4 son las coordenadas de los cuatro puntos de nuestro trapecio. Es parecido a dibujar una línea, sólo que aquí manejamos otros dos puntos. Processing se encargará de unirlos.

im10

 

Es probable que al manejar por primera vez la función obtengas un “reloj de arena” o un “moño” en lugar de la figura que deseabas. No te preocupes, todos pasamos por eso ^^. Esto es a base de prueba y error, ¡Como en la programación!

6. Continuamos con el brazo. Ahora dibujaremos el antebrazo con un rectángulo.

im12

7. Continuamos dibujando el puño del robot. Ahora utilizando un rectángulo que a simple vista parece más bien un cuadrado.

im14

¡Ya va tomando una mejor forma!

8. Ahora vamos a trazar los elementos del brazo derecho. Por lógica, serían las mismas figuras, solo que en sentido contrario. Así que sólo hay que modificar las coordenadas en X de los puntos de todas las figuras. Para este caso hay que tomar en cuenta la anchura del torzo y las dimensiones de la figura a trazar.

im16

Como ejemplo tenemos al hombro derecho, al cual, a los puntos X1, X2, X3 y X4 se les restó la anchura del pecho/torso. Y además, a los puntos X1 y X4 se les restó los pixeles que hay de distancia entre X2 y X3, respectivamente.

Si estuviéramos en el caso contrario de haber comenzado con el brazo derecho y quisiéramos dibujar ahora el derecho, en lugar de restar valores tendríamos que sumar.

9. Sabiendo lo anterior, podemos proceder a dibujar el antebrazo y el puño derechos, que es mucho más fácil.

im18

10. Ahora dibujaremos el torso bajo del robot. Usaremos un rectángulo.

im20

11. Continuamos dibujando lo que sería la pelvis. Será un rectángulo más largo que el torso bajo, pero no tanto como el pecho.

im22

¡Ahora sí que va tomando forma!

12. Toca ahora dibujarle la ingle. Para esto trazaremos un rectángulo/cuadrado (xD). Éste tiene que quedar al centro de la pelvis.

im24

13. Ahora procederemos a dibujar los elementos finales de nuestro robot: las piernas completas. Comenzaremos con la pierna izquierda, trazando un rectángulo.

im26

14. Seguimos con la segunda parte de la pierna, la parte baja. Esta tiene que ser un poco más larga si queremos guardar las proporciones del cuerpo humano.

im27

Mmm, como que le hace falta algo ¿no? ¡Sí, la rodilla!
15. Para la rodilla utilizaremos la útlima de las primitivas de este tutorial, que es el círculo. Para dibujarlo usaremos la función “ellipse”, que, como se puede deducir, también traza elipses.
ellipse(X, Y, ancho, alto);

im29

Aquí sucede lo mismo que con el cuadrado; las coordenadas X y Y son de punto inicial donde Processing inicia el trazado el círculo (punto superior izquierdo). Un punto invisible para nosotros en este caso.

La rodilla tendrá que superponerse a los rectángulos que forman la pierna. Si declaramos la elipse antes de los rectángulos, la elipse quedará debajo de estos. Así que es importante tomar en cuenta en qué parte del código declaramos las figuras.

16. Y como parte final de la pierna, toca hacer la planta del pie. Aquí volveremos a utilizar la función “quad” para trazar un polígono irregular.

im31

Hay que tener mucho cuidado al momento de calcular las coordenadas para cada una de las X de la función. Esta es la más complicada de usar.

17. Ahora hacemos lo mismo para dibujar la pierna derecha. Para este caso se deberá restar la anchura del cuadrado que forma la ingle a las coordenadas en X de todas las figuras que forman la pierna izquierda, y además la anchura de cada una de ellas.

im32

Ya casi terminamos, sólo nos falta dibujarle los ojos y la boca.

18. Trazaremos dos círculos y un rectángulo dentro de la cabeza del robot, así que ahora nos centraremos en las coordenadas (220, 50) hasta (280, 110), que son los límites del cuadrado que forma la cabeza.

im34

¡Y ya quedó! Nuestro robot ha tomado forma completamente.
Pero ¿no se ve algo descolorido? ¡Demasiado! Y para solucionar esto tenemos la función “fill” (en español “rellenar”) que lo que hace es colorear una figura: fill(R, G, B);
Donde R, G y B son los elementos del modelo de color RGB (Rojo, Verde y Azul).
Pero ¿y cómo sé qué valores tengo que poner para obtener un determinado color? Para esto, Processing nos provee de un cuadro selector de color. Nos vamos a la pestaña Tools -> Color Selector…

im36

Sólo seleccionamos el color que queremos y copiamos los valores que nos dan en la parte derecha.
Hagamos un ejemplo: quiero colorear el ojo izquierdo del robot de color rojo. Para esto tengo que declarar la función “fill” de la siguiente manera”:

im37

La función siempre va antes de la figura que queremos colorear.

Por alguna razón que desconozco, la función “fill” rellena todas las figuras existentes en el canvas, en lugar de sólo rellenar la figura que queremos. Pero esto tiene solución; basta con rellenar todas las demás figuras.

Parece que el fondo no ayuda mucho a resaltar los colores del robot. ¡Tendremos que cambiar el color! Para esto utilizaremos la función “background”: background(R, G, B);
De igual forma que “fill”, “Background” acepta valores en RGB que van de 0 a 255 en cada uno.
La forma en la que lo tenemos que declarar es la siguiente:

im41

Pero, espera ¿No se supone que esta función debe ir dentro de la función “setup” debido a que estás modificando el canvas? Sí, en teoría sí. Pero si lo haces de esa manera lo que pasará es que el color de fondo se superpondrá a todas las figuras existentes, por eso es que se declara junto a ellas, en la función “draw”.
Y si lo que queremos es dibujar solamente un punto en nuestro canvas existe la función “point”:
point(X, Y);
Donde X y Y son las coordenadas donde queremos dibujar el punto. ¡Muy fácil!

El resultado final recuerda mucho a cuando no existía el internet tal como lo conocemos hoy y te ponías a dibujar cosas random en “Paint”. Buenos tiempos… Pero, ¡eh! Aquí la diferencia está en que estás programando tu dibujo y ya no lo estás trazando con el puntero del mouse. Ahora te sientes más “pro”, ¿verdad?

im42

Con esto finalizaríamos este tutorial básico para el manejo y relleno de primitivas en 2D.
Sería de buena ayuda complementar este tutorial con la investigación de las funciones rectMode() y ellipseMode(), ¡tal vez te saquen de un apuro más adelante!
¡Gracias por su atención y espero que este post haya sido de utilidad!

im11

Link de descarga del programa:

Robot

Bibliografía.
https://docs.google.com/presentation/d/1cOvDZWHR4fxhcefM0IDj4rUuPbG_lAiAi8P2ZETI7aE/edit#slide=id.g65283ec43_1_0
Agradecimiento especial al Prof. José Luis David Bonilla Carranza por la facilitación del material para la realización de este post y, sobre todo, sus conocimientos.

Deja un comentario