Processing

PROCESSING Aproximaci贸n te贸rica

Coordenadas › La ventana o escenario donde visualizaremos las acciones tiene una medida que debemos establecer dentro del setup() que es la función para setear el programa › Para dar las medidas de la ventana utilizaremos la función size() y dentro del paréntesis los parámetros (x,y)

0x 0y

15y

10x

(10,15)

Funciones de atributos › Estas funciones cambian el estado de los gráficos y se mantiene su efecto hasta tanto no se modifiquen sus parámetros. › Hay funciones de trazo (grosor, terminación y color) y de color de relleno. › Se aplican a todas las formas. › Se pueden definir en el setup o en el draw antes de la primitiva correspondiente a cada figura.

FUNCIONES DE TRAZO GROSOR

strokeWeight (2)

Grosor en puntos

COLOR

stroke (255,204,77)

Colores RGB

SIN TRAZO

noStroke ( )

Sin contorno

TERMINACION strokeCap (ROUND)

Finales de línea redondeados

strokeCap (SQUARE)

Finales de línea rectos

FUNCIONES DE RELLENO SIN RELLENO

noFill ( )

Sin contorno

COLOR

Fill (255,204,77)

Colores RGB

RELLENO DE FONDO

Background (0,0,0)

Colores RGB

Primitivas Tenemos primitivas para dibujo en 2D de: › Puntos = point (x,y) › Líneas = line (x1, y1, x2, y2) › Rectángulos = rect (x, y, ancho, alto) › Triángulos = triangle (x1, y1, x2, y2, x3, y3) › Cuadriláteros = quad (x1, y1, x2, y2, x3, y3, x4, y4) › Elipses = ellipse (x, y, ancho ,alto) › Arcos = arc (x, y, ancho, alto, inicio, fin) › Curvas Bézier = bezier(x1, y1, cx1, cy1, cx2, cy2, x2, y2) › Formas libres abiertas = beginShape() vertex(x,y) endShape() › Formas libres cerradas = beginShape() vertex(x,y) endShape(CLOSE)

PUNTO

point (150,180)

LĂ?NEA

line (15,15,100,50)

(x de inicio, y de inicio, x de fin, y de fin)

rectรกngulo

rect (100,80,70,50)

(x de incio, y de inicio, ancho, en pixels, alto en pixels)

TRIÁNGULO triangle (10,5,70,5,20,50)

(x de vértice 1, y de vértice 1, x de vértice 2, y de vértice 2, x de vértice 3, y de vértice 3)

CUADRILÁTERO quad (100, 105,140,115, 140,50,40,20)

(x vértice 1, y vértice 1, x vértice 2 y vértice 2, x vértice 3, y vértice 3, x vértice 4, y vértice 4)

ELIPSE

ellipse (100,100, 140, 115)

(centro en x, centro en y, ancho, alto)

ARCO Se dibujarรก en el sentido de las agujas de reloj arc (100, 100, 150, 150, PI, 3 * PI / 2.0)

(x de inicio, y de inicio, ancho, alto, รกngulo de inicio en radianes, รกngulo de fin en radianes)

CURVA BEZIER bezier (80, 50, 10, 160, 150, 100, 150)

(x de inicio, y de inicio, tirador de inicio en x, tirador de inicio en y, tirador de fin en x , tirador de fin en y, x de fin, y de fin)

fORMAs LIBRES Para iniciar una forma libre hay que invocar a la funci贸n beginShape().

Luego ir determinando todos los v茅rtices con la funci贸n vertex (x,y).

Al final se llama a la funci贸n endShape(). beginShape(); vertex (5,10); vertex (20,40); vertex (35, 130); vertex (50,40); vertex (65,50); vertex (50,30); endShape();

fORMAs LIBRES cerradas Para cerrar la figura usamos endShape(CLOSE).

beginShape(); vertex (5,10); vertex (20,40); vertex (35, 130); vertex (50,40); vertex (65,50); vertex (50,30); endShape(CLOSE);

PROCESSING - Aproximaci贸n te贸rica Por: Gaby Puga