If Statements | Computer Programming | Khan Academy

Summary

En este video, se explica cómo hacer que una pelota se mueva y rebote en la pantalla usando un bucle de dibujo y una variable 'x' para la posición. Se introduce la variable 'speed' para controlar la velocidad y se usa un 'if' statement para cambiar la dirección de la pelota cuando toca los bordes de la pantalla. Además, se ajusta la lógica para que la pelota pare antes de salirse completamente del borde, proporcionando un efecto de rebote más realista.

Takeaways

• 🎾 El vídeo enseña cómo hacer una animación de una pelota que se mueve por la pantalla.
• 🔁 Se utiliza una variable 'x' para determinar la posición de la pelota y una variable 'speed' para el movimiento.
• 🔁 Se utiliza un bucle de dibujo para actualizar la posición de la pelota y redibujar el fondo.
• 🔄 Se puede cambiar la velocidad de la pelota y hacer que se mueva hacia atrás o detenga.
• 🚫 Si la pelota se aleja de la pantalla, se puede utilizar un botón de reinicio para traerla de vuelta.
• 🔁 Se introduce el concepto de 'if' para cambiar la dirección de la pelota cuando alcanza los bordes de la pantalla.
• 📐 Se explica cómo usar una condición en un 'if' para cambiar la velocidad solo cuando la pelota toca los bordes.
• 🔄 Se muestra cómo hacer que la pelota rebote al tocar los bordes de la pantalla.
• 🎯 Se ajusta la condición del 'if' para que la pelota pare antes de salir completamente del borde de la pantalla.
• 🎉 El resultado final es una pelota que se mueve y rebota por la pantalla sin salir de ella.

Q & A

¿Qué variable se utiliza para determinar la posición de la pelota en la pantalla?

La variable 'x' se utiliza para determinar la posición de la pelota en la pantalla.

¿Cuál es el propósito de la variable 'speed' en el guion?

La variable 'speed' indica cuánto se mueve la pelota cada vez que se actualiza la pantalla.

¿Qué sucede cada vez que se ejecuta el bucle de dibujo en el guion?

Cada vez que se ejecuta el bucle de dibujo, se borra el fondo, se establecen los colores de relleno y se dibuja la elipse en la posición 'x', y se actualiza la variable 'x' sumando el valor de 'speed'.

¿Cómo se puede hacer que la pelota se mueva más despacio?

Para hacer que la pelota se mueva más despacio, se puede reducir el valor de la variable 'speed'.

¿Qué hace asignar un valor negativo a la variable 'speed'?

Asignar un valor negativo a la variable 'speed' hace que la pelota se mueva hacia atrás en la pantalla.

¿Qué instrucción se utiliza para cambiar la dirección de la pelota cuando llega al borde derecho de la pantalla?

Se utiliza una instrucción 'if' para cambiar la velocidad a negativa si la pelota alcanza el borde derecho de la pantalla.

¿Cómo se determina si la pelota ha llegado al borde derecho de la pantalla?

Se determina si la pelota ha llegado al borde derecho de la pantalla cuando la variable 'x' es mayor que 400, ya que el borde derecho se encuentra en la posición 'x' 400.

¿Qué cambios se realizan en el código para hacer que la pelota rebote al llegar al borde izquierdo de la pantalla?

Para hacer que la pelota rebote al llegar al borde izquierdo, se utiliza otra instrucción 'if' que cambia la 'speed' a un valor positivo si 'x' es menor que 0.

¿Por qué puede ser necesario ajustar la condición de rebote de la pelota?

Es necesario ajustar la condición de rebote porque, al llegar al borde de la pantalla, la mitad de la elipse puede haberse ido ya, lo que hace que la pelota se mueva más allá del borde antes de rebotar.

¿Cómo se soluciona el problema de la pelota rebotiendo demasiado lejos de los bordes de la pantalla?

Para solucionar el problema de la pelota rebotiendo demasiado lejos, se ajustan las condiciones de rebote a 'x' mayor que 375 para el borde derecho y 'x' menor que 25 para el borde izquierdo, dejando un margen antes de que la pelota toque el borde completo.

Outlines

00:00

🎾 Movimiento de una pelota en una animación

El vídeo explica cómo se logra el movimiento de una pelota a través de la pantalla utilizando una variable 'x' para la posición y una variable 'speed' para la distancia que se mueve en cada iteración. Se utiliza un bucle de dibujo para actualizar la posición de la pelota, cambiando el valor de 'x' en cada iteración. Se discute cómo cambiar la velocidad (hacerla más lenta, hacia atrás o detenerla) y se plantea el problema de que la pelota sale de la pantalla. Se propone una solución para que la pelota rebote al tocar los bordes de la pantalla utilizando sentencias 'if' que cambian la dirección de la velocidad cuando la pelota alcanza los bordes derecho o izquierdo. Además, se ajusta el punto de detección para que la pelota rebote antes de salir completamente de la pantalla, considerando la mitad del ancho de la pelota.

Keywords

💡animación

La animación es el arte de crear la ilusión de movimiento en una serie de imágenes estáticas, como dibujos o fotografías, que se presentan en secuencia rápida. En el vídeo, la animación se refiere al movimiento de una pelota a través de la pantalla, lo que captura la atención del espectador y sirve para ilustrar conceptos más complejos de programación. Por ejemplo, la pelota es un objeto animado que se mueve horizontalmente a lo largo de la pantalla.

💡variable

Una variable en programación es un contenedor que almacena información o valores que pueden cambiar durante la ejecución de un programa. En el vídeo, las variables 'x' y 'speed' son fundamentales para el movimiento de la pelota. 'X' representa la posición actual de la pelota en la pantalla, mientras que 'speed' determina cuánto se desplaza la pelota en cada ciclo del bucle de dibujo.

💡bucle de dibujo

Un bucle de dibujo, o draw loop, es una estructura de programación que se repite constantemente para actualizar la representación visual de un objeto en la pantalla. En el vídeo, el bucle de dibujo se utiliza para redesenar el fondo, establecer colores y dibujar la elipse (la pelota) en la posición 'x', simbolizando el concepto de actualización continua de la animación.

💡velocidad

La velocidad en el contexto del vídeo se refiere a la distancia que recorre la pelota en cada iteración del bucle de dibujo. Es un valor que se puede ajustar para controlar el ritmo del movimiento de la pelota. Por ejemplo, si se hace la velocidad más pequeña, la pelota se mueve más despacio; si se establece en negativo, la pelota se mueve hacia atrás.

💡condición

Una condición en programación es una declaración que se evalúa como verdadera o falsa, y que se utiliza para controlar el flujo de un programa. En el vídeo, la condición es que la pelota alcanza el borde derecho de la pantalla, lo que desencadena una acción específica: cambiar la velocidad para que la pelota se mueva en la dirección opuesta.

💡sentencia if

La sentencia 'if' es una estructura de control que permite ejecutar un bloque de código solo si la condición especificada es verdadera. En el vídeo, se utiliza una sentencia 'if' para verificar si la pelota ha llegado al borde derecho de la pantalla, y si es así, se invierte la velocidad para que la pelota rebote.

💡reinicio

El reinicio, en el contexto del vídeo, se refiere a la acción de volver a comenzar el movimiento de la pelota desde el punto de inicio después de que haya salido de la pantalla. El presentador menciona el reinicio como una solución inicial antes de implementar la lógica de rebote, destacando cómo la programación es un proceso iterativo de mejora.

💡bordes de la pantalla

Los bordes de la pantalla en el vídeo son referenciados para determinar cuándo la pelota ha llegado al extremo de su trayectoria y necesita cambiar de dirección. El script utiliza estas referencias para establecer las condiciones en las sentencias 'if' que controlan el rebote de la pelota.

💡rebote

El rebote en el vídeo es un efecto visual que se produce cuando la pelota toca los bordes de la pantalla y cambia de dirección. Este concepto es crucial para la interacción dinámica del usuario con la animación, y se logra mediante la modificación de la variable 'speed' en respuesta a condiciones específicas.

💡parámetros

Los parámetros en programación son valores que se pasan a una función para personalizar su comportamiento. En el vídeo, los parámetros que controlan la posición del centro de la elipse (la pelota) son ajustados para mejorar la precisión del rebote, evitando que la pelota se salga demasiado del borde de la pantalla antes de cambiar de dirección.

Highlights

动画展示了一个球在屏幕上移动。

使用变量 'x' 表示球的位置。

使用变量 'speed' 表示球每次移动的距离。

通过绘制循环来不断重绘背景并绘制球。

每次循环都会更新 'x' 变量来改变球的位置。

通过调整 'speed' 变量可以控制球的速度。

可以将 'speed' 设置为负值使球反向移动。

将 'speed' 设置为零可以使球停止移动。

球最终会移出屏幕，需要重新开始。

提出了一个想法：当球到达屏幕边缘时让它反弹回来。

使用 'if' 语句来在特定条件下改变 'speed' 变量。

'if' 语句允许在满足特定条件时执行代码。

当球到达屏幕右边界时，将 'speed' 设置为负值。

通过检查 'x' 变量来判断球是否到达屏幕右边界。

当球到达左边界时，将 'speed' 设置回正值。

调整检查边界的条件以确保球不会完全移出屏幕。

通过调整条件，使球在完全移出屏幕前反弹。

最终实现了球在屏幕边缘反弹的效果。

Transcripts

Whoo hoo! Another animation. This time we've got a ball moving across the screen,

and you guys know how this is done.

We've got a variable, "x," that tells us the position of the ball, a variable "speed" that tells us how far the ball moves every time

and a familiar draw loop where we're redrawing the background every time

setting fill colors and drawing the ellipse at position x, and every single time,

we're going to change "x" to be the old value "x," plus the variable "speed." So if I make "speed" smaller,

you can see it moves slower. I can make it negative, so we move backwords, or I can make it zero, and the ball would stop moving.

But as long as speed is not zero,

eventually the ball is going to go off the screen.

And I can always press the restart button to bring it back, but you know, after awhile, that gets old.

You restart, and restart...

So, how about this? When the ball reaches the right edge of the screen,

instead of going off the edge of the screen like it's doing now, I want it to turn around.

And, I know how to turn the ball around,I can just say, "speed" gets negative 5. If I make the speed negative, then the ball would go backwards.

But here is the problem.

I only want to change the speed if the ball has reached the right edge.

Hmmm... so I think I already said it. I only want to change the speed IF the ball has reached the right edge.

I think this calls for an "if" statement.

Up until now, we've only been giving the computer commands to run no matter what.

If statements are a way to say, "Hey dude, I want you to run this code, but only under these specific circumstances."

"So only change the speed if the ball has reached the right edge."

And here's how it looks in code.

All you do is type "IF" and then a pair of parentheses, and then a pair of brackets.

Inside the parentheses we're going to put the condition.

Inside the brackets we're going to put the code to run.

So the way it works is, "If this condition is true, then run this code. Otherwise, don't bother."

So in our case, the condition is the ball reaching the right edge. How do we know if the ball has reached the right edge?

We've got this variable "x" that tells us where the ball is, and I know that the edge of the canvas is x position 400, so let's see.

When "x" is greater than 400, then we know that the ball has gone past the right edge a little bit.

So let's see how that works.

And the code to run, we already said before, we're just going to change speed. Speed gets negative five. We're going to press restart and see what happens.

So this time, when the ball reaches the right edge, it bounces! Yaaaay!

And then it keeps going off the screen.

But that's OK, because we can keep doing the same thing on the other side. So this time, we want to check if the ball has reached the left edge.

And that's when x is less than zero, and what we want to do is make speed positive again, so speed gets 5.

Alright, and then we're going to press restart, and this time...

boing...

boing...

boing...

yay! It works.

And I know we're checking to see if the ball has gone past the edges, but it feels like it's going a little too far past the edges.

And if you remember, these two parameters control where the center of the ellipse is drawn.

So right now, by the time the center reaches the edge, half the ellipse has already gone past the edge.

So if we want to fix that, we just stop the ellipse a little sooner. So if our edge is here, at 400, and we want to stop our ellipse when it gets here,

and we can see from the function call that the ellipse has width 50, so that means from the center to the edge, that's going to be 25.

So we want to stop it when the center reaches 375, because that's 400 minus 25.

So instead of checking for x greater than 400, we're going to check for x greater than 375.

Instead of checking for x less than 0, I'll check for x less than 25.

And now it's perfect! Yay! Look at at that ball bounce.