Function Parameters (Video Version)
-
0:01 - 0:06We're back to our Winston drawing program,
but I've added some text to it. -
0:06 - 0:11See, what I wanna do is position a Winston
underneath each of these labels, -
0:11 - 0:13to show him at each point in life.
-
0:13 - 0:16Right now he's all over the place.
That's because we are setting the -
0:16 - 0:20faceX and the faceY to
random numbers inside the function. -
0:20 - 0:27What we wanna say is, "Here's the exact
position I want you to draw this Winston" -
0:27 - 0:30I wanna be able to specify that position
every time I call the function, -
0:30 - 0:33the same way we do with ellipse() and rect().
-
0:34 - 0:40I wanna put a Winston here,here,
and a Winston here, and a Winston here, -
0:40 - 0:44and I don't want just random places
every time I call the function. -
0:44 - 0:49In order to do that, we have to specify
"parameters" for the function, -
0:49 - 0:53both in our function definition
-- at the top here -- -
0:53 - 0:57and in our function call, down here,
when we actually call it. -
0:57 - 1:02For drawWinston(),
we pass it faceX and faceY, -
1:02 - 1:09and have it use those values that we pass
in instead of generating them randomly. -
1:09 - 1:15Let's by thinking about what we'd
pass into these function calls down here. -
1:15 - 1:20We position the Winstons under each text,
so we'd probably want the x and y of each -
1:20 - 1:24Winston to be similar to the numbers
we passed into the text() functions. -
1:24 - 1:32Maybe,10 pixels lower in the y.
The first one would be 10 and 30, -
1:32 - 1:41and then maybe 200, 230...
10, 230... 200, 230. -
1:41 - 1:45It's the same as the text coordinates,
I'm just adding 10 to each y, ' -
1:45 - 1:47cause I want it just a little bit lower.
-
1:50 - 1:55Winston hasn't moved.
We haven't told our function up here that -
1:55 - 1:59we're passing it parameters,
so it's still using these random values. -
1:59 - 2:04In order to tell this function,"We're
gonna give you this information instead," -
2:04 - 2:08we have to give the parameters
names inside these parentheses. -
2:08 - 2:14We'll call it faceX and faceY,
separate them by a comma, -
2:14 - 2:21We're calling it that since we're using
it to refer to them inside the function -
2:21 - 2:23That way we don't have to
rewrite the rest of our code. -
2:23 - 2:29But still, nothing has happened;
Winston is still all over the place. -
2:29 - 2:31If you look at the very top
of our function, -
2:31 - 2:35we're overwriting faceX and faceY
with random values, still. -
2:35 - 2:39So, all we have to do
is delete these lines... -
2:39 - 2:45Now, faceX and faceY are getting
passed into the function, -
2:45 - 2:50and it's using the values
that we're calling it with here. -
2:50 - 2:55I didn't quite position Winston correctly,
because I forgot that text gets positioned -
2:55 - 3:01according to the upper left,and the face
gets positioned according to the center. -
3:01 - 3:06I need to go and tinker with my
numbers a little bit here, right? -
3:06 - 3:13I need to move the x over a lot, and move
this over, okay... so that's our toddler.. -
3:13 - 3:18We'll go through, and change
what I'm passing into the function, -
3:18 - 3:23I don't have to change
the function definition at all, -
3:23 - 3:26It's always gonna take
whatever values we pass in. -
3:26 - 3:28Just like with ellipse() and rect().
-
3:28 - 3:33I've positioned it, but
I've noticed is that Winston is too big. -
3:33 - 3:36He's overlapping, he doesn't fit.
-
3:36 - 3:39I've put the code to
draw him in a function, -
3:39 - 3:42I can change the size
of all of them at once -
3:42 - 3:45by changing one line
of code that draws the ellipse. -
3:45 - 3:51If we make him like 190,
Winston's going on a diet, by 190. -
3:51 - 3:56Now he's gonna fit better and
then ya know I could keep tweaking -
3:56 - 4:02so I could actually get him
inside there, right? Cool. -
4:02 - 4:09Let's do a review of what this code does.
It defines a function called drawWinston() -
4:09 - 4:15and says this function takes two values,
and it labels them faceX and faceY, -
4:15 - 4:20these values come in as variables that
we can use anywhere inside our function, -
4:20 - 4:23just like we used to use the variables
that we declared at the top -
4:23 - 4:29And then we can call this function
whenever we want after we declare it, -
4:29 - 4:34we can pass in different values,
so it'll use those new values each time. -
4:34 - 4:38You've seen what's cool about functions.
We can come up with code that -
4:38 - 4:43we think would be really useful to reuse,
but we can also use parameters to say -
4:43 - 4:46"Hey, here's a little something you can
change about this code, to customize it." -
4:46 - 4:49It's like a recipe.
You write down the general instructions, -
4:49 - 4:53and if you realize you suddenly
need to feed 4 Winstons instead of 1, -
4:53 - 4:56you don't have to start all over,
you just modify the original instructions -
4:56 - 4:58and multiply everything by 4.
-
4:58 - 5:02Now you can start thinking about the
recipes in your code! Yummy.
- Title:
- Function Parameters (Video Version)
- Description:
-
This is just a screen grab of our interactive coding talk-through, prepared to make captioning and translation easier. It is better to watch our talk-throughs here:
https://www.khanacademy.org/cs/programming/
- Video Language:
- English
- Duration:
- 05:05
Trisha Wagner edited English subtitles for Function Parameters (Video Version) | ||
Trisha Wagner edited English subtitles for Function Parameters (Video Version) | ||
Trisha Wagner edited English subtitles for Function Parameters (Video Version) | ||
Trisha Wagner edited English subtitles for Function Parameters (Video Version) | ||
Trisha Wagner edited English subtitles for Function Parameters (Video Version) | ||
Trisha Wagner edited English subtitles for Function Parameters (Video Version) | ||
Trisha Wagner edited English subtitles for Function Parameters (Video Version) | ||
Trisha Wagner edited English subtitles for Function Parameters (Video Version) |