Bienvenidos de nuevo al blog. En este capítulo daremos el tercer paso en processing para lograr un nivel más avanzado. Hoy aprenderemos a crear una interacción entre el ratón y el teclado, por lo que crearemos un coche que se moverá arriba, abajo, derecha e izquierda según la tecla que pulsemos en el ordenador.
Comenzaremos creando las variables de ‘x’ y de ‘y’ con la función ‘int x=0;’ y ‘int y=0;’, con esto ya las tendremos establecidas. A continuación pondremos lo que queremos que se repita durante todo el programa, primero con la función ‘void setup(){‘ y después escribiremos ‘size(600,600);’ para establecer el tamaño que queréis de fondo, el primer número indica la distancia en ‘x’ y el segundo de la ‘y’.
Lo siguiente es crear la función ‘void draw(){‘ y dentro pondremos lo que queramos que se repita en ciclo, en este caso el coche y los controles. Primero creamos las condiciones ‘if(mousePressed==true)’ y ‘x=x+20;’, con esto habremos creado una condición en la que si apretamos el ratón se aumenta la velocidad por 20. A continuación tendremos que crear las condiciones para el movimiento con la función ‘if(key pressed){‘ y después ‘if(key==’d’)’ con ‘x=x+5;}’. Con esto habremos establecido que si apretamos la letra ‘d’ el coche se moverá por 5 hacia la derecha. Esto tendremos que repetirlo 4 veces con distintas letras y con distintas ecuaciones de ‘x’ y de ‘y’ según a donde queramos que se desplace.
Por último tendremos que crear el coche y el fondo. Primero con la función ‘background(a,b,c);’ siendo estas letras números hasta el 255 que combinaremos para crear el color que queramos. Ahora con la función fill(a,b,c);’ antes de cada función de cuadrado o círculo estableceremos su color. Y ya solo nos quedaría crear los rectángulos y círculos que formen el coche. Para ello usaremos la función ‘rect(200+x,100+y,40,20);’ para el primer rectángulo, con esto estaremos sumando la ‘x’ y la ‘y’ a la posición inicial del cuadrado, que ya explicamos en los capítulos anteriores su uso. Otra función ‘rect(180+x,120+y,80,40);’ para crear el segundo rectángulo que forme el coche. Al igual que el anterior, le estaremos sumando la ‘x’ y la ‘y’ a la posición inicial del coche. Finalmente realizaremos las ruedas con ‘ellipse(200+x,160+y,20,20);’ y ‘ellipse(240+x,160+y,20,20);’ para transmitir el movimiento de ‘x’ y de ‘y’ a las ruedas. El significado de los otros números está explicado en los previos capítulos.
Aquí os dejamos la solución por si no habéis logrado completarlo o si queréis comprobar algo. Lo más seguro es que os falte un ‘;’ o un ‘}’.
A continuación os proponemos un reto sobre el mismo tema que acabamos de tratar. En él tendréis que dibujar una nave que se mueva en una dirección u otra según la tecla pulsada. Así sería la nave.
Aquí os dejamos también la solución por si habéis tenido algún problema.
Por aquí os dejamos un video tutorial:
También os dejamos un test para que valoréis lo aprendido.
1- ¿Qué función se utiliza para crear la condición?
a)fill b)void setup
c)background d)if
2- ¿Qué hay que poner dentro de la condición para establecer que se haga algo cuando se presione el ratón?
a)mousePressed==true b)ratón
c)ellipse d)mouse
3- ¿Qué se pone para establecer que se haga algo cuando se presione la letra ‘s’?
a)key==s b)leter==s
c)key==’s’ d)size
4- ¿Qué es lo primero que habría que crear?
a)void draw b)void setup
c)el tamaño del fondo d)Las variables de x e y
5- ¿Qué último paso hay que hacer para que la pelota se mueva cuando pulsamos un botón?
a)con la función size b)crear un círculo con la posición inicial mas x e y
c)con la función fill d)igualar x e y
Solucionario: 1(d), 2(a), 3(c), 4(d), 5(b)
infoprocessing 