martes, 10 de mayo de 2016

INTRODUCCIÓN A PROCESSING

Normalmente un programa en processing tiene esta estructura:
 void setup(){ 

 }
 void draw(){ 

 } 


Todas las instrucciones que escribas entre las llaves del setup se ejecutarán al principio del programa y las que estén entre las llaves del draw se ejecutarán una vez y otra vez. 

 Cada instrucción tendrá un punto y coma al final. Por ejemplo, la instrucción 

ellipse (100,100,10,10); 

dibuja una elipse en las coordenadas 100,100 con ejes 10,10. Como los ejes horizontal y vertical son iguales, dibujará un círculo. La coordenada y va de arriba a abajo, al revés que en matemáticas.

 La instrucción

 size(400,400);

 hará que la pantalla gráfica tenga un tamaño de 400x400 pixels. El siguiente programa

 void setup(){ 

   size(400,400);

 }
 void draw(){

 ellipse (100,100,10,10); 
}

Creará una pantalla gráfica de 400x400 y dibujará un círculo de 10x10 en las coordenadas 100x100. En realidad no dibuja un solo círculo, sino que lo dibuja una vez y otra vez. Cada vez que se ejecuta el draw se llama frame.

Si dibujo el círculo en coordenada x en lugar de 10, puedo modificar x y hacer que se mueva.  Primero tengo que crear la variable x. Si es un número entero la creo con la instrucción int x; al principio, fuera del draw y del setup

El siguiente programa hace que la bola se mueva: 

int x;
void setup(){ 

   size(400,400);

 }
 void draw(){

 ellipse (x,100,10,10); 
x=x+1;
}

Como ves, la bola no se mueve, sino que se dibujan muchas. Si quiero dar la sensación de movimiento, necesito que borre la pantalla. Utilizo background(0);
eso hace que la pantalla se ponga negra, porque he puesto un cero. Si pongo un 255 sería blanca. Si pongo un número intermedio sería gris. Más oscuro cuanto más bajo.

Si quiero meter una condición (si pasa esto has esto) las instrucciones son 

if (condición){

   instrucciones
}

por ejemplo, 

if (x<1 1="" font="">

velx = -5;

}

Cuando x es menor que 1, la variable velx valdrá -5.



Con esas instrucciones intenta hacer una bola que rebote por la pantalla.

Proyecto ping pong

La idea es hacer una raqueta en forma de rectángulo que muevas con el teclado y una bola que rebote en ella y en las paredes. En primer lugar te digo las instrucciones nuevas que vas a necesitar:

rect(x,y,ancho,alto); dibuja un rectángulo. El punto superior derecho es x,y. Ancho y alto son los otros dos parámetros. Obviamente son el ancho y alto del rectángulo.

En un if, cuando se deben cumplir dos condiciones, se usa &&, Así:

if ((x>1)&&(y>2){
<1 amp="" p="" y="">  x = x + 1;
}

Fíjate bien en cómo van los paréntesis.

Para hacer que la bola rebote en la raqueta, la x debe ser la de la raqueta y la distancia al centro de la raqueta en y, menor que la mitad de su longitud.

Para controlar la raqueta con el teclado, aquí tienes un ejemplo de programa:


void draw() {

if (keyPressed) {
  if (key == 'b' || key == 'B') { 
   x=x+1;
  } 
}


Las variables keyPressed y key son variables de sistema, eso quiere decir que las crea processing por sí mismo. KeyPressed es verdadero cuando se pulsa una tecla y entonces key vale la tecla pulsada. Aquí x aumenta cuando se pulsa b (mayúscula o minúscula)

Haz un programa que controle una raqueta con el teclado y una bola que rebote en las paredes y en la raqueta