Primitivas 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);
Quizá te interese :
Este es un pequeño paisaje creado en Processing float angulo; PImage imagen; PImage image ...
En el Presente tutorial mostraremos como crear un árbol en Processing, sin mas que agregar c ...
En el presente tutorial mostraremos como reconstruir una imagen con Processing, para eso uti ...
