Banner interactivo
Antes de nada explicaré las opciones de uso, para que los que vengan a ver el applet funcionando puedan ir al grano y no se aburran con las explicaciones:
Mueve el ratón sobre el banner para que se vayan dibujando círculos. Si dejas parado el ratón, la figura crecerá, si lo mueves menguará. Pulsa R,G, B para que vaya cambiando o para fijar los respectivos colores básicos. Pulsa S para mostrar/ocultar el borde de la figura Pulsa Z para poner a cero los valores de R, G, y B Pulsa A para cambiar el nivel de transparencia Pulsa F para cambiar entre circulo/cuadrado. Si dejas el ratón fuera del banner más de 10 segundos se volverá a mostrar la imagen inicial del banner. |
Por supuesto: hecho usando Processing |
Con este ejemplo aprenderemos a hacer un banner curioso. No sé si os pasa también a vosotros, pero a mi si, existen programillas que me hipnotizan, que puedo tirarme horas moviendo el ratón para ver lo que surge.
00 // by Daniel Sancho <http://www.teclas.org> 01 // Created 12 Diciembre 2005 02 // Starting point: Patterns example by REAS <http://reas.com> 03 // 04 int tam=10;
05 int alto=125;
06 int ancho=600;
07 int r=0, g= 0, b= 0, alfa=128;
08 boolean borde=true, cambiaR=false, cambiaG=false, cambiaB=false;
09 boolean circulo=true;
10 int tiempo;
11 PImage banner;
12 void setup()
13 {
14 size(ancho, alto);
15 background(#ffffff);
16 ellipseMode(CENTER);
17 banner=loadImage("banner2.jpg");
18 image(banner,0,0);
19 }
20 void draw()
21 {
22 if (borde)
23 stroke (color(255-r,255-g,255-b));
24 else noStroke();
25 if (cambiaR) {r=(++r)%256; fill(#FF0000);rect(2, 2, 8, 8);}
26 else {fill(color (0,0,0));rect(2, 2, 8, 8);}
27 if (cambiaG) {g=(++g)%256; fill(#00FF00);rect(12, 2, 8, 8);}
28 else {fill(color (0,0,0));rect(12, 2, 8, 8);}
29 if (cambiaB) {b=(++b)%256; fill(#0000FF);rect(22, 2, 8, 8);}
30 else {fill(#000000);rect(22, 2, 8, 8);}
31 fill(color(r,g,b,alfa));//cuarto parámetro alpha , transparencia
32 if ((mouseX>0 && mouseX<ancho)&&(mouseY>0 &&mouseY<alto)) {
33 figura(mouseX, mouseY, pmouseX, pmouseY);
34 tiempo=millis();
35 }
36 else {
37 if (millis()-tiempo>10000)
38 image(banner,0,0);
39 }
40 }
41 void figura(int x, int y, int px, int py)
42 {
43 if (x==px && y==py)
44 tam++;
45 else tam=(tam>10?tam-4:10);
46 if (circulo)
47 ellipse(x,y, tam, tam);
48 else rect(x,y, tam, tam);
49 }
50 void keyPressed(){ //esta función es llamada cada vez que se pulsa una tecla
51 switch (key) {
52 case 'R':
53 case 'r':cambiaR=!cambiaR;break;
54 case 'G':
55 case 'g':cambiaG=!cambiaG;break;
56 case 'B':
57 case 'b':cambiaB=!cambiaB;break;
58 case 's':
59 case 'S':borde= !borde;break;
60 case 'Z':
61 case 'z':r=0;g=0;b=0;break;
62 case 'A':
63 case 'a':alfa= (alfa+32)%256;break;
64 case 'F':
65 case 'f':circulo=!circulo;break;
66 }
67 }
|
líneas 04 a 11: declaro las variables que voy a utilizar: tam será el tamaño de la figura que se va a dibujar, alto y ancho son las dimensiones del applet. En sistemas de color verdadero, los colores se suelen representar como combinación de los colores básicos rojo (red) verde (green) y azul (blue), en las variables r,g y b guardaré los valores que forman el color que se va a utilizar en un momento determinado. Para indicar el grado de transparencia usamos la variable alfa.
En la línea 08 y 09 declaro variables lógicas, que pueden tomar valores verdadero o falso (true o false) y las utilizo para saber si se debe mostrar el borde de la figura, si pueden cambiar los valores R, G y B y si la figura es un circulo (circulo=true) o si es un cuadrado (circulo=false).
En la línea 10 declaro la varible para controlar si el cursor del ratón lleva 10 segundos fuera del applet.
En la línea 11 una variable para almacenar la imagen del banner.
En la línea 12 empieza la función setup() que se encarga de inicializar el applet. Indicamos el tamaño de la ventana, el color de fondo, indicamos que la coordenada que le daremos a ellipse será en centro en vez de la esquina superior izquierda (fijaros como cuando dibuja cuadrados, la posición del ratón coincide con la esquina en vez de con el centro), cargamos la imagen y la mostramos en pantalla.
La función draw, que comienza en la línea 20, se ejecutará en un bucle:
En las condiciones compruebo el valor de las distintas opciones, por ejemplo if (borde) comprueba si la variable borde tiene valor verdadero, equivale a escribir if (borde== true). Si es verdadero mostrará el borde (stroke), sino no mostrará el borde (noStroke).
Si puede cambiar el color (R, G o B) sumo uno a la variable correspondiente y luego hallo el resto de la división entre 256 (esto se hace para que los valores estén entre 0 y 255). Para que el usuario sepa que se pueden cambiar los colores, dibujo un pequeño cuadrado en la esquina superior izquierda del color correspondiente, si no se modifica el color, se dibuja de color negro.
La función Stroke sirve para indicar el color del borde. Fill sirve para indicar el color de relleno de la figura y, opcionalmente, podemos añadir un cuarto parámetro para indicar el grado de transparencia.
Línea 32: si el ratón está dentro del área del applet dibujo la figura llamando a la función figura y guardo el tiempo (millis() nos da el tiempo en milisegundos que lleva funcionando el applet) para comprobar en caso que que el ratón esté fuera del applet si lleva más de 10 segundos, en cuyo caso vuelvo a mostrar la imagen del principio. Vamos, si nos entretenemos podemos jugar con el banner, si no, muestra la imagen.
mouseX y mouseY son variables que nos dan la posición actual del ratón. pmouseX y pmouseY nos dan la posición previa del ratón (me servirá para saber si se mueve o no).
La función figura es una función propia, podemos definir todas las que nos haga falta. Void indica que no nos devolverá un valor, hará lo que tenga que hacer sin devolver un valor. Si el punto actual del ratón es igual al de la posición anterior, incremento en uno el tamaño, que controlo con la variable tam. Sino, lo decrementaré en 4 puntos, pero sólo si el tamaño es mayor que diez, eso es para no quedarnos sin figura. A continuación dibujamos un círculo o cuadrado según el valor de la variable circulo.
En la línea 50 escribimos la función keyPressed(), la necesitamos para controlar el teclado. Se ejecutará cada vez que pulsemos una tecla. La variable key contendrá el valor de la tecla pulsada.
Switch nos permite decidir que tiene que hacer según el valor de la tecla pulsada.
cambia= !cambia: almacena el valor contrario al que tiene, si tiene true, almacena false y viceversa.
Bueno, hemos aprendido a dibujar círculos, cuadrados, a dibujar con o sin borde, con o sin transparencia, a controlar el teclado.
Y aquí una captura de pantalla de muestra:
 |