TUTORIAL PROCESSING 1: PRIMITIVAS EN 2D

Las formas primitivas en 2D que se utilizan para dibujar en Processing son:

 

Para dibujar estas figuras, el punto de partida puede ser cualquier punto de la ventana que hemos definido con el método size(x, y);  Por ejemplo:

1
2
   size (300, 250);
   line (100, 100, 200, 100);

Si ponéis estas dos líneas sin más, dentro de la ventana de código de Processing, prodréis ver ( supongo que algunos asombrados ) como, si pulsáis el botón de Run , se ejecuta sin errores. Esto ocurre porque Processing permite escribir código sin tener que especificar los métodos setup() y draw().

Para tener una referencia de las coordenas, hay que tener en cuenta que la esquina superior izquierda son las coordenadas (0, 0).

  • Método point()

Dibuja un punto en las coordenadas que le indiquemos. La sintaxis es:

point (x, y);

     point (x, y, z);

Para utilizar el parámetro se requiere que pasemos P3D o OPENGL como parámetro en el método size(). Por ejempo:

1
2
   size  (200, 200, P3D);
   point (100, 100, 50);

Sin embargo, cuando ejecutáis estas dos líneas, veréis un punto en el centro de la ventana sin profundidad. Pero las he puesto para que se viera como se define el método size().

  • Método line()

El método line() tiene la siguiente sintaxis:

line (x1, y1, x2, y2);

Los parámetros x1 y x2es donde comienza la línea y x2 y y2 donde termina. Todas las distancias hay que recordar que son en pixeles. Por ejemplo:

 

1
2
  size (300, 400);
  line (100, 50, 100, 350);
  • Método rect()

El método rect() se utiliza para dibujar rectángulos. Su sintaxis es:

rect (x1, y1, x2, y2);

Para dibujar un rectángulo hay 3 formas de hacerlo:

- 1ª forma

Ejemplo:  rect (250, 100, 50, 50);

Los valores x1 y x2 son las coordenadas dentro de la ventana donde empieza el rectángulo y los valores x2 y y2 son la anchura y la altura, respectivamente, del rectangulo. En este ejemplo el rectángulo es de 50*50.

- 2ª forma

Ejemplo:

1
2
rectMode (CENTER);
 rect (100, 100, 150, 200);    

Aquí se complica un poco más el diseño del rectángulo porque se introduce otro método, rectMode(). Puede tener como argumento CENTER, CORNER, CORNERS y RADIUS. En el ejemplo uso CENTER para indicar que las coodernadas ( x1 e y1 ) que voy a pasar con el método rect() es el centro del rectángulo y x2e y2 son el ancho y alto del rectángulo, como se ve en la figura de abajo.

El argumento CORNER no se suele utilizar porque es la opción por defecto que se usa para dibujar un rectángulo. Cuando se usa el argumento CORNERS, los argumentos x2y y2 del método rect() , en vez de indicar el ancho y alto del rectángulo, indican las coordenadas de la esquina opuesta a x1 e y1 .

Por ejemplo:

 

1
2
rectMode (CORNERS)
 rect (100, 100, 250, 250);   

 

Cuando se especifica el argumento RADIUS en el método rectMode(), los argumentos x1 e y1 son las coordenadas centro del rectángulo y el parámetro x2 es la longitud del radio del eje X tanto hacia la izquierda como hacia la derecha y el parámetro y2 es la longitud del radio del eje Y tanto arriba como abajo. Hacer la prueba con este ejemplo:

 

1
2
3
size (500, 500);
rectMode (RADIUS);
rect (250, 250, 100, 100);

Veréis como al ejecutar el código, os sale un cuadrado centrado en la ventana. Podéis ver la diferencia, si ejecutáis el mismo código sin el método rectMode().

  • Método ellipse()


La sintaxis es:

ellipse (x1, y1, x2, y2);


El método ellipse() funciona exactamente igual que el método rect().

  • Método curve()

El método curve() es una variante del método line(). El método para 2D consta de 8 parámetros:

curve ( x1, y1, x2, y2, x3, y3, x4, y4);

Para 3D hay que añadirle el parámetro z a cada coordenada x e y, entonces constará el método de 12 parámetros.

curve ( x1, y1, z1, x2, y2, z2, x3, y3, z3, x4, y4, z4);

Las coordenadas (x2, y2, z2) son el punto de inicio de la línea y (x3, y3, z3) el punto donde acaba la línea.

Las coordenadas (x1, y1, z1) son el primer punto de anclaje de la curva, es decir, el primer punto hacia donde se curva la línea. Las coordenadas (x4, y4, z4) son el segundo punto de anclaje, es decir, el segundo punto hacia donde se curva la línea.

  • Método strokeWeight()

Este método se usa para darle anchura a las líneas que dibujemos. La anchura o espersor se mide en pixels