Está en la página 1de 4

Aplicaciones con Hardware y Software Libre orientadas al desarrollo de interfaces grficas

Sesin #2
(6 de octubre del 2015)
La creacin de los diferentes objetos se realiza a travs de diferentes funciones, algunas de ellas son:
triangle(x1,y1,x2,y2,x3,y3): genera un polgono con tres puntas, para la construccin de este se debe
tener en cuenta seis valores, los cuales representan a las tres coordenadas de las puntas.
quad(x1,y1,x2,y2,x3,y3,x4,y4): crea un polgono con cuatro puntas, los parmetros de la funcin
representan a las cuatro puntas, delimitadas por los ocho valores de las coordenadas.
rect(x, y, width, height): dibuja un rectngulo partiendo de la posicin x,y establecida por el usuario, a
partir de este punto de coordenada se crea el rectngulo con el ancho y alto preestablecidos(dos
ltimos valores de la funcin.
arc(x,y,width,height, start,stop): realiza un arco partiendo de un punto central (x,y) y realiza un arco
con un ancho y alto preestablecido (width, height) con los valores iniciales y finales, es decir, e ngulo
que va a tener el arco (start, stop). stas dos ltimas van en radianes. (pueden utilizar las variables
estticas de Processing como PI, HALF_PI, QUARTER_PI).
ellipse(x, y, width, height): crea una elipse partiendo del punto central (x,y) con el ancho y el alto
establecido, si deseamos realizar un crculo tendramos que tener los parmetros width y height
iguales. Trabaja igual que la funcin rect.
Como ya son figuras que contienen una rea especfica el color del relleno se especifica con las
siguientes funciones:
Fill(0,0,0): funcin que le da relleno de color a las figuras que se encuentren despus de su llamada,
los tres parmetros corresponden al espacio de color RGB.
noFill(): con esta funcin se remueve todo tipo de relleno que tengas las figuras creadas despus del
llamado de la funcin.
Ejemplo 1:

Jaime Andrs Riascos Salas


jandresrsalas@gmail.com

Ingeniera Mecatrnica
Instituto Tecnolgico Metropolitano (ITM)

Aplicaciones con Hardware y Software Libre orientadas al desarrollo de interfaces grficas


//Creacin de casa a partir de cuadrados y tringulos
1
int x=0;
2
void setup() {
3
size(100, 100);
4
}
5 void draw() {
6
fill(0,255,0);
//relleno verde de las siguientes figuras
7
triangle(30, 40, 60, 40, 45, 20); //creacin tringulo
8
rect(30, 40, 30, 20); //creacin rectngulo
9
fill(255); //relleno negro de las siguientes figuras
10 stroke(0); //borde negro de las siguientes figuras
11 rect(40, 60, 10, -10); //creacin rectngulo
12 }
13
Ejemplo 2:

1
2
3
4

//Creacin de serie de rectngulos organizados simtricamente a partir de un


ciclo for
for (int x=20; x<100; x=x+20){ //Generacin de filas de cuadrados ordenados cada 20unidades
for (int y=20; y<100; y=y+20){//Generacin de columnas de cuadrados ordenados cada 20unidades
rect(y,x,10,10)//Creacin de los cuadrados en las filas y columnas dadas.
}
}
Ejemplo 3:
1 //Creacin de dos crculos a partir de funcin ellipse y arc
2 int x=0; //Variable inicial
3 void setup() {
4 size(50, 50);
5 frameRate(30); //Velocidad de animacin
6 }
7 void draw() {
8 ellipse(10, 25, 15, 15); //crculo de dimetro 15 (ancho y alto iguales).
9
arc(35, 25, 15, 15, 0, x); //creacin crculo de dimetro 15 pero animado por cada grado del crculo
10
x=x+1; //suma de cada grado del crculo.
11
}
Se puede realizar, de igual manera, cualquier tipo de polgono irregular, de n lados, el cul puede ir
cerrado o no, esto se realiza a travs de los puntos de las vrtices, utilizando las siguientes funciones:

Jaime Andrs Riascos Salas


jandresrsalas@gmail.com

Ingeniera Mecatrnica
Instituto Tecnolgico Metropolitano (ITM)

Aplicaciones con Hardware y Software Libre orientadas al desarrollo de interfaces grficas


vertex(x,y): representa a el punto de coordenada donde se posicionar el vrtice del polgono.
beginShape(): esta funcin establece el punto de partida para empezar a dibujar, de aqu en adelante,
todas las funciones vertex() que se escriban se van a dibujar.
endShape(): comenzando con la funcin beginShape(), la funcin endShape() termina el dibujo
comenzado, dentro de los parmetros que van en la funcin, se puede cerrar el polgono con la
palabra CLOSE, de lo contrario el polgono queda abierto a partir de los vrtices.
Ejemplo 4:
1
2
3
4
5
6
7

//Creacin de un pentgono a partir de vrtices.


BeginShape(); //comienza a dibujar
vertex(0, 0); //primer vrtice
vertex(50, 0); //segundo vrtice
vertex(50, 40); //tercer vrtice
vertex(25, 70); //cuarto vrtice
vertex(0, 40); //quinto vrtice
endShape(CLOSE); // termina el dibujo (mirar la diferencia con el parmetro CLOSE y sin l)

Manejo de perifricos:
Desde Processing se puede realizar el control o manejo de los perifricos que tiene el computador,
como el teclado, el mouse o las tarjetas que tenga asociadas ( sonido, vdeo, etc).
Para el mouse, se tienen las siguientes funciones:
mousePressed(): cada vez que se presione el botn del mouse realiza el evento llamado despus de la
funcin.
mouseClicked(): la funcin se activa cada vez que se presiona y suelta el botn del mouse, realiza las
acciones llamadas despus de la funcin (probar la diferencia con mousePressed() ).
mouseReleased(): realiza los eventos cada vez que el botn del ratn no est presionado.
MouseButton: identifica qu botn del mouse fue presionado (izquierdo o derecho)
mouseDragged(): ejecuta las acciones llamadas despus de la funcin, cuando el botn del mouse se
mantiene presionado.
mouseWheel(): realiza el llamado de la funcin cuando el scroll rueda del mouse es accionada.

Jaime Andrs Riascos Salas


jandresrsalas@gmail.com

Ingeniera Mecatrnica
Instituto Tecnolgico Metropolitano (ITM)

Aplicaciones con Hardware y Software Libre orientadas al desarrollo de interfaces grficas


Processing nos entrega dos variables muy importantes, las cuales nos dicen la posicin actual de
mouse, en coordenadas X y Y. Dichas funciones son mouseX y mouseY.
Ejemplo 4.
//Creacin de dos botones a partir de rectngulos, cambio de color cuando se presione en ellos..
1 int band=0, band1=0; //Variables bandera para el control del botn
2 void setup() {
3 size(100, 100);
4 }
5 void draw() {
6 background(200);
7 fill(255);
//Color Inicial
8 if (band1==1) { //Condicin lgica para el cambio de color
9
fill(255, 0, 0); //Cambio de color
10 }
11 rect(25, 25, 15, 15);
12 fill(255);
//Color inicial
13 if (band==1) {
14 fill(0, 0, 255); //Cambio de Color
15 }
16 rect(75, 75, 15, 15);
17 }
18 void mousePressed() { //Funcin del mouse cuando se presiona el botn
19 if (mouseX>=25 && mouseX<=40 && mouseY<=40 && mouseY>=25) { //Lmites del botn 1 (coordenadas)
20 band=1; //Variables bandera 1 activada para cambio de color21 } else if (mouseX>=75 && mouseX<=90 && mouseY<=90 && mouseY>=75) { //Lmites del botn 2 (coordenadas)
22 band1=1; //Variables bandera 2 activada para cambio de color23 } else { //S se presiona por fuera de cualquiera de los dos botones reinicializa las banderas
24 band1=0; //Variable reinicializada
25 band=0; //Variable reinicializada
26 }
27 }
Tarea 2: Generar un cdigo que me cree un crculo en la posicin donde se encuentra el mouse cada
vez que se d clic en la pantalla.
Referencias:
https://processing.org/reference/

Jaime Andrs Riascos Salas


jandresrsalas@gmail.com

Ingeniera Mecatrnica
Instituto Tecnolgico Metropolitano (ITM)