Primarias básicas 2D con Processing.

El Sistema de Coordenadas 2D

El tamaño de la ventana se establece mediante la función size(), habitualmente una de las primeras acciones llevadas a cabo en la función setup().
El (0,0) se encuentra situado en la esquina superior izquierda, donde las “x” positivas evolucionan a la izquierda y las “y” positivas evolucionan hacia abajo.

Primitivas básicas 2D en Processing

• Punto
• Línea
• Elipse / Círculo / Arco
• Rectángulo
• Triángulo
• Cuadrilátero

Punto

point(x, y)

Dibuja un punto en la coordenadas (x, y) especificadas . El color se establece mediante stroke() y su grosor con strokeWeight().

set(x, y, color)

Dibuja un punto en las coordenadas (x, y) y un color concreto. No queda afectado por stroke() o strokeWeight().

Ejemplo:

strokeWeight(3);
point(25,25);
set(50, 50, color(128, 120, 255));

Línea

line(x1, y1, x2, y2)

Dibuja una línea recta entre los puntos (x1, y1) y (x2, y2) Con las funciones stroke() indicamos sus propiedades.

Ejemplos:

size(100, 100);
background(0);
stroke(255);
strokeWeight(5);
line(0, 0, 99, 99);

size(200, 200);
background(0);
for (int i=0; i<100; i++)
{
   stroke(random(255), random(255), random(255));
   strokeWeight(random(10));
   line(0, 0, random(200), random(200));
}

Terminacion de Línea

ROUND (redondeado), PROJECT (proyectado, se extiende en función del grosor del trazo), SQUARE (cuadrado estricto).

Ejemplo:

size(200, 150);
background(0);
stroke(255);
strokeWeight(10);
strokeCap(ROUND);
line(50,50,150,50);
strokeCap(PROJECT);
line(50,75,150,75);
strokeCap(SQUARE);
line(50,100,150,100);

Elipse y Círculo

ellipse(x, y, ancho, alto)

Dibuja una elipse en las coordenadas (x, y) y el ancho y alto suministrados.

ellipseMode()

Cambia el modo en el que los parámetros de la elipse son interpretados:

• ellipseMode(CENTER) => (x, y) es el centro de la elipse (es el modo por defecto).
• ellipseMode(RADIUS) => igual que el anterior, pero ancho y alto son radios y no diámetros.
• ellipseMode(CORNER) => (x, y) hace referencia a la esquina superior izquierda del rectángulo envolvente de la elipse.
• ellipseMode(CORNERS) => los cuatro parámetros de la elipse hacen referencia a dos puntos opuestos del rectángulo envolvente de la elipse.

Ejemplo:

size(200, 150);
background(0);
stroke(255, 0, 0);
strokeWeight(5);
fill(0, 255, 0);
ellipse(100, 100, 100, 50);
ellipseMode(CORNERS);
ellipse(0, 0, 50, 50);

Arco

arc(x, y, ancho, alto, inicio, fin)

Dibuja una arco como un sector de una elipse en las coordenadas (x, y) y el ancho y alto suministrados. El fragmento o sector de la elipse dibujado es el comprendido entre el ángulo inicio y el ángulo fin (radianes por defecto) en el sentido de las agujas del reloj.

Sus parámetros son igualmente interpretados en función del modo indicado con ellipseMode().
En Processing, el modo por defecto al dibujar figuras es con relleno, y se aplica incluso ante figuras no cerradas. La función noFill() ha de ser llamada de forma explícita si no se quiere relleno.

Ejemplo:

size(200, 200);
background(0);
stroke(255, 0, 0);
strokeWeight(5);
fill(0, 255, 0);
arc(100, 100, 100, 100, 0, PI / 2.0);
noFill();
arc(100, 100, 100, 100, PI, 3 * PI / 2.0);

Rectángulo

rect(x, y, ancho, alto)

Dibuja un rectángulo.

rectMode()

Cambia el modo en el que los parámetros del rectángulo son interpretados Los parámetros son los mismos que para la elipse: CENTER, RADIUS, CORNER y CORNERS. El modo por defecto en este caso es el CORNER (x e y son la esquina superior izquierda).

Ejemplo:

size(210, 180);
background(0);
stroke(255, 0, 0);
strokeWeight(5);
fill(0, 255, 0);
rect(100, 100, 100, 50);
rectMode(CORNERS);
rect(0, 0, 50, 50);

Triángulo y Cuadrilátero

triangle(x1, y1, x2, y2, x3, y3)

Dibuja un triángulo a partir de sus tres vértices.

quad(x1, y1, x2, y2, x3, y3, x4, y4)

Dibuja un cuadrilátero. El primer punto del mismo es (x1, y1), el resto deben ser los 3 vértices restantes debiéndose especificar en sentido horario o anti-horario (en uno de los dos).

Ejemplo:

size(200, 400);
background(0);
stroke(255, 0, 0);
strokeWeight(5);
fill(0, 255, 0);
// (100,25) - (25,175) - (175,175)
triangle(100,25,25,175,175,175);
// Sentido horario // (38,231) - (186,220) - (169,363) - (30,376)
quad(38, 231, 186, 220, 169, 363, 30, 376);