procesing

Gráficos por
Computador
Primitivas básicas 2D con processing
Jordi Linares i Pellicer
Escola Politècnica Superior d’Alcoi
Dep. de Sistemes Informàtics i Computació
jlinares@dsic.upv.es
http://www.dsic.upv.es/~jlinares

Modos de visualización
•
•
•
•
•

Processing dispone de varios modos de visualización: JAVA2D,
P2D, P3D y OPENGL
Hay otras posibilidades mediante el uso delibrerías
específicas (por ejemplo, renderizado basado en trazado de
rayos)
El modo de visualización se debe especificar como tercer
argumento en la función size(). El modo por defecto, si no
se especifica nada, es JAVA2D
Los modos JAVA2D y P2D permiten abordar
representaciones bidimensionales. P2D implica obtener un
mayor rendimiento (aceleración por hardware) pero aún no
tiene implementadas todaslas funciones que permite
JAVA2D
Usaremos el modo por defecto, JAVA2D, que nos permite el
uso de todas las funciones 2D

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
xpositivas evolucionan a la izquierda
y las y positivas evolucionan hacia
abajo

Primitivas básicas 2D
en processing
•
•
•
•
•
•
•
•

Puntos
Líneas
Elipses / Círculos / Arcos
Rectángulos
Triángulos
Cuadriláteros
Curvas (Bézier y Catmull-Rom)
Shapes (formas libres)

Color y opciones
En processing muchas funciones llevan a cabo un cambio de estado =>
establecen unparámetro que permanecerá activo mientras no se cambie.
Ejemplo: stroke() => cambia el color de los trazos y afectará a cualquier
trazo hasta que se indique otro color

•
•
•

El color de los trazos se puede caracterizar con la función stroke()
stroke(255) => RGB(255, 255, 255) un parámetro, utilizado para
especificar un valor entre una escala de 256 niveles de gris
stroke(128, 0, 128) =>Cualquier valor RGB
El grosor de los trazos se puede caracterizar con strokeWeight()
strokeWeight(5) => Grosor 5
El color de relleno de figuras 2D se especifica mediante la función fill()
fill(128) => RGB(128, 128, 128)
fill(200, 120, 90) => RGB(200, 120, 90)

•
•
•
•
•

Color y opciones
background()

•
•

Borra la ventana con el color especificado
Ejemplos: background(0)background(128, 100, 128)

noFill()

•

Las figuras 2D se dibujaran sin relleno

noStroke()

•

Las figuras 2D se dibujaran sin trazo
(especialmente útil en figuras cerradas, pero
afecta a todas, incluso a líneas)

Puntos
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)
Dibujaun punto en las coordenadas (x, y) y un color concreto
No queda afectado por stroke() o strokeWeight()
Ejemplo:
set(50, 50, color(128, 120, 255))

•
•
•

•

Otros usos de set (estudio posterior)
La función set puede utilizarse también para ubicar en las
coordenadas (x, y) una imagen
set puede ejecutarse también sobre una imagen

•
•

Líneas
line(x1, y1, x2, y2)
Dibuja unalínea recta entre los puntos (x1, y1) y (x2, y2)
Con las funciones stroke indicamos sus propiedades
Ejemplo:

•
•
•

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

size(200, 200);
background(0);
for (int i=0; i (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 nodiá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

•
•
•
•
•

Elipses y círculos
•

Ejemplo:
size(200, 200);
background(0);
stroke(255, 0, 0);
strokeWeight(5);...