PROGRAMACIÓN: CONCEPTOS || MASTER EN ARTES DIGITALES

Sessión 4;

1. Condicionales
2. Un apunte: números aleatorios
3. Otros ejemplos de condicionales
4. PRACTICA

1.- Más con condicionales

Partiendo desde los ejemplos del día anterior, y la práctica 3, es fácil añadir el rebote para el eje Y y crear otro ejemplo típico de programación: the bouncing ball.

(el código está junto con el applet, como siempre).

Y finalmente, también podemos utilizar los condicionales para hacer crecer y decrecer la pelota, ya sea para que parezca que respire, o para simular un eje Z.

Aunque por norma general no hay que abusar de ellos, los números aleatorios pueden ser muy útiles para dar un poco de "vida" a nuestros sketches. Por ejemplo, en el ejemplo de la pelota reboteadora (bouncing ball), siempre tenemos la misma velocidad X e Y, y esto produce al final que los movimientos sean siempre los mismos.

Una manera de cambiar esto es darles a estos valores velX y velY un valor aleatorio.

En Processing, para crear números aleatorios utilizamos la función random(). A random() le podemos enviar un o dos parámetros. Si le enviamos uno:

nos devolverá un número FLOAT entre 0 y 5. Si le enviamos 2 nos devolverá un número FLOAT entre el primero y el segundo:

¿Que significa "devuelve"? Lo veremos cuando toquemos funciones. Por ahora, hay que tener en cuenta que un random() lo asignaremos a un valor float así:

Es muy importante tener en cuenta que random(), en Processing, devuelve siempre floats. Así pues, debemos o bién utiliszarlo siempre con variables del tipo float(la solución fácil i recomendada), o sinó deberemos convertir el valor que nos dé random() a un int (la solución pelín más compleja que por ahora no vale la pena). En todo caso esto se haría con la función de conversión int().

He aquí un ejemplo de nuestra pelota reboteadora donde gracias a random(), en cada ejecución la pelota coge velocidades distintas, y por lo tanto el resultado es siempre diferente (provad de recargar la página para reiniciar el applet [ctrl+r]). :

Iremos directamente a los ejemplos. Sólo recordar que los condicionales evaluan una condición (lo que va entre paréntesis) y ejecutan el código que escribimos entre las claves según si ésta se cumple o no.

Primero, un ejemplo simple de como utilizar un condicional junto con un random(). En cada iteración del proceso creamos un número aleatorio entre -1 y 1. Según sea mayor o menor a cero, vamos a hacer que este viento afecte a la dirección de la bola:

  //actualitzamos la posición según sople el viento:
  if(viento > 0){
    pos = pos+vel;
  } 
  else { //oséase si el viento es menor o igual a 0:
    pos = pos-vel;
  }

En este otro ejemplo, el color de stroke y fill del cuadro cambia, vía condicionales, según la posición del mouse. Utilizamos el if, else (Está copiado aquí el código al que me refiero. Para ver el código completo podéis ir a Ver Applet, donde hay el código fuente de mismo):

 //primero ligamos el FILL al eje horizontal del mouse
	    if(mouseX < width/2){ //si el mouse está hacia la izquierda
	      fill(255,0,0); //preparamos un fill rojo
	    } 
	    else { //si está hacia la derecha
	      fill(0,255,0); //preparamos un fill verde
	   }
 //y segundo, hacemos que el STROKE dependa de eje vertical del mouse
	    if(mouseY < height/2){ //si el mouse está hacia la izquierda
	      stroke(255,255,0); //preparamos un stroke amarillo
	    } 
	    else { //si está hacia la derecha
	      stroke(0,0,255); //preparamos un stroke azul
	    }    
      

En este segundo ejemplo, utilizamos también la posición del mouse para determinar dónde dibujamos el cuadrado. Para hacerlo, utilizamos la estructura else if, además del y lógico:

  //sólo dibujamos el quadro donde esté el mouse:
  if((mouseX<width/2)&&(mouseY<height/2)){
    //dibuja el quadro arriba a la izquierda:
    rect(0,0,width/2,height/2);
  } 
  else if((mouseX>width/2)&&(mouseY<height/2)){
    //dibuja el quadro arriba a la derecha:
    rect(width/2,0,width/2,height/2);
  } 
  else if((mouseX<width/2)&&(mouseY>height/2)){
    //dibuja el quadro abajo a la izquierda:
    rect(0,height/2,width/2,height/2);
  }
  else if((mouseX>width/2)&&(mouseY>height/2)){
    //dibuja el quadro abajo a la derecha:
    rect(width/2,height/2,width/2,height/2);
  }

En el ejemplo que sigue, un if, else nos sirve para dibujar el globo, que estará o no creciendo, o bién un recuadro rojo si el globo ha explotado.

También en éste ejemplo vemos una nueva variable de sistema: mousePressed, que, como su nombre indica, nos dice si el mouse está siendo clicado o no. Pertenece al tipo de datos booleano.

if(sz/2 > (width/2)-tamanoPincho){
      //como ha tocado el pincho, dibujamos un recuadro rojo:
      fill(255,0,0);
      rect(0,0,width,height);
    } 
    else { //como no lo toca, lo dibujamos
      //dibujamos el globo:
      //sin stroke:
      noStroke();
      ellipse(width/2,height/2,sz,sz);
      println(sz);
    }

Y uno más: volvemos a nuestra queridísima bola reboteadora, pero ésta con obstáculo. Un simple if nos permite saber si la bola toca o no el obstáculo. Esto sí, con la inestimable ayuda de abs(), que convierte el qualquier valor en su valor absoluto (es decir, siempre positivo, como decía Louis).

   //COMPROBAMOS OBSTÁCULO:
   if(abs(posX-obstacleX) < sz/2){
     velX = -velX;
   }

Práctica libre: Investiga los ejemplos y experimenta con ellos.

Si la creatividad no acompaña, propongo:

a) Coger el último ejemplo y hacer algunos pasos (o todos) hacia lo que sería el clásico juego del Pong

(para pistas: el applet que evita que la bola se enganche al obstáculo, el applet prepong simple y el applet prepong mejorado)

b) Combinar la pelota reboteadora y los obstáculos que la hagan explotar al estilo del penúltimo ejemplo

----------------------------------------------------------------------------------------------------

-- Estos apuntes son el complemento de una clase al Máster de Artes Digitales de la UPF. No estan pues diseñados para consituir necesariamente un tutorial completo y coherente por si mismos --

© 2006-2010. Joan Soler-Adillon. Todos los derechos reservados.

-- La licencia CC que había en el tutorial queda anulada a efectos inmediatos en mayo de 2010. Los malos usos de ésta han llevado al autor a esta decisión --

-- Si utilizáis el tutorial para fines docentes, se os agradecerá que lo comuniquéis al autor, para poder listar aquí vuestra clase/asignatura --

-- Podéis contactar con el autor (joan [punto] soler [a] upf [punto] edu) para pedir permiso de cara a la utilización o reproducción parcial del tutorial. Nunca se os pedirá nada material a cambio, sino alguna pequeña contribución al mismo: Nuevos ejemplos, propuestas de mejora en alguna parte, o incluso mejor: Nuevas sesiones que cubran temas que el tutorial no explica: Vídeo, sonido, clases, etc.--