More Mouse Interaction | Computer Programming | Khan Academy

Summary

En este video, se muestra cómo animar una pelota que rebota en las paredes utilizando la función draw y sentencias if. Se explica cómo establecer variables iniciales para la posición y velocidad de la pelota y cómo, con el uso de if, se hace que la pelota rebote al chocar con los lados de la pantalla. A continuación, se introduce la interacción del usuario mediante las variables globales mouseX y mouseY, permitiendo controlar la posición de la pelota en el eje y. Además, se demuestra cómo utilizar la variable mouseIsPressed para crear un segundo objeto que solo aparece cuando el usuario presiona el mouse, incrementando así la interacción y dinamismo del programa.

Takeaways

• 🎾 Inicialmente, se establecen variables para la posición y velocidad de una pelota.
• 🔄 La función draw se utiliza para dibujar y volver a dibujar el fondo y la pelota en el lienzo.
• 🔁 Las sentencias if se implementan para hacer que la pelota rebote al chocar con los lados de la pantalla.
• 📺 Antes de la interacción del usuario, el programa funciona como un show de TV pasivo.
• 🖱️ Se utilizan las variables globales mouseX y mouseY para interactuar con la posición del mouse y hacer que el programa sea más interactivo.
• 📉 El valor de mouseY se usa para controlar la posición vertical de la pelota, permitiendo al usuario moverla verticalmente.
• 🎱 Se crea una segunda pelota que se mueve en la dirección opuesta (arriba y abajo) y cuya posición horizontal se controla con mouseX.
• 🔝 Se añade la capacidad de iniciar la animación de la segunda pelota al presionar el mouse, utilizando la variable mouseIsPressed.
• 🔲 La variable mouseIsPressed es un booleano que indica si el usuario está presionando el mouse, permitiendo dibujar elementos solo cuando se cumple esta condición.
• 🎨 Combinando if statements y mouseIsPressed, se pueden crear elementos interactivos como botones y programas de dibujo.

Q & A

¿Qué variables iniciales se configuran para animar una pelota que rebota en las paredes?

Se configuran variables para la posición y la velocidad de la pelota.

¿Qué función especial se utiliza para dibujar continuamente en un programa?

Se utiliza la función 'draw', que se llama repetidamente mientras se ejecuta el programa.

¿Cómo se logra que la pelota rebote en la pantalla si no se utilizan if statements?

Sin if statements, la pelota continuaría moviendo hasta que se presionara el botón de reiniciar.

¿Qué hacen los if statements que se agregan en el script para controlar el rebote de la pelota?

Los if statements verifican si la pelota está cerca del lado derecho o izquierdo de la pantalla y cambian la velocidad para hacer que la pelota rebote.

¿Qué variables globales especiales se mencionan para interactuar con el usuario?

Se mencionan las variables 'mouseX' y 'mouseY' que devuelven la posición actual del mouse del usuario.

¿Dónde se deben usar las variables 'mouseX' y 'mouseY' para interactividad?

Se deben usar dentro de la función 'draw', ya que es la única función que se llama continuamente durante la ejecución del programa.

¿Cómo se utiliza la variable 'mouseY' para controlar la posición de la pelota en el eje Y?

Se reemplaza el valor fijo de 200 píxeles por 'mouseY' para que la pelota se mueva a lo largo de la línea dependiendo de la posición Y del mouse.

¿Qué otro elemento se agrega para permitir que el usuario controle la posición de una segunda pelota?

Se agrega una segunda pelota que se mueve en la dirección opuesta (arriba y abajo) y se controla con la posición X del mouse.

¿Qué variable booleana se utiliza para detectar si el usuario está presionando el mouse?

Se utiliza la variable 'mouseIsPressed' para determinar si el usuario está presionando el mouse.

¿Cómo se implementa la capacidad de que el usuario haga aparecer la segunda pelota al presionar el mouse?

Se utiliza un if statement que verifica si 'mouseIsPressed' es verdadero para dibujar la segunda pelota solo cuando el usuario presiona el mouse.

¿Qué se puede hacer con la combinación de if statements y la variable 'mouseIsPressed'?

Con la combinación de if statements y 'mouseIsPressed', se pueden crear elementos interactivos como botones y programas de dibujo.

Outlines

00:00

🎾 Animación de una pelota rebotando con interacción del usuario

En este párrafo, se repasa cómo animar una pelota que rebota en las paredes utilizando la función draw y sentencias if. Se establecen variables iniciales para la posición y velocidad de la pelota. Dentro de la función draw, que se ejecuta continuamente, se pinta el fondo y se dibuja una elipse en el lienzo, posicionándola según la variable de posición y la velocidad. Se utilizan sentencias if para que la pelota rebote al chocar con los lados del lienzo. Se sugiere agregar interacción del usuario para que no solo observe la animación sino que pueda interactuar con ella. Se introducen las variables globales mouseX y mouseY, que proporcionan la posición actual del mouse y son útiles para aumentar la interacción. Se muestra cómo usar mouseX y mouseY dentro de la función draw para controlar la posición de la pelota y cómo hacer que una segunda pelota aparezca al presionar el mouse.

Keywords

💡Animación

La animación es el proceso de crear la ilusión de movimiento en una serie de imágenes estáticas. En el guion, se utiliza para describir cómo se hace que una pelota rebote en las paredes mediante la función 'draw' y sentencias 'if'. La animación es central para el tema del video, ya que muestra cómo se puede dar vida a objetos en una pantalla y cómo interactúan con el usuario.

💡Función draw

La función 'draw' es una función especial en programación gráfica que se ejecuta continuamente mientras se ejecuta el programa. Se utiliza para redeseñar el fondo y dibujar una elipse (la pelota) en el lienzo, posicionándola según la variable de posición y la velocidad. Es fundamental para la creación de animaciones en el video.

💡Sentencias if

Las sentencias 'if' son estructuras de control que permiten ejecutar bloques de código solo si se cumple una condición específica. En el video, se utilizan para verificar si la pelota está cerca del lado derecho o izquierdo de la pantalla y, en caso afirmativo, cambiar la velocidad para hacer que la pelota rebote.

💡Variables globales

Las variables globales son aquellas que tienen un alcance más amplio y pueden ser utilizadas en diferentes partes de un programa. En el guion, se mencionan 'mouseX' y 'mouseY', que son variables especiales que proporcionan la posición actual del ratón del usuario y son clave para hacer que el programa sea interactivo.

💡Interacción del usuario

La interacción del usuario es la capacidad de un programa para responder a las acciones del usuario, como movimientos del ratón o presiones de teclas. El video busca mejorar la experiencia del usuario permitiéndoles controlar la animación, lo que hace que el programa sea más atractivo y dinámico.

💡Programación

La programación es el proceso de escribir instrucciones para una computadora que le indican cómo realizar una tarea específica. En el contexto del video, la programación se refiere a la creación de animaciones y la adición de interacción del usuario para mejorar la experiencia visual y dinámica en una aplicación gráfica.

💡MouseX y mouseY

MouseX y mouseY son variables globales que representan las coordenadas x e y del ratón en la pantalla. En el video, se utilizan para hacer que el movimiento del ratón influya en la posición de las pelotas, permitiendo al usuario controlar la trayectoria de las pelotas en la animación.

💡MouseIsPressed

MouseIsPressed es una variable booleana que indica si el botón del ratón está siendo presionado. En el video, se usa para activar la aparición de una segunda pelota solo cuando el usuario presiona el botón del ratón, añadiendo un nivel adicional de interacción y control al programa.

💡Programas interativos

Los programas interativos son aquellos que permiten a los usuarios interactuar con ellos de alguna manera, como a través de la entrada de datos o la manipulación de objetos en la pantalla. El video muestra cómo se pueden crear programas interativos utilizando variables y eventos del ratón para mejorar la experiencia del usuario.

💡Funciones booleanas

Las funciones booleanas son aquellas que devuelven un valor verdadero o falso. En el guion, se utiliza la función 'mouseIsPressed', que es una variable booleana, para determinar si el ratón está siendo presionado o no, lo que permite activar ciertas acciones en el programa solo bajo ciertas condiciones.

Highlights

演示了如何使用draw函数和if语句制作一个球在墙上反弹的动画。

设置球的位置和速度的初始变量。

draw函数在程序运行时不断被调用，用于重新绘制背景和画布上的椭圆。

使用if语句检查球是否靠近屏幕的左侧或右侧，并相应地改变速度以实现反弹效果。

介绍了如何通过添加用户交互来增强程序的互动性。

介绍了mouseX和mouseY这两个全局变量，它们可以返回鼠标的当前位置。

建议在draw函数中使用mouseX和mouseY，因为这是程序运行时唯一不断被调用的代码。

通过将200像素的固定位置替换为mouseY，实现了用户通过鼠标上下移动来改变球移动的轨迹。

创建了第二个球，并通过mouseX控制其在垂直方向上的移动。

通过mouseIsPressed变量，用户可以通过鼠标点击来控制第二个球的出现。

mouseIsPressed变量的状态变化取决于用户的操作，而不是程序本身。

结合if语句和mouseIsPressed，可以创建按钮和绘图程序等互动性强的应用。

通过用户输入，程序的输出会随着时间的推移而变化。

展示了如何通过用户交互来控制动画，增加了程序的趣味性和互动性。

通过编程技巧，用户可以更深入地参与到程序中，而不仅仅是观看。

强调了用户交互在现代编程中的重要性，以及如何实现它。

Transcripts

In our last talk-through, we showed how you can animate a ball bouncing off the walls using the draw function and if statements.

Let's review.

First, we set up some initial variables for position and speed of a ball.

Then, in the draw function, which is that special function that gets called over and over when your program is running,

we repaint the background and draw an ellipse on the canvas

and we position that ellipse based on the position variable and the speed and how they affect each other.

Now, without if statements, our ball just kept on going forever and ever,

or until we pressed restart.

So we added two if statements down here

to check and see if the ball was near the right side of the screen or the left side of the screen,

and if so, we change the speed to be positive or negative so that the ball basically would bounce back.

So now we just have this ball, bouncing back and forth forever.

So that was pretty cool, and there's a lot of really cool animations that we can make with that.

But now, I want to add user interaction to this program.

See, right now this program's like a TV show.

if you gave it to a friend, and your friend didn't know how to program, they couldn't really interact with it.

All they could do is watch it, which is cool,

but it's a lot more cool if they could actually do something.

So, let's give the user some ways to control it.

Remember earlier we learned about two special global variables called mouseX and mouseY.

Those variables return numbers that tell us about the current position of the user's mouse

and they're a great way to make a program more interactive.

So, let's see. How can we use them?

Well, we should use them inside the draw function somewhere.

Because that's the only code that's called over and over as the program runs.

Everything outside of draw is only called once, when the program first starts.

So, it doesn't make sense to use mouseX and mouseY there.

The user hasn't had a chance to interact with it.

In draw, we're drawing the ball 200 pixels down the screen right now.

How about we just replace that with mouseY?

Because that is the y position, right?

So this way it will just add the y position dependent on where the user's y is. Right?

So check this out. By just moving my cursor up and down, I can change the line that the ball moves along.

That's pretty cool. But I want to use mouseX, too.

So, how should I use that?

Well, why don't we just make another ball

and have that ball going in the opposite direction: up and down.

And there we'll just have the user control the x position of that.

So we kind of just do the reverse.

We'll say ellipse mouseX position 50 50. Alright?

Check this out! Now, I've got these two balls that I control, and going in perpendicular directions.

But, I'm still not happy.

I want to give the user even more control.

I want to give the user the power to start up the second ball.

To actually bring it into existence, just by pressing their mouse.

Well, then I need to figure out how to tell that the user is pressing their mouse.

Thankfully, we have a super special boolean variable for just that.

It's called mouseIsPressed and we can use it inside an if statement.

So, let's see. This is our second ball.

So we can say if mouseIsPressed, and then we'll move the ellipse colon to there.

So, what this is doing here, is telling the program that we only want to draw this ellipse if this is true

and mouseIsPressed will only be true if the user is pressing their mouse.

So, let's try it.

Ta da!

So now I can make the ball appear whenever I press.

So it's zooming in from this parallel universe. In! In! In!

It's awesome!

So, the interesting thing about this variable mouseIsPressed

is that it changes based on what the user does, not based on what our program does.

and since the draw function gets called repeatedly over and over,

the output of our program will change over time

just with a little bit of user input.

With the combined power of if statements and mouseIsPressed,

you have everything you need to make awesome things like buttons, and drawing programs.

Woo hoo!