Function Parameters | Computer Programming | Khan Academy

Summary

El guion del video trata sobre la mejora de un programa de dibujo de un personaje llamado Winston. El presentador explica cómo se pueden posicionar múltiples instancias de Winston debajo de etiquetas de texto para mostrar su desarrollo a lo largo de la vida. Para ello, se introducen parámetros en la función 'drawWinston()' para especificar la posición exacta del personaje en lugar de usar valores aleatorios. Además, se discute la necesidad de ajustar los valores para que Winston se posicione correctamente en relación con el texto y se menciona cómo cambiar el tamaño de los dibujos para que queden mejor en el espacio disponible. El video concluye con una revisión de cómo las funciones pueden ser útiles para reutilizar código y personalizarlo según las necesidades.

Takeaways

• 🖌️ El objetivo es posicionar el dibujo de Winston debajo de cada etiqueta de texto para mostrar su evolución a lo largo de la vida.
• 🔄 Antes, la posición de Winston era aleatoria debido a que se generaban valores aleatorios para faceX e faceY dentro de la función.
• 🎯 Para cambiar esto, se deben especificar parámetros en la definición de la función y en la llamada a la función para controlar la posición de Winston.
• 📏 Se sugiere que los valores para faceX e faceY sean similares a los utilizados en las funciones text(), pero con un desplazamiento de 10 píxeles en y para posicionarlos un poco más abajo.
• 🛠️ Al modificar la función drawWinston() para aceptar parámetros, se debe eliminar el código que antes generaba valores aleatorios para faceX e faceY.
• 🔧 Se debe ajustar la posición de Winston para que quede centrada debajo de cada etiqueta, teniendo en cuenta que el texto se posiciona según su esquina superior izquierda, mientras que el rostro se centra.
• 🔄 Al cambiar el tamaño de Winston, se puede ajustar la apariencia de todos los dibujos al mismo tiempo modificando una sola línea de código.
• 📝 La función drawWinston() se define para aceptar dos valores (faceX y faceY) que se pueden utilizar dentro de la función como variables.
• 🔄 La función drawWinston() se puede llamar con diferentes valores para personalizar la posición y apariencia de Winston en diferentes ocasiones.
• 🍽️ La analogía de la receta se utiliza para ilustrar cómo las funciones pueden ser reutilizadas y personalizadas con parámetros, similar a cómo se ajustan las recetas para diferentes necesidades.

Q & A

¿Qué problema estaba enfrentando el programador con el programa de dibujo de Winston?

El programador quería posicionar un dibujo de Winston debajo de cada etiqueta, pero el dibujo de Winston se desplazaba aleatoriamente debido a que las coordenadas faceX e faceY se establecían con números aleatorios dentro de la función.

¿Cómo resolvió el programador el problema de los Winstons desplazándose aleatoriamente?

El programador modificó la función para que aceptara parámetros, específicamente faceX y faceY, que le permitirían especificar la posición exacta donde dibujar a Winston cada vez que se llamara a la función.

¿Qué es un parámetro en un contexto de programación?

Un parámetro es un valor que se puede pasar a una función para personalizar su comportamiento. En este caso, faceX e faceY son parámetros que se utilizan para determinar la posición de Winston.

¿Cuál es la ventaja de utilizar parámetros en una función?

Los parámetros permiten reutilizar el código con diferentes valores, lo que reduce la repetición de código y permite adaptar la función a diferentes situaciones sin tener que modificar su definición.

¿Cómo se ajustaron las coordenadas para posicionar a Winston debajo de las etiquetas de texto?

El programador decidió posicionar a Winston 10 píxeles más abajo que las coordenadas de las etiquetas de texto, sumando 10 a la coordenada y de cada etiqueta.

¿Qué cambio hizo el programador en la función para que aceptara los nuevos valores de faceX e faceY?

Eliminó las líneas que establecían los valores de faceX e faceY con números aleatorios al inicio de la función, permitiendo que estos valores se establezcan a través de los parámetros pasados.

¿Por qué se necesitaba ajustar la posición de Winston después de pasarle los parámetros correctos?

El programador se dio cuenta de que el texto se posiciona según su esquina superior izquierda, mientras que el rostro de Winston se posiciona según su centro, lo que requirió ajustes adicionales en las coordenadas para que Winston se alineara correctamente con el texto.

¿Cómo resolvió el programador el problema de que Winston se solapada y no cuadra en el espacio?

El programador modificó el tamaño del dibujo de Winston en la función de dibujo, cambiando el valor del dibujo del elipse para hacer a Winston más pequeño y que se ajustara mejor al espacio.

¿Qué analogía utilizó el programador para explicar la reutilización de código con funciones y parámetros?

El programador utilizó la analogía de una receta de cocina. Una receta proporciona instrucciones generales que pueden ser adaptadas para preparar la comida para diferentes cantidades de personas, sin necesidad de reescribir la receta completa.

¿Qué se puede aprender de este ejemplo sobre la programación de funciones con parámetros?

Se puede aprender que al usar parámetros en funciones, se puede crear código modular y reutilizable que se puede adaptar fácilmente a diferentes situaciones, similar a cómo se ajustan las recetas para diferentes necesidades.

Outlines

00:00

😀 Optimización del dibujo de Winston

El vídeo comienza explicando cómo posicionar el personaje Winston debajo de cada etiqueta en un programa de dibujo. Se menciona que actualmente Winston aparece en lugares aleatorios debido a que los valores de faceX y faceY se generan de forma aleatoria. Para solucionar esto, se sugiere agregar parámetros a la función drawWinston() para que pueda recibir valores específicos de faceX y faceY en lugar de generarlos aleatoriamente. Se discute la necesidad de ajustar estos valores para que Winston se posicione correctamente en relación con las etiquetas, sugiriendo un desplazamiento de 10 píxeles hacia abajo en el eje Y. Además, se aborda la necesidad de modificar la función para que no sobrescriba los valores de faceX y faceY con números aleatorios, permitiendo así que la función use los valores pasados como parámetros. Finalmente, se nota que Winston es demasiado grande y se sugiere ajustar su tamaño para que quepa mejor en el espacio designado.

Keywords

💡Función

Una función en programación es un bloque de código diseñado para realizar una tarea específica. En el guion, se menciona que se ha agregado una función llamada 'drawWinston()' para dibujar a Winston en diferentes etapas de la vida. La función es importante porque permite reutilizar código y personalizarlo fácilmente al pasar diferentes valores como parámetros.

💡Parámetros

Los parámetros son valores que se pueden pasar a una función para personalizar su comportamiento. En el guion, se discute cómo se pueden especificar 'faceX' y 'faceY' como parámetros para la función 'drawWinston()', permitiendo así dibujar a Winston en posiciones específicas en lugar de posiciones aleatorias.

💡Dibujar (drawWinston)

Es la función mencionada en el guion que se utiliza para dibujar a Winston en la pantalla. Se utiliza para ilustrar cómo se pueden personalizar las funciones al pasarle parámetros específicos, como las coordenadas 'faceX' y 'faceY', para dibujar en una ubicación determinada.

💡Posición

La posición se refiere a la ubicación en la pantalla donde se dibuja un objeto. En el guion, se busca posicionar a Winston debajo de cada etiqueta de texto, lo que requiere ajustar la posición 'faceX' y 'faceY' para que coincida con la ubicación deseada, demostrando cómo se pueden controlar las posiciones exactas al usar parámetros en funciones.

💡Aleatorio

Inicialmente, en el guion, se menciona que la posición de Winston se establece con números aleatorios, lo que causa que aparezca en lugares distintos cada vez que se ejecuta la función. Esto contrasta con la intención de posicionar a Winston de manera específica, resaltando la necesidad de pasar parámetros para controlar la posición.

💡Definición de función

La definición de una función incluye el nombre de la función y los parámetros que acepta. En el guion, se muestra cómo se modifica la definición de 'drawWinston()' para aceptar 'faceX' y 'faceY' como parámetros, lo que es crucial para permitir que la función se personalice según las necesidades.

💡Llamada a función

Una llamada a función es cuando se ejecuta una función en el código. En el guion, se hace referencia a las llamadas a 'drawWinston()' con valores específicos para 'faceX' y 'faceY', demostrando cómo se pueden utilizar funciones con parámetros para lograr resultados precisos.

💡Coordenadas

Las coordenadas son pares de valores que determinan la ubicación de un punto en un espacio bidimensional. En el guion, se utilizan las coordenadas 'faceX' y 'faceY' para especificar la posición exacta donde se debe dibujar a Winston, mostrando la importancia de las coordenadas en la programación gráfica.

💡Tamaño

El tamaño de un objeto en programación gráfica determina cuán grande es el objeto dibujado. En el guion, se menciona que Winston es demasiado grande y se necesita ajustar su tamaño para que quepa en la pantalla, lo que se logra cambiando el valor del dibujo del círculo (el tamaño de Winston).

💡Optimización

La optimización es el proceso de mejorar el rendimiento o la apariencia de un programa. En el guion, se optimiza la posición y el tamaño de Winston para que se vea mejor en la pantalla, demostrando cómo se pueden hacer ajustes para mejorar la salida visual del programa.

Highlights

Introduces the concept of adding text to a Winston drawing program.

Discusses the need to position Winston consistently under each label.

Mentions the current issue of Winston's random placement due to random faceX and faceY values.

Explains the idea of specifying exact positions for drawing Winston.

Draws a parallel between the positioning of Winston and the ellipse() and rect() functions.

Introduces the concept of function parameters for customizing the drawing position.

Suggests passing faceX and faceY as parameters to the drawWinston() function.

Recommends positioning Winstons under each text label, slightly lower in the y-coordinate.

Provides specific coordinates for positioning Winstons relative to the text.

Points out that Winston hasn't moved because the function still uses random values.

Instructs how to modify the function to accept parameters for faceX and faceY.

Highlights the need to delete lines that overwrite faceX and faceY with random values.

Discusses the difference in positioning between text and Winston's face due to anchor points.

Describes the process of adjusting the x and y coordinates for accurate positioning.

Notes the issue of Winston's size overlapping and the need to adjust it.

Explains how to modify the size of all Winston instances by changing a single line of code.

Concludes with a review of the code's functionality and the benefits of using functions with parameters.

Draws an analogy between coding functions and recipes, emphasizing customization and reusability.

Transcripts

We're back to our Winston drawing program, but I've added some text to it.

See, what I wanna do is position a Winston underneath each of these labels,

to show him at each point in life.

Right now he's all over the place. That's because we are setting the

faceX and the faceY to random numbers inside the function.

What we wanna say is, "Here's the exact position I want you to draw this Winston"

I wanna be able to specify that position every time I call the function,

the same way we do with ellipse() and rect().

I wanna put a Winston here,here, and a Winston here, and a Winston here,

and I don't want just random places every time I call the function.

In order to do that, we have to specify "parameters" for the function,

both in our function definition -- at the top here --

and in our function call, down here, when we actually call it.

For drawWinston(), we pass it faceX and faceY,

and have it use those values that we pass in instead of generating them randomly.

Let's by thinking about what we'd pass into these function calls down here.

We position the Winstons under each text, so we'd probably want the x and y of each

Winston to be similar to the numbers we passed into the text() functions.

Maybe,10 pixels lower in the y. The first one would be 10 and 30,

and then maybe 200, 230... 10, 230... 200, 230.

It's the same as the text coordinates, I'm just adding 10 to each y, '

cause I want it just a little bit lower.

Winston hasn't moved. We haven't told our function up here that

we're passing it parameters, so it's still using these random values.

In order to tell this function,"We're gonna give you this information instead,"

we have to give the parameters names inside these parentheses.

We'll call it faceX and faceY, separate them by a comma,

We're calling it that since we're using it to refer to them inside the function

That way we don't have to rewrite the rest of our code.

But still, nothing has happened; Winston is still all over the place.

If you look at the very top of our function,

we're overwriting faceX and faceY with random values, still.

So, all we have to do is delete these lines...

Now, faceX and faceY are getting passed into the function,

and it's using the values that we're calling it with here.

I didn't quite position Winston correctly, because I forgot that text gets positioned

according to the upper left,and the face gets positioned according to the center.

I need to go and tinker with my numbers a little bit here, right?

I need to move the x over a lot, and move this over, okay... so that's our toddler..

We'll go through, and change what I'm passing into the function,

I don't have to change the function definition at all,

It's always gonna take whatever values we pass in.

Just like with ellipse() and rect().

I've positioned it, but I've noticed is that Winston is too big.

He's overlapping, he doesn't fit.

I've put the code to draw him in a function,

I can change the size of all of them at once

by changing one line of code that draws the ellipse.

If we make him like 190, Winston's going on a diet, by 190.

Now he's gonna fit better and then ya know I could keep tweaking

so I could actually get him inside there, right? Cool.

Let's do a review of what this code does. It defines a function called drawWinston()

and says this function takes two values, and it labels them faceX and faceY,

these values come in as variables that we can use anywhere inside our function,

just like we used to use the variables that we declared at the top

And then we can call this function whenever we want after we declare it,

we can pass in different values, so it'll use those new values each time.

You've seen what's cool about functions. We can come up with code that

we think would be really useful to reuse, but we can also use parameters to say

"Hey, here's a little something you can change about this code, to customize it."

It's like a recipe. You write down the general instructions,

and if you realize you suddenly need to feed 4 Winstons instead of 1,

you don't have to start all over, you just modify the original instructions

and multiply everything by 4.

Now you can start thinking about the recipes in your code! Yummy.