6

Punto 2 – Coordenadas y figuras primitivas

Coordenadas

En Processing, el origen se encuentra en el margen superior izquierdo.

Primitivas: punto

point(20, 20);point(30, 30);point(40, 40);point(50, 50);point(60, 60);

Primitivas: línea

line(25, 90, 80, 60);line(50, 12, 42, 90);line(45, 30, 18, 36);

Primitivas: elipse

Introducción a Processing v1.5+  Docente: Raúl Lacabanne

7

ellipse(40, 40, 60, 60); // círculo grandeellipse(75, 75, 32, 32); // círculo pequeño

Primitivas: rectángulo

rect(15, 15, 40, 40); // cuadrado granderect(55, 55, 25, 25); // cuadrado pequeño

Orden de dibujo

En Processing, el orden de dibujo siempre es secuencial, es decir, la primer instrucción se representa primero, las siguientes por encima, y la última por sobre todas estas.

rect(15, 15, 60, 60); // cuadrado inferiorrect(20, 20, 40, 40); // cuadrado intermediorect(25, 25, 20, 20); // cuadrado superior

Suavizado

En Processing existe una función que aplica a la imagen resultante un filtro antialias (postproceso) para suavizar los contrastes cromáticos al dibujar figuras. La función para activar esta propiedad es: smooth()

Y cuando deseamos desactivarla, utilizamos la función:

noSmooth()

Atributos: strokeWeight() - Tamaño de contorno

smooth();strokeWeight(1); // por defectoline(20, 20, 80, 20);

Introducción a Processing v1.5+  Docente: Raúl Lacabanne

8

strokeWeight(4); // 4 pixelesline(20, 40, 80, 40);strokeWeight(10); // 10 pixelesline(20, 70, 80, 70); 

Atributos: strokeCap() - Extremo de contorno

smooth();strokeWeight(12.0);strokeCap(ROUND); // redondeadoline(20, 30, 80, 30);strokeCap(SQUARE); // planoline(20, 50, 80, 50);strokeCap(PROJECT); // proyecciónline(20, 70, 80, 70);

Atributos: strokeJoin() - Junta de contorno

smooth();strokeWeight(10);strokeJoin(MITER); // mitratriangle(50, 20, 80, 80, 20, 80);

smooth();strokeWeight(10);strokeJoin(BEVEL); // biseltriangle(50, 20, 80, 80, 20, 80);

smooth();strokeWeight(10);strokeJoin(ROUND); // redondeadatriangle(50, 20, 80, 80, 20, 80);

Introducción a Processing v1.5+  Docente: Raúl Lacabanne

9

Lectura recomendada

• Buioli, I. & Pérez Marín, J. "Processing: un lenguaje al alcance de todos", Autoedición, 2013, Unidad 2 "Formas: coordenadas y primitivas" (pag. 9).

• Reas, C. & Fry, B. "Processing: A Programming Handbook for Visual Designers and Artists”, MIT Press, 2007, Capítulo “Shape 1: Coordinates, Primitives” (pag. 23).

Información complementaria

Primitivas: triángulo

triangle(60, 10, 25, 60, 75, 65);

Primitivas: cuadrilátero

quad(38, 31, 86, 20, 69, 63, 30, 76);

Primitivas: curva bezier

bezier(32, 20, 80, 5, 80, 75, 30, 75);

// Dibujo de puntos de controlline(32, 20, 80, 5);ellipse(80, 5, 4, 4);line(80, 75, 30, 75);ellipse(80, 75, 4, 4);

Introducción a Processing v1.5+  Docente: Raúl Lacabanne

10

Ejercicio 01

• Escribir un boceto con la finalidad de componer un cuadro, con una resolución de 300x300 píxeles, que contenga las siguientes figuras:◦ dos elipses, cuatro líneas y un rectángulo.

• Comentar todas las instrucciones.

De aquí en más adaptar el siguiente comentario (a modo de título) e ingresarlo en el lugar de la primera instrucción:

// ***********************************************// * Alumno: Nombre y apellido del alumno        *// * Legajo: xxxxx                               *// * Ejercicio Nro: 01                           *// * Asignatura: xxxx   *// * Carrera: xxxx   *// * Institución: UNQ                            *// * Año: XXXX                  Cuatrimestre: x  *// ***********************************************

Ejercicio 2

• Componer un cuadro con una resolución de 300x300 que contenga las siguientes figuras:◦ dos elipses, cuatro líneas y un rectángulo.

• Generar las figuras con cambios de atributos.• Comentar todas las instrucciones.

Introducción a Processing v1.5+  Docente: Raúl Lacabanne