La función size() tiene dos parámetros; el primero define el ancho (width), el segundo define el alto (height). Para dibujar una ventana de 800 pixels de ancho y 600 pixels de alto escribe:
size(800, 600);
Corre esta línea de código para ver el resultado. Introduce diferentes valores y observa los resultados. Prueba números pequeños y números grandes.
La función point() tiene dos parámetros que definen la posición: la coordenada X seguida de la coordenada Y.
Para dibujar un solo pixel negro en el centro de un ventana de reproducción de 400 x 400 px (el punto se encuentra en las siguientes coordenadas 200, 200). Escribe el siguiente código:
size(400, 400);
point(200, 200);
Processing incluye un grupo de funciones para dibujar formas básicas. Las formas sencillas las podemos combinar para crear formas más complejas.
Para dibujar una línea, necesitamos cuatro parámetros: dos para la localización inical y dos para la localización final.
line(80, 20, 40, 60);
Para dibujar un triángulo tendremos que añadir 6 parámetros: dos para el primer punto: x1, y1; dos para el segundo punto x2, y2; y finalmente otras dos para el tercer punto x3, y3.
triangle(50, 10, 90, 70, 20, 80);
Podemos dibujar polígonos de cuatro lados con la función quad(). Esta función requiere ocho parámetros para poder funcionar. x1, y1, x2, y2, x3, y3, x4, y4.
size(480, 120);
quad(158, 55, 199, 14, 392, 66, 351, 107);
Para dibujar un rectángulo necesitaremos introducir cuatro parámetros: el primero y el segundo definen las coordenadas x e y de la esquina superior izquierda, el tercero en ancho y el cuarto la altura.
size(480, 120);
rect(180, 60, 220, 40);
En Processing 2 se añadieron nuevas características a la función rect(), permitiéndonos añadir bordes redondeados.
En este caso, tendremos que añadir un quinto parámetro, en pixels, que redondeará nuestro rectángulo.
Si queremos que cada una de las esquinas de nuestro rectángulo tenga un redondeo diferente, podremos hacerlo añadiendo diferentes radios para cada una de ellas. Comenzando desde la esquina superior izquierda y en el sentido de las agujas del reloj, introduciremos valores para cada una de las esquinas.
rectMode()
Por defecto, nuestros rectángulos se dibujan siguiendo el orden de parámetros especificados arriba, pero en algunas circunstancias podemos necesitar modificar el modo de dibujo.
Para ello existe la función rectMode() que modifica el modo en el que serán dibujados nuestros rectángulos. Podemos introducir tres valores en mayúsculas: CORNER, CORNERS, CENTER.
· CORNER: Es el modo por defecto, y el que hemos aprendido arriba. (x, y, width, height).
rectMode(CORNER);
· CORNERS: 1º y 2º parámetro = esquina superior izquierda. 3º y 4º parámetro = esquina inferior derecha.
rectMode(CORNERS);
· CENTER: Utiliza el primer y el segundo parámetro para establecer el centro del rectángulo, y el tercer y el cuarto parámetro como la anchura y la altura.
rectMode(CENTER);
Las coordenadas x e y de un rectángulo son situadas en la esquina superior izquierda, pero una ellipse define las coordenadas x e y en el centro. El tercer parámetro especifica el ancho y el cuarto parámetro la altura.
ellipseMode()
Igual que sucede con los rectángulos, la ellipse tiene modos de dibujo. en ellipseMode podemos utilizar cuatro parámetros en mayúsculas: CENTER, RADIUS, CORNER, CORNERS.
· CENTER: Es el que utilizamos por defecto. x e y para determinar el centro, el tercer parámetro para el ancho y el cuarto parámetro para la altura. ellipse(x, y, width, height);
· RADIUS: x e y para determinar el centro, el tercer parámetro determina el radio del ancho, y el cuarto el radio de la altura.
· CORNER: trabaja de manera similar al rectángulo por defecto. 1º y 2º parámetro para posicionar la esquina superior izquierda del rectángulo que circunscribe la elipse y utiliza el 3º y el 4º parámetro para ajustar la anchura y la altura.
· CORNERS: tiene un efecto parecido a CORNER pero el 3º y 4º parámetro establecen la esquina inferior derecha de la elipse.
arc(x, y, width, height, arc_start, arc_end);
Para dibujar un arco debemos utilizar seis parámetros. x e y para determinar el centro, el 3º parámetro para determinar el ancho y el 4º la altura. el 5º es el comienzo del arco y el 6º el final del mismo.
Sistema de coordenadas polares
Processing por defecto mide los ángulos en radianes, El sistema de coordenadas polares utiliza una estructura diferente al sistema cartesiano. Los puntos son definidos en relación a un ángulo de rotación (q) y una distancia a un origen central.
La distancia alrededor de un sistema polar es PI * 2, PI es igual a la mitad de la rotación y PI/2 un cuarto de rotación.
Processing nos proporciona las siguientes constantes: PI, TWO_PI, HALF_PI, y QUARTER_PI.
Processing define sus arcos en la dirección a las agujas del reloj. Podemos utilizar las constantes que nos ofrece Processing, aunque es difícil calcular con radianes. Por ese motivo podemos utilizar grados para calcular el comienzo y el final de nuestros arcos, utilizando la función radians().
La función bezier() puede dibujar líneas curvas. Una curva bezier es definida por una serie de puntos de control y puntos de ancha. Una curva que se dibuja entre el punto de ancla y el punto de control define su forma.
bezier(x1, y1, cx1, cy1, cx2, cy2, x2, y2)
La función requiere ocho parámetros para definir cuatro puntos. La curva es dibujada entre el primer y cuarto punto, y el control de los puntos es definido por el segundo y tercer punto.
Cuando usamos la función bezier() podemos añadir el detalle de la curva con bezierDetails(). Esta función solo funciona en P3D render (que es un modo de render 3D que veremos más adelante). El valor por defecto P2D no utiliza esta información.
Cuando un programa está corriendo, el ordenador comienza a leer desde arriba y va leyendo línea a línea hasta abajo y luego para. Para que una forma se muestre dibujada por encima de otra tendrá que estar escrita por debajo de las otras.
size(600, 300);
ellipse(350, -100, 500, 500);
//El rectángulo se dibuja encima de la elipse
//porque está escrito debajo en el código.
rect(50, 30, 250, 250);
Poner al reverso
Modificando este ejemplo, podemos modificar el orden y la ellipse se sitúa por encima del rectángulo.
size(600, 300);
rect(50, 30, 250, 250);
//La elipse se dibuja encima del rectángulo
//porque está escrito debajo en el código.
ellipse(350, -100, 500, 500);
Puedes pensar en esto como cuando pintas con un pincel o haces un collage. El último elemento que añadas será visible arriba.