Sei sulla pagina 1di 23

Manual para processing

MANUAL PARA PROCESSING

Enrique Claveria
1641 programacin para realidad virtual

Claveria Gutirrez Enrique

INDICE
Processing ................................................................................................................................ 2
Pantalla............................................................................................................................................ 2
Formas bsicas ......................................................................................................................... 3
point (punto) ................................................................................................................................... 3
Line (lnea) ....................................................................................................................................... 4
rect (rectngulo).............................................................................................................................. 5
ellipse (elipse).................................................................................................................................. 6
quad (cuadrado) .............................................................................................................................. 7
triangle (triangulo) .......................................................................................................................... 8
curve (curva).................................................................................................................................... 9
bezier (curva Bzier cuadrtica) .................................................................................................... 10
Figuras complejas ................................................................................................................... 11
beginShape (comenzar la forma) y endShape (terminar la forma) .............................................. 11
beginShape();

vertex(); endShape(); ........................................................................................ 12

beginShape();

vertex(); endShape(CLOSE);.............................................................................. 13

beginShape(POINTS); vertex(); endShape(); .............................................................................. 14


beginShape(LINES);

vertex(); endShape(); ................................................................................ 15

beginShape(TRIANGLES);

vertex(); endShape(); ....................................................................... 16

beginShape(TRIANGLE_STRIP);

vertex(); endShape(); .............................................................. 17

beginShape(TRIANGLE_FAN);

vertex(); endShape(); ................................................................ 18

beginShape(QUADS);

vertex(); endShape(); ............................................................................. 19

beginShape(QUAD_STRIP);

vertex(); endShape(); .................................................................... 20

Sentencias para edicin .......................................................................................................... 21


size (tamao) ................................................................................................................................. 21
fill (relleno) .................................................................................................................................... 22
Stroke (contorno) .......................................................................................................................... 22
noStroke (sin contorno) ............................................................................................................... 22

Claveria Gutirrez Enrique

Processing
Es un sistema que integra un software, un lenguaje de programacin y una metodologa de
enseanza, busca introducir fundamentos de programacin en un contexto visual lo que la hace
ser una herramienta de boceto de imgenes, animacin e interacciones.
Tambin se considera como un dialecto de java, especficamente diseado para el desarrollo de
arte grfico, animacin y aplicaciones graficas de cualquier tipo. Es un software libre disponible en
las plataformas donde java est disponible (Mac OS, Windows y linux) se puede obtener en la
pgina processing.org
Una caracterstica importante es que se puede combinar con programacin java puro y con sus
libreras. Las aplicaciones processing tambin pueden generarse para su ejecucin en internet
como un applet de java

Pantalla
La pantalla es un grfico de pixeles cada uno registrado para una nica coordenada (X,Y) El origen
es 0,0 y parte de la esquina superior izquierda de la pantalla, al sumar el Y el movimiento es hacia
la derecha y al sumar en Y el movimiento es hacia abajo.

Claveria Gutirrez Enrique

Formas bsicas
point (punto)
Sirve para:
Crear puntos
Point(x, y);
Donde:
X= posicin en el eje x
Y= posicin en el eje y
Ejemplo:
Cdigo
Point (10,10);
Point (20,20);
Point (30,30);
Pantalla

Claveria Gutirrez Enrique

Line (lnea)
Sirve para:
Crear lneas
Line(x, y, x2, y2);
Donde:
X= posicin en el eje x donde inicia la lnea
Y= posicin en el eje y donde inicia la lnea
X2= posicin en el eje x donde termina la lnea
Y2= posicin en el eje y donde termina la lnea
Ejemplo:
Cdigo
Line (20, 10, 60,10);
Line (20, 10, 20,50);
Line (20, 10, 60,50);
Pantalla

Claveria Gutirrez Enrique

rect (rectngulo)
Sirve para:
Crear rectngulos
rect(x, y, ancho, alto);
Donde:
X= posicin inicial en el eje de x
Y= posicin inicial en el eje de y
Ancho= indica el ancho del rectngulo
Alto= indica la altura del rectngulo
Ejemplo:
Cdigo
rect (20, 40, 30,20);
Pantalla

Claveria Gutirrez Enrique

ellipse (elipse)
Sirve para:
Crear elipses
ellipse(x, y, width, height);
x= valor que indica el punto central del ellipse con respecto al eje x
y= valor que indica el punto central del ellipse con respecto al eje y
width= indica el ancho del ellipse
height= indica la altura del ellipse
Ejemplo:
Cdigo
ellipse(50, 20, 60, 20);
Pantalla

Claveria Gutirrez Enrique

quad (cuadrado)
Sirve para:
Crear cuadros
quad(x1, y1, x2, y2, x3, y3, x4, y4);
Donde:
X1= primer punto del cuadro en el eje x
y1= primer punto del cuadro en el eje y
X2= segundo punto del cuadro en el eje x
y2= segundo punto del cuadro en el eje y
X3= tercer punto del cuadro en el eje x
y3= tercer punto del cuadro en el eje y
X4= cuarto punto del cuadro en el eje x
y4= cuarto punto del cuadro en el eje y
Ejemplo:
Cdigo
quad (30, 20, 30, 50, 60, 50, 60,20);
Pantalla

Claveria Gutirrez Enrique

triangle (triangulo)
Sirve para:
Crear tringulos
triangle(x1, y1, x2, y2, x3, y3);
Donde:
X1= primer punto del tringulo en el eje x
y1= primer punto del tringulo en el eje y
X2= segundo punto del tringulo en el eje x
y2= segundo punto del tringulo en el eje y
X3= tercero punto del tringulo en el eje x
y3= tercer punto del tringulo en el eje y
Ejemplo:
Cdigo
triangle (20, 20, 10, 40, 30,40);
Pantalla

Claveria Gutirrez Enrique

curve (curva)
Sirve para:
Crear curvas
curve(x1, y1, x2, y2, x3, y3, x4, y4);
Donde:
X1= primer punto de la curva en el eje x
y1= primer punto de la curva en el eje y
X2= primer punto que define la forma de la curva en el eje x
y2= primer punto que define la forma de la curva en el eje y
X3= segundo punto que define la forma de la curva en el eje x
y3= segundo punto que define la forma de la curva en el eje y
X4= ltimo punto de la curva en el eje x
y4= ltimo punto de la curva en el eje y
Ejemplo:
Cdigo
curve (30, 20, 80, 5, 80, 75, 50,75);
Pantalla

Claveria Gutirrez Enrique

bezier (curva Bzier cuadrtica)


Sirve para:
Crear curvas

bezier(x1, y1, x2, y2, x3, y3, x4, y4);


Donde:
X1= primer punto de la curva en el eje x
y1= primer punto de la curva en el eje y
cx1= primer punto del contexto para definir la curva en el eje x
cy1= primer punto del contexto para definir la curva en el eje y
cx2= segundo punto del contexto para definir la curva en el eje x
cy2= segundo punto del contexto para definir la curva en el eje y
X2= ltimo punto de la curva en el eje x
y2= ltimo punto de la curva en el eje y
Ejemplo:
Cdigo
bezier (30, 20, 80, 5, 80, 75, 50,75);
Pantalla

Claveria Gutirrez Enrique

Figuras complejas
beginShape (comenzar la forma) y endShape (terminar la forma)
beginShape empieza registrando vrtices para una una forma
endShape termina el registro de vrtices de la forma
El comando beginShape requiere un parmetro para indicar el tipo de forma que se creara a partir
de los vrtices otorgado. Los parmetros son:
LINES
TRIANGLES
TRIANGLES_STRIP
QUADS
QUAD_STRIP
Despus del mtodo beginShape siguen los vrtices con el comando vertex con 2 parmetros que
indican la posicin 2D por ltimo se concluye con endShape();

Claveria Gutirrez Enrique

beginShape();

vertex();

endShape();

Donde:
beginShape(); =inicio de la figura
vertex(); = entre los parntesis se colocan las coordenadas para dibujar la figura
endShape(); = indica el fin de la figura
Ejemplo:
Cdigo
beginShape();
vertex(30,20);
vertex(85,20);
vertex(85,75);
vertex(30,75);
endShape();
pantalla

Claveria Gutirrez Enrique

beginShape();

vertex();

endShape(CLOSE);

Donde:
beginShape(); =inicio de la figura
vertex(); = entre los parntesis se colocan las coordenadas para dibujar la figura
endShape(CLOSE); = indica el fin de la figura donde CLOSE indica que se unen el primer y ultimo
vrtice
Ejemplo:
Cdigo
beginShape();
vertex(30,20);
vertex(85,20);
vertex(85,75);
vertex(30,75);
endShape(CLOSE);
Pantalla

Claveria Gutirrez Enrique

beginShape(POINTS);

vertex();

endShape();

Donde:
beginShape(POINTS); =inicio de la figura donde POINTS indica que se dibujaran solo puntos
vertex(); = entre los parntesis se colocan las coordenadas para dibujar la figura
endShape(); = indica el fin de la figura
Ejemplo:
Cdigo
beginShape(POINTS);
vertex(30,20);
vertex(85,20);
vertex(85,75);
vertex(30,75);
endShape();
Pantalla

Claveria Gutirrez Enrique

beginShape(LINES);

vertex();

endShape();

Donde:
beginShape(LINES); =inicio de la figura donde LINES indica que se dibujaran solo LINEAS
vertex(); = entre los parntesis se colocan las coordenadas para dibujar la figura
endShape(); = indica el fin de la figura
Ejemplo:
Cdigo
beginShape(LINES);
vertex(30,20);
vertex(85,20);
vertex(85,75);
vertex(30,75);
endShape();
Pantalla

Claveria Gutirrez Enrique

beginShape(TRIANGLES);

vertex();

endShape();

Donde:
beginShape(TRIANGLES); =inicio de la figura donde TRIANGLES indica que se dibujaran triangulos
vertex(); = entre los parntesis se colocan las coordenadas para dibujar la figura
endShape(); = indica el fin de la figura
Ejemplo:
Cdigo
beginShape(TRIANGLES);
vertex(30,75);
vertex(40,20);
vertex(50,75);
vertex(60,20);
vertex(70,75);
vertex(80,20);
endShape();
Pantalla

Claveria Gutirrez Enrique

beginShape(TRIANGLE_STRIP);

vertex();

endShape();

Donde:
beginShape(TRIANGLES_STRIP); =inicio de la figura donde TRIANGLES_STRIP indica que se
dibujaran tringulos que se unirn con la misma figura
vertex(); = entre los parntesis se colocan las coordenadas para dibujar la figura
endShape(); = indica el fin de la figura
Ejemplo:
Cdigo
beginShape(TRIANGLE_STRIP);
vertex(30,75);
vertex(40,20);
vertex(50,75);
vertex(60,20);
vertex(70,75);
vertex(80,20);
endShape();
Pantalla

Claveria Gutirrez Enrique

beginShape(TRIANGLE_FAN);

vertex();

endShape();

Donde:
beginShape(TRIANGLES_FAN); =inicio de la figura donde TRIANGLES_FAN indica que se dibujaran
tringulos que se unirn con la misma figura
vertex(); = entre los parntesis se colocan las coordenadas para dibujar la figura
endShape(); = indica el fin de la figura
Ejemplo:
Cdigo
beginShape(TRIANGLE_FAN);
vertex(58,50);
vertex(58,15);
vertex(90,50);
vertex(58,85);
vertex(22,50);
vertex(58,15);
endShape();
Pantalla

Claveria Gutirrez Enrique

beginShape(QUADS);

vertex();

endShape();

Donde:
beginShape(QUADS); =inicio de la figura donde QUADS indica que se dibujaran cuadrados
vertex(); = entre los parntesis se colocan las coordenadas para dibujar la figura
endShape(); = indica el fin de la figura
Ejemplo:
Cdigo
beginShape(QUADS);
vertex(30,20);
vertex(30,75);
vertex(50,75);
vertex(50,20);
vertex(65,20);
vertex(65,75);
vertex(85,75);
vertex(85,20);
endShape();
Pantalla

Claveria Gutirrez Enrique

beginShape(QUAD_STRIP);

vertex();

endShape();

Donde:
beginShape(QUADS_STRIP); =inicio de la figura donde QUADS_STRIP indica que se dibujaran
cuadrados y se unirn con la misma figura
vertex(); = entre los parntesis se colocan las coordenadas para dibujar la figura
endShape(); = indica el fin de la figura
Ejemplo:
Cdigo
beginShape(QUAD_STRIP);
vertex(30,20);
vertex(30,75);
vertex(50,20);
vertex(50,75);
vertex(65,20);
vertex(65,75);
vertex(85,20);
vertex(85,75);
endShape();
Pantalla

Claveria Gutirrez Enrique

Sentencias para edicin


size (tamao)
Sirve para modificar el tamao del lienzo donde trabajaremos (pantalla)
size(x,y);
Donde:
x= tamao en pixeles en el eje x
y= tamao en pixeles en el eje y
Ejemplo:
Cdigo
size(500,500);
Pantalla

Claveria Gutirrez Enrique

fill (relleno)
Sirve para agregar color de relleno a una figura
fill(r,g,b,t);
Donde:
rgb= indica el cdigo de color en rgb
t= nmero de transparencia del color del 0 al 1

Stroke (contorno)
Sirve para cambial el color del contorno
Stroke(r,g,b,t);
Donde:
rgb =indica el cdigo de color en rgb
t= nmero de transparencia del color del 0 al 1

noStroke (sin contorno)


Sirve para quitar el contorno en una figura
noStroke();
Donde:
();= al estar vaco indica que no hay valor