1
00:00:00,567 --> 00:00:02,361
En nuestra última guía paso a paso,

2
00:00:02,361 --> 00:00:07,341
mostramos cómo animar una bola que rebota en los bordes de la pantalla usando la función "draw" y la sentencia "if"

3
00:00:07,341 --> 00:00:08,637
Vamos a revisar.

4
00:00:08,637 --> 00:00:12,407
En primer lugar, hemos creado algunas variables iniciales para la posición y la velocidad de una bola.

5
00:00:12,407 --> 00:00:17,240
Después en la función "draw", que es esa función especial que se llama una y otra vez mientras el programa está corriendo,

6
00:00:17,240 --> 00:00:20,907
repintamos el fondo y dibujamos una elipse en la pantalla

7
00:00:20,907 --> 00:00:27,779
y posicionamos esa elipse con base en la variable de posición y de velocidad y cómo se afectan mutuamente.

8
00:00:27,779 --> 00:00:31,195
Ahora, sin la sentencia "if", nuestra bola sólo siguió adelante por siempre,

9
00:00:31,195 --> 00:00:32,862
o hasta que presionamos reiniciar.

10
00:00:32,862 --> 00:00:36,021
Así que incluimos dos sentencias "if" aquí abajo

11
00:00:36,021 --> 00:00:40,605
para revisar y ver si la bola estaba cerca del borde derecho o del borde izquierdo de la pantalla,

12
00:00:40,606 --> 00:00:45,679
y en caso de que así fuera, cambiamos la variable "speed" para que fuera positiva o negativa de modo que la bola básicamente rebotara de un lado a otro.

13
00:00:45,679 --> 00:00:49,841
Entonces ahora tenemos esta bola, rebotando de un lado a otro para siempre.

14
00:00:49,841 --> 00:00:53,671
Eso está muy bien, y hay muchas animaciones realmente interesantes que podemos hacer con esto.

15
00:00:53,671 --> 00:00:57,675
Pero ahora, quiero añadir la interacción del usuario a este programa.

16
00:00:57,675 --> 00:01:00,071
Verán, en este momento este programa es como un show de televisión.

17
00:01:00,071 --> 00:01:04,945
si se lo das a un amigo, y tu amigo no sabe como programar, no podría interactuar con él.

18
00:01:04,945 --> 00:01:07,606
Todo lo que podría hacer es mirar, lo cual es genial,

19
00:01:07,606 --> 00:01:10,340
pero sería mejor si pudiera hacer algo más.

20
00:01:10,340 --> 00:01:13,470
Así que vamos a darle al usuario algunas formas de controlar el programa.

21
00:01:13,470 --> 00:01:20,156
Recuerda que antes aprendimos sobre dos variables globales especiales llamadas "mouseX" y "mouseY".

22
00:01:20,156 --> 00:01:25,972
Esas variables nos regresan números que nos dicen la posición actual del ratón del usuario

23
00:01:25,972 --> 00:01:28,779
y son una manera genial de hacer que el programa sea más interactivo.

24
00:01:28,779 --> 00:01:31,239
Así que veamos. ¿Cómo las podemos usar?

25
00:01:31,239 --> 00:01:34,029
Bueno, deberíamos usarlas en algún lugar dentro de la función "draw".

26
00:01:34,029 --> 00:01:39,503
Porque es el único código que se ejecuta una y otra vez mientras el programa corre.

27
00:01:39,503 --> 00:01:44,551
Todo lo que está fuera de la función "draw" es llamado sólo una vez, cuando el programa inicia.

28
00:01:44,551 --> 00:01:48,136
Así que no tiene sentido usar "mouseX" y "mouseY" ahí fuera.

29
00:01:48,136 --> 00:01:51,093
El usuario no tendría oportunidad de interactuar con él.

30
00:01:51,093 --> 00:01:57,280
En la función "draw", en este momento estamos dibujando la bola 200 pixeles abajo en la pantalla.

31
00:01:57,280 --> 00:02:00,842
¿Qué pasa si reemplazamos eso con "mouseY"?

32
00:02:00,842 --> 00:02:02,739
Porque esa es la posición de "y", ¿cierto?

33
00:02:02,739 --> 00:02:08,530
De esta manera añadirá la posición de "y" dependiendo de la posición de "y" del usuario. ¿correcto?

34
00:02:08,530 --> 00:02:14,362
Revisemos esto. Moviendo mi cursor arriba y abajo, puedo cambiar la línea en la que la bola se mueve.

35
00:02:14,362 --> 00:02:18,196
Eso es genial. Pero también quiero usar "mouseX".

36
00:02:18,196 --> 00:02:19,863
Entonces, ¿cómo puedo usarla?

37
00:02:19,863 --> 00:02:22,445
Bueno, por qué no hacemos otra bola

38
00:02:22,445 --> 00:02:25,945
y hacemos que esta bola vaya en la dirección opuesta: arriba y abajo.

39
00:02:25,945 --> 00:02:30,510
Y ahí tendríamos al usuario controlando la posición "x" de esta bola.

40
00:02:30,510 --> 00:02:32,612
Así que haríamos lo contrario.

41
00:02:32,612 --> 00:02:40,637
Digamos "ellipse (mouseX, position, 50, 50)" ¿correcto?

42
00:02:40,637 --> 00:02:46,906
¡Verifiquemos esto! Ahora tengo estas dos bolas que yo controlo y que van en direcciones perpendiculares.

43
00:02:46,906 --> 00:02:50,075
Pero todavía no estoy contenta.

44
00:02:50,075 --> 00:02:53,445
Quiero darle al usuario más control.

45
00:02:53,445 --> 00:02:56,944
Quiero darle al usuario el poder de poner en marcha la segunda bola.

46
00:02:56,944 --> 00:03:01,407
Para que realmente haga que exista, sólo con presionar el ratón.

47
00:03:01,407 --> 00:03:07,340
Bueno, entonces tengo que encontrar la manera de decirle al programa que el usuario está presionando su ratón.

48
00:03:07,340 --> 00:03:12,945
Afortunadamente, tenemos una variable booleana súper especial para esto.

49
00:03:12,945 --> 00:03:19,362
Se llama "mouseIsPressed" y podemos usarla dentro de una sentencia "if".

50
00:03:19,362 --> 00:03:22,339
Veamos, ésta es nuestra segunda bola.

51
00:03:22,339 --> 00:03:31,945
Así que podemos escribir que si "mouseIsPressed", y luego moveremos la instrucción de elipse para acá.

52
00:03:31,945 --> 00:03:40,863
Entonces lo que estamos haciendo aquí, es decirle al programa que sólo queremos dibujar esta elipse si esto es verdad

53
00:03:40,863 --> 00:03:46,030
y "mouseIsPressed" será verdadera si el usuario está presionando su ratón.

54
00:03:46,030 --> 00:03:48,195
Tratemos.

55
00:03:48,195 --> 00:03:49,788
¡Tan tan!

56
00:03:49,788 --> 00:03:52,702
Ahora puedo hacer que la bola aparezca cuando presiono el ratón.

57
00:03:52,702 --> 00:03:57,877
Esto es un acercamiento de este universo paralelo. ¡Aparece! ¡Aparece! ¡Aparece!

58
00:03:57,877 --> 00:04:00,029
¡Es impresionante!

59
00:04:00,029 --> 00:04:04,740
Así que lo interesante de esta variable "mouseIsPressed"

60
00:04:04,740 --> 00:04:09,055
es que cambia con base en lo que el usuario hace, y no en lo que programa hace.

61
00:04:09,055 --> 00:04:13,195
Y como la función "draw" se llama repetidamente, una y otra vez,

62
00:04:13,195 --> 00:04:16,171
el resultado del programa cambiará con el tiempo

63
00:04:16,171 --> 00:04:18,740
sólo con una pequeña entrada del usuario.

64
00:04:18,740 --> 00:04:22,029
Con el poder combinado de la sentencia "if" y la variable "mouseIsPressed",

65
00:04:22,029 --> 00:04:26,241
tienes todo lo que necesitas para hacer cosas impresionantes como botones y programas de dibujo.

66
00:04:26,241 --> 00:04:28,360
¡Yuju!