Gua de laboratorio N 1

Introduccin a Processing
I. Entorno de programacin processing.
Processing es un entorno de programacin de cdigo abierto y basado en
Java que no requiere muchos conocimientos sobre informtica pero si
requiere suficiente dosis de creatividad. Por su facilidad de uso permite
empezar rpidamente a generar sofisticadas aplicaciones graficas e
interactivas al mismo tiempo minimizando la dificultad asociada a la
compilacin y generacin de software.

Se caracteriza por ser bsicamente una extensin del lenguaje de

programacin Java, que en principio tiene acceso a todas las
prestaciones de Java. Processing dispone de bibliotecas para trabajar con
Arduino, para implementar aplicaciones RA y para generar proyectos para
la plataforma Android.

Instalar y ejecutar processing

Debe descargar e instalar Processing para su plataforma desde

www.processing.org. Seleccione la descarga estndar.

Finalizada la descarga haga clic en el ejecutable de instalacin y siga los

pasos para instalar Processing en su plataforma. Cuando termine, haga
clic en el icono de Processing para iniciarlo.

Area de edicin de codigo

Area de salida estandar

Los programas de Processing se denominan bocetos y el nombre del

mismo refleja la fecha actual.

Primer programa en Processing

De hecho se puede crear una aplicacin con una sola linea de cdigo.
Introduzca lo siguiente en el editor y pulse el botn Run.

Size(600,400);

El resultado ser similar al mostrado en la siguiente imagen. La nueva

ventana que se abre es un boceto. la ventana tiene 600 pixeles de ancho
y 400 de alto.

Al ejecutar el siguiente cdigo:

size(600,400);
background(0);
fill(255,255,0);
stroke(255,0,255);
strokeWeight(10);

ellipse(300,200,200,200);

se obtiene:

Modo interactivo

Para que el boceto de Processing cambie con el tiempo o reaccione a una

entrada, debe usar el modo interactivo. Para ello, debe invocar su cdigo
desde dos funciones especiales, setup() y draw().

setup() se usa al incluir el cdigo que solo se va a ejecutar una vez; al

ejecutar el boceto por primera vez. Esta funcin determina el estado inicial
del boceto, de ah su nombre. Por el contrario, la funcin draw() se invoca

repetidamente al ejecutar el proceso. Los contenidos de esta funcin

determina como se redibuja la ventana del boceto al cambiar los valores
en cada ejecucin del mismo.

Crear un nuevo boceto e introduzca el siguiente cdigo:

int i = -50;
void setup(){
size(300,300);
fill(255);
stroke(0);
strokeWeight(3);
}
void draw(){
background(100);
ellipse(150,i,100,100);
i++;
if (i > 350){
i = -50;
}
}

Al ejecutar este boceto, vera un circulo blanco con un contorno negro que
se desplaza hacia abajo sobre un fondo gris.

II. Dibujar en processing

Processing es bsicamente un entorno de programacin para aadir

elementos grficos a una pantalla de forma rpida y sencilla.

Formas primitivas.

Hay siete funciones bsicas de formas primitivas 2D:

point()
Solo acepta dos parametros que representan los valores x e y, y que
traza un solo pixel (con el color determinado por el valor de color
actual de stroke()) en ese punto.

line()
Acepta cuatro argumentos para representar las coordenadas X e Y
de cada extremo de la lnea.

triangle()
Acepta seis argumentos para representar las coordenadas de los
vrtices de la forma.

quad()
Acepta ocho argumentos para representar las coordenadas de los
vrtices de la forma.

rect()
Acepta cuatro argumentos para crear un rectngulo. De forma
predeterminada, los dos primeros representan las coordenadas de

punto central y los otros dos representan la anchura y la altura del

rectngulo. La funcin especial rectMode() cambia el modo de dibujo
del rectngulo para que los dos primeros argumentos representen la
esquina superior izquierda (rectMode(CORNER)) o para que el
tercer y cuarto argumento representen el radio o distancia de los
bordes desde el punto central del rectngulo (rectMode(RADIUS)).
El modo CORNERS interpreta los dos primeros argumentos como
una esquina y el tercer y cuarto argumento como las coordenadas
de la esquina opuesta. El modo predeterminado de un rectngulo es
CENTER.

ellipse()
Tiene un funcionamiento similar al anterior y la funcin ellipseMode()
puede aceptar los mismos cuatro argumentos de modo: CORNER,
CORNERS, RADIUS y CENTER. Su significado es similar al del
caso del rectngulo.

arc()
Traza una parte de una elipse desde un ngulo a otro. Esta funcin
acepta seis argumentos. Los dos primeros representan la posicin
del arco, los dos siguientes representan la anchura y la altura de la
elipse, y los dos ltimos representan los ngulos de origen y destino
del arco. En Processing los ngulos se expresan en radianes y los
dos ltimos argumentos de esta funcin debe indicarse en radianes.
Los ngulos de la funcin arc() giran en el sentido de las agujas del
reloj.

Trabajar con color HSB.

El modo de color predeterminado es RGB, en el que los tres valores

numricos equivalen a los componentes rojo, verde y azul del color.

void setup(){
size(500,500);

colorMode(HSB,1);
}
void draw(){
for (int x=0;x <= 500; x++){
stroke(x/500.0,mouseX/500.0,0.7);
line (x,0,x,500);
}
}
Trigonometra sencilla.

Int angle = 0;
float rads = 0.0;
void setup(){
size(500,500);
colorMode(HSB,1);
}
void draw(){
background(0.5);
rads = radians(angle);
noFill();
stroke(0.0,0.0,1.0);
arc(250,250,200,200,0,rads);
stroke(0.0,0.0,0.0);
line(250,250,250+cos(rads)*100,250);
line(250,250+sin(rads)*100,250,250);
angle++;
if (angle==360){
angle=0;
}
}

Combinar las piezas.

//declarar las variables

int angle=0;
float rads = 0.0;
//funcion de configuracion
void setup(){
size(500,500);
colorMode(HSB,1);
rectMode(CENTER);
}
//codigo repetido
void draw(){
rads = radians(angle);
for (int x =0; x<= 500;x++){
stroke(x/500.0,abs(cos(rads)),0.7);
line(x,0,x,500);
}
noFill();
stroke(0.0,0.0,1.0);
arc(250,250,200,200,0,rads);
stroke(0.0,0.0,0.0);
line(250,250,250+cos(rads)*100,250);
line(250,250+sin(rads)*100,250,250);
noStroke();
fill(abs(sin(rads)),1.0,1.0);
ellipse(250+cos(rads)*50,250+(sin(rads)*50),5+abs((sin(rads)*5)),5+a
bs((cos(rads)*5)));
ellipse(250+cos(rads)*100,250+(sin(rads)*100),10+abs((sin(rads)*10))
,10+abs((cos(rads)*10)));
ellipse(250+cos(rads)*150,250+(sin(rads)*150),15+abs((sin(rads)*15))
,15+abs((cos(rads)*15)));
ellipse(250+cos(rads)*200,250+(sin(rads)*200),20+abs((sin(rads)*20))
,20+abs((cos(rads)*20)));

stroke(0.0,0.0,1.0);
fill(0.0,0.0,cos(rads));
rect((cos(rads)*200)+250,50,20,20);
fill(0.0,0.0,1.0 - cos(rads));
rect((-cos(rads))*200+250,450,20,20);
fill(0.0,0.0,sin(rads));
rect(50,(sin(rads)*200)+250,20,20);
fill(0.0,0.0,1.0 - abs(sin(rads)));
rect(450,(-sin(rads)*200)+250,20,20);
angle++;
if (angle==360){
angle = 0;
}
}

III. Trabajar con clases

Crear un nuevo boceto y gurdelo con el nombre Bouncers.

Crear un nuevo archivo en el mismo boceto. Para ello, aada una ficha al
boceto haga clic en el icono en forma de flecha en la parte superior de la
barra de la ficha, en la parte superior de la ventana de Processing y
seleccione New Tab.

A la nueva ficha le asigna el nombre Spot.

Ingresar el siguiente cdigo en Spot:

class Spot {
int x, y;
int rate = 1;
int initialY;
boolean fall = true;
boolean active = false;
Spot(int xpos, int ypos){
x = xpos;

y = ypos;
initialY = y;
}
void display(){
noStroke();
fill(255);
ellipse(x,y,95,95);
fill(0);
ellipse(x,y,80,80);
fill(255);
ellipse(x,y,65,65);
fill(255,0,0);
ellipse(x,y,50,50);
fill(255);
ellipse(x,y,25,25);
fill(0);
ellipse(x,y,10,10);
}
}

Ingresar el siguiente cdigo en Bouncers:

int height = 400;

int width = 500;
int spottotal = 5;
int spotcount = 0;
Spot[ ] spots;
void setup(){
size(width,height);
spots = new Spot[spottotal];
}
void draw(){
background(180);
for (int i = 0; i < spotcount; i++){

spots[i].display();
if (spots[i].active){
if (spots[i].fall){
spots[i].y = spots[i].y + spots[i].rate;
spots[i].rate++;
}else{
spots[i].y = spots[i].y - spots[i].rate;
spots[i].rate--;
}
}
if (spots[i].y > height - 45){
spots[i].fall = false;
}
if (spots[i].y < spots[i].initialY){
spots[i].rate = 1;
spots[i].fall = true;
}
}
}
void mousePressed(){
if (spotcount == spottotal){
spotcount--;
for (int i=0; i < spotcount; i++){
spots[i] = spots[i+1];
}
}
spots[spotcount] = new Spot(mouseX,mouseY);
spotcount++;
}

void mouseReleased(){
spots[spotcount-1].initialY = mouseY;
spots[spotcount-1].active = true;
}

Al ejecutar la aplicacin se muestra una ventana de color gris. Para ver

los resultados dar clic en cualquier parte de la ventana y se presentara un
circulo

que

estar

desplazando

en

forma

vertical

rebotando

constantemente. Se podr tener hasta cinco crculos de forma simultnea.